Anchor Drop
Redesigning and building a new website for a health and wellness organization to improve the user experience and increase conversions.
My Role: UX/UI Design, User Research, Usability Testing, Prototyping, Brand Design, Front-end Website Development, Journey Mapping, User Flows, Content Writing
The Team: The website owner, a content adviser, and myself - the UX/UI Designer.
The Problem
Anchor Drop is a health and wellness blog with content about physical and emotional health, recipes, life, and faith. The owner wanted to reach more people with health tips and encouragement, but the site's traffic had decreased. In addition, few new users were converting by becoming subscribers or members. She brought me in to design and build a new site in order to increase the number of users and conversions. User research and competitive usability testing revealed the main problems: poor navigation, information architecture, accessibility, and visual design.
The Solution
After several rounds of prototyping and usability testing, I designed and built a new website with clear navigation. I used a mobile-first approach to meet the needs of both mobile and desktop users. The new site is intuitive and enjoyable to use, with improved accessibility. A new color scheme and layout improved the aesthetic appeal. After launching the new website, site traffic increased by 200%, and conversions (subscriptions and memberships) increased by 100%.
Constraints
• The new website needed to have a clean, minimalist, and modern look. It must have a lighter color scheme than the current site. It should have a homey, personal feel.
• It should increase traffic, new subscribers, and website memberships by at least 50%.
• The new website needed to be built on a platform that will be easy for the owner to manage the herself, and allow the owner and other content contributors add new recipes and blog posts easily.
• Project timeline: 12 weeks.
Key Lessons Learned
Through this project, I learned how important it is to be flexible and value excellence over perfection. I had to switch platforms partway through and therefore I lost some creative freedom, which was frustrating. Not everything about the final product was perfect, but I was able to work within the limitations to create something that still offered a great user experience.
I also learned how to negotiate more effectively with stakeholders to meet their wants and needs without destroying the user experience. For example, pop-ups and advertisements were a major pain point for users, especially on mobile sites. However, the client needed to increase the number of subscribers. I compromised by having a subscription option in the header and short subscription forms throughout the site. Good design is all about balancing user and business needs!
User Research: Contextual Inquiry
I met with the owner of Anchor Drop to learn more about her organization and goals for this project. I explained the design and development process to her, and together we decided on a timeline for the project.
In order to improve the site, I wanted to find out more about users’ blog use, what they like about their favorite blogs, and what problems they have. This would give me ideas about what to include in the new site, and what to eliminate from the old one. The best way to do this was to interview and observe 5 users in their context of use: in their homes, on their own devices.
Defining the Problem
I analyzed my notes from the contextual inquiry, created an affinity diagram, and identified the main themes. I was surprised to learn that users rarely looked at blogs on their phones since this is typically the most popular way people visit websites. However, after watching users struggle with mobile blog sites that were poorly designed and full of popups, I understood why. This insight told me that creating a responsive site with excellent mobile usability would put it above the competition.
In order to help us empathize with the users and determine the main problem, I created 2 personas to represent the themes I observed during my research:
To help put us deeper into our users' shoes and heads, I created an empathy map for each persona:
l also interviewed a user with low vision in order to learn about their experiences and frustrations with websites and blogs. I created an accessibility persona based on what I learned as well as WCAG accessibility guidelines in order to ensure we kept accessibility in mind during every stage of the design process:
Now that we had the user research results and personas, it was time to combine them to narrow down the problem. In order to identify pain points and generate ideas for improvement, I completed task analyses and created user journey maps to represent the most common tasks.
Finding an article:
Finding a recipe:
Subscribing to the blog:
A solid understanding of the user flow was essential to design and build a site that helped the user achieve their goals with as little friction as possible. I created a user flow to map out the steps the user would take to complete common goals on the site. This helped guide the design process to make sure these flows were easy, painless, and pleasant.
To give the site owner a clear idea of what we needed to accomplish, I shared these deliverables along with a written report explaining my insights from the contextual interviews and competitive usability testing. I defined a problem statement to help guide the design process and inspire new ideas:
“A working woman needs access to resources to improve her health because her busy schedule makes her feel tired and discouraged and makes it difficult to find time to take care of herself.”
Competitive Usability Testing
Anchor Drop's site needed to be assessed to determine what was working well and what the pain points were. We also needed to know what made competitor websites successful and what their pain points were so we could build a site that was both superior and intuitive. To accomplish this, 5 users completed A/B usability testing with the current website and 2 competitor websites to help us learn what was working, what needed to change, and generate ideas for ways to create a better site.
Anchor Drop Site Results:
Anchor Drop Site (Homepage)
Anchor Drop Site Testing Results
Competitor Site Results:
Competitor Sites: TheKitchn and Wellness Mama
Competitor Site Testing Results
Improving the Information Architecture
Users were extremely frustrated with the current site's information architecture, so it was very important to design a new site with intuitive information architecture. To achieve this, we needed an idea of the users’ mental models of how the site’s pages and blog posts should be organized. 15 users completed an open card sorting task with words and phrases that represented the main content of the site.
Many participants commented that there was a lot of overlap and many items could easily belong in several groups or categories. This insight told me there was great potential for users to get confused when attempting to locate content. It was tricky for me to create new categories and subcategories given the large number of blog posts that addressed multiple topics at once.
My initial categories and subcategories:
Users tested the initial categories and sub-categories with reverse tree sorting. They were confused by the Health & Wellness subcategories due to overlap. Many articles addressed multiple health issues, so I made the categories broader and eliminated the health and wellness subcategories.
After several rounds of re-categorizing and re-testing, I was thrilled to finally have new information architecture that didn't appear to confuse users:
Ideation and Rapid Prototypes
Using "how might we" and sketching help me generate many ideas. In order to get user input early on, I refined my sketches to create and test rapid prototypes.
Using a mobile-first approach, I started by sketching options for the homepage and navigation. During initial A/B testing, users preferred the first design because it offered articles right away.
Homepage design #1
Homepage design #2
Navigation
The results of competitive usability testing indicated that we needed to provide a way for users to narrow recipes down by category, so I sketched several ways to achieve this. During A/B testing, users preferred the second design and completed desired actions more quickly.
Recipes page design #1
Recipes page design #1 dropdown menu
Recipes page design #2
For desktop, I sketched 4 different homepage design ideas. Usability testing showed design #2 was the most effective homepage design because it offered visible, above-the-fold content right away without being cluttered.
Design #1: Mirrors the mobile site.
Design #2: Jumps right into recent posts.
Design #3: Increases the content shown above the fold.
Design #4: Decreases the risk of banner blindness caused by full-width picture right under the header.
Wireframes
Usability testing the sketches revealed that users had too many steps to reach the categories on the mobile site, so I added these to the homepage. At this point the owner had made a final decision on which platform she wanted for the site, so I also incorporated changes based on the technical limitations of the platform.
Mobile homepage top and area below the fold
Mobile homepage continued, and footer
Mobile recipes page, blog category page, and about page
To prevent potential banner blindness that might cause users to miss the statement about the site's content and purpose, I added padding between the header and the full-width picture on the desktop homepage. I eliminated the dropdown menu for recipe subcategories because there were not enough recipes for each subcategory to need its own page.
Desktop recipes page
Desktop homepage top
Desktop homepage center
Desktop homepage bottom with footer
Desktop blog category page
Desktop about page
High-Fidelity Prototypes
I shared the wireframes with my client and explained the reasons for all of my design decisions to make sure it would meet her expectations. We needed something more interactive and realistic to be able to accurately test the full site with users, so I created a high-fidelity prototype of the new website. To give users an instant idea of what the site was about, I wrote an introduction to the site's content for the homepage and descriptions of each category for the category pages. I also created a new logo and color scheme.
Homepage
Recipes page
Blog category page
Footer
Since users reported they hated cluttered sites, I removed the subscription form from the header and added decorative lines to make the two rows of content appear cleaner and less cluttered. When users clicked "subscribe," a form appeared via modal window that allowed users to quickly subscribe without losing their place in the site. Users also didn't want to spend a lot of time searching for content, so I organized the menu from the most to the least used items.
Desktop homepage
Desktop footer
Desktop category page
Desktop subscription form
Usability Testing
5 users tested the interactive prototype on mobile and desktop devices given tasks that were important to both the users' and the site owner's goals. Tasks included finding an article about a specific topic, finding a recipe for someone with a food allergy, sharing an article on social media, and subscribing to the blog.
Results
Successes:
√ 5/5 users quickly and easily located a blog article on a specific topic.
√ 5/5 users navigated to the correct category given a blog topic.
√ 5/5 users quickly and easily located a recipe given dietary restrictions.
√ 4/5 users used the category options in the header to navigate to content.
Pain Points:
X 4/5 users clicked on the "subscribe" link in the header to subscribe, but immediately closed the pop-up subscription form that appeared because they thought it was an advertisement.
X 2/5 users attempted to use the social media follow buttons in the footer to share an article on social media.
The Final Product
Style Guide
The Final Mobile Website
Homepage, menu, and footer:
Homepage
Open hamburger menu
Open hamburger menu continued
Footer
Category pages:
All recipes page
Bottom of recipe subcategory page
All posts page
Blog category page
The Final Desktop Website
Homepage, above the fold
Homepage continued
Footer (bottom of homepage)
Subscription page
Blog post (bottom)
About Us page
Category page
Recipes page
Outcomes
I completed one more round of usability testing on the final, live website to make sure my changes were effective and to check for pain points. Users demonstrated no confusions or errors while completing tasks on the website, including subscribing, sharing on social media, locating articles, and locating recipes. Users' subjective satisfaction ratings were consistently high.
Quotes from users:
"I love how it's clean looking and it's not constantly throwing advertisements in your face like a lot of other blogs do."
"This is pretty intuitive!"
"This is a really nice website. I wish more sites were like this."
3 months after launching the new website, analytics showed site traffic increased by 200%, and conversions (subscriptions and memberships) increased by 100%.
More Case Studies
Healthy Nugget
Flora2Go