Waggle is an AI-driven B2B software elevating the experience of remote and hybrid teams, through automating management admin, and providing real-time coaching for effective leadership. Fusing cutting edge technology with human-centric leadership principles Waggle acts like a second brain so managers can be more present with their team, leading to a happier more productive workplace. Despite its potential, the original marketing site was struggling to attract users, so I led a conversion-focused redesign before the product launch.
Contracted Work • Aug 2023
Lead a website redesign conducted over 4 weeks by a team of 3.
Heuristic Evaluation + Audit
Competitive Analysis
Low-fidelity Sketches
High-fidelity Mockups
Fully Responsive Website
Our team’s objective was to redesign Waggle’s marketing site to increase the conversion rate up to 5%. To address this issue, our team focused on creating a site that built trust with the potential users. Central to our strategy was the creation of an inviting and user-friendly platform, enabling us to present Waggle's offerings in a more accessible and easily comprehensible manner.
Taking a closer look at the site from a user interface perspective, we identified two key issues: maintaining a consistent and standardized design, and incorporating a minimalist and aesthetic approach. This combination could be overwhelming for users, possibly causing them to lose interest before discovering how Waggle could contribute to their business goals.
Lots of features created a long introduction page and according to the *heat map less than half of users were scrolling past the fold of the home page.
The pages were full of inconsistent headings and CTA buttons of varying labels and styles, which failed to establish a hierarchy and create clarity for a user to take action.
In general the design felt a bit clunky and didn’t contribute to making information easy to scan and understand.
During our competitive analysis, our focus was conversion and our objectives were to gain insights into how other companies showcased their features, effectively communicated their mission, and created a call to action.
After auditing the existing website, and competitors sites we narrowed it down to the landing page and How it Works page being the pages that would make the biggest impact on conversion. According to the heat map data these pages collectively had 78% of the site’s traffic and intuitively would be where the user would go to see if this was a product they were interested in. Of course looking at how trust in a new product is created holistically we also brainstormed ideas for other areas of concern on the site. We presented all of our sketches to the owner to get approval on what designs to move forward with.
I decided that the features section would lead to the greatest call to action so it was important to create a design that would allow the user to learn about Waggle’s features as quickly and efficiently as possible. I explored different ways of displaying that information through horizontal tabs, info cards and accordions. Ultimately the owner preferred the tabs design.
The original testimonial section is quite large and only displays one testimonial at a time. Our idea was to condense the testimonials and showcase multiple at once. This way, users can swiftly establish trust in the product without delving into each review individually.
The original design was text-heavy and didn’t feel very engaging. We thought it would be a good opportunity to include a demo video, or include more eye catching visuals with key takeaways or stats on the success of beta testing. I also suggested a value calculator that would calculate Waggles value for a company based on size and number of teams. In the end the owner wanted to keep the content the same but was open to creating a demo video.
Given the timeline and stakeholder goals for the project we went straight from sketches to high fidelity designs. Our client’s site was in Framer, which none of us had previous experience with before, but felt confident we could learn in the given time frame.
For the first iteration we divided the main page’s sections between the three of us focusing on formatting the features section, creating more visuals for the text heavy sections, and refining typography and CTA styles. Despite our collaborative efforts, the outcome seemed to reflect the contributions of three distinct individuals. Following a client presentation, we recognized the need to realign and create a cohesive shared vision.
To bridge the gap in our designs, we each crafted a homepage using successful components from the prior version. This approach generated a range of possibilities, allowing us to combine elements from diverse designs. We showcased a darker variant that aligned with the client's original site aesthetics, and a livelier, approachable version with a lighter purple hue.
In the features section, we presented options including a banner-style navigation and content housed within a cohesive background. The client expressed high satisfaction with the designs, viewing them as a refined enhancement of the original site with only minor tweaks needed.
A pivotal element in our design was the features tab section, requiring responsiveness across various screen sizes. To maintain the essence of providing a comprehensive view of features while accommodating smaller screens, we opted for an accordion-style layout for smaller tablets and mobile devices. This approach ensured that users could access both a condensed overview and additional information easily.
For the third iteration, our work primarily revolved around translating the high-fidelity mockup into a responsive and interactive website within Framer. Responding to the client’s preferences we opted for the lighter shade of purple, and the main features content being presented in a solid background.
This marked my first team project and my first foray into development. Our project allowed us to strike a balance between implementing UI best practices and enhancing user experience, all while successfully catering to our client's goal of creating a more visually appealing website to increase conversion.
01
collaborating effectively
Navigating diverse time zones and work schedules posed one of the biggest challenges for our team. We discovered that fostering transparent and frequent communication and valuing each other's perspectives and rationale proved pivotal in achieving a collaborative and successful design.
02
Designing for responsiveness
Designing a website it was important to always keep in mind that our designs needed to have the same impact across varying screen sizes.
03
designing to development
Designing and learning a new software in less than a month presented a huge challenge. Taking on development and design bolstered my confidence in meeting client preferences and requests, and diving into platforms like Framer for development. Moreover, this experience heightened my empathy as a designer, offering a small insight into the process developers navigate when translating designs into a functional digital product
