Role: Product Designer, Founder
Type: Navigation Feature
Time: 1 month
At a glance
Debedbug empowers visitors with research-driven content. It boasts a 17.5% sales conversion vs the industry average of 6.6%. Fluid navigation is key to the content-heavy experience. An annual audit uncovered a want for improved navigation.
Responses
I explored solutions through research and ideation sprints before shipping a responsive sticky table of contents. This case study explores its design, implementation, and impact.
What I did
Research, Persona Building, CSS, HTML, Javascript, Qualitative Research, Journey Mapping, Usability Testing, Page Speed Optimization
Phase 1: Annual Audit
>36k
Annual Visitors
3/3
Uncomfortable With At-Home Treatment
17.5%
Annualized Sales Conversion
Persona-driven iteration
The goal of the audit was to create a pandemic-adjusted persona and journey map. 3 participants were sourced from the site's mailing list. Organizing interview notes into themes and opportunities revealed a want for improved navigation.
An updated journey map
Keyword research, personas, user flows, and journey maps have guided over 100,000 words of original content and over 400 media assets. Periodically updating the journey map builds empathy and keeps the product aligned with user needs.
Key takeaway: In-content navigation would improve the end-user experience.
Phase 2: Feature Buildout
Ideation and prototyping
Competitive research uncovered several potential solutions. Reactive tables of contents have gained traction and are feasible with my level of coding ability. The AHREFS SEO blog was my biggest source of inspiration.
Iteration and implementation
A usability test looked for opportunities to iterate. Testers easily navigated between sections but had trouble navigating within them. Including H3 anchors in each section gave them the right level of granularity. It also inspired a mobile navigation solution.
Phase 3: Responsivity
Page speed optimization
The first experience people have with an online product is the speed at which it loads. Maintaining a sub-1-second load is critical to user experience, retention, and bounce reduction. I audited the site with the new features using GTmetrix and Google Lighthouse.
Designing for mobile
I included the original static table of contents along with in-section navigation and a back-to-top button. That way, the table of contents is always a tap away.
Outcome: Key Takeaways
I have taken on design, motion graphics, coding, server upkeep, marketing, content writing, SEO, monetization, and more for Debedbug. The exploration has opened my eyes to countless ideas and considerations. I have enjoyed it profoundly!
The sales conversion rate for pest control suppliers sits at around 6.64%. Debedbug's rate of 17.51% is thanks to continuous research, iteration, and a focus on respecting user intent. I like to measure the impact of this project through feedback as well.
Reader comments
Jared Ann
"Our building was acutely infested. I was preparing for bilateral knee surgery and had to deal with the bugs first. We needed help desperately and wound up here. THANK YOU!"
Marii
"I was living in so much distress, I read the whole website in one night! The neighbors still have them but things are better for my son and I. Thank you for this free info."
Key takeaways
- Prioritizing user intent benefits everyone. People are happy to share a site with their personal networks if it provides value.
- The cost of perfection is infinite. Consistency is key - years of iteration have compounded.
- Everyone designs the user experience. Load times affect user experience. SEO is UX writing. Cross-functional collaboration is essential for a cohesive user experience.
What I'd do differently
- Maintain a design system from the outset. A design system provides a north star.
- Establish a process that scales. Processes are the lubricants of business. Documentation and outsourcing would let me focus on what I am best at - experience design.
MATTHEW CHEN ©2022