For my 2nd Google Coursera Project centered around Responsive Web Design, I chose to do a redesign of Hum Nutrition's conversion flow. I was first inspired to make changes to the Hum Nutrition website when I witnessed my friend’s frustration navigating their homepage and conversion funnel shopping quiz. With the continual rise of the health-conscious trend, curious consumers desire a comprehensible flow of recommendations and information, especially when it comes to something as complex as health and wellness. I figured this was my opportunity to reimagine Hum Nutrition's conversion flow shopping quiz.
I spoke with new Hum Nutrition users and avid supplement users. Both cohorts displayed an initial distrust on the homepage, with Hum Nutrition customers proceeding only because of external trust validation. Notably, the homepage and conversion funnel quiz, crucial touchpoints in their journey, suffered from issues of prominence, such as complex navigation, and interpretation problems due to misaligned content.
Thus, to enhance user experience and promote positive prominence and interpretation, we must redesign these pages to enhance clarity, aesthetics, and ultimately build stronger trust.
User Goals
Current Home Page
Current Quiz Flow
Current Recommendation Page
How might we help curious supplement users navigate through the conversion funnel quiz flow whilst ensuring an understanding and trust of Hum Nutrition's products?
Consistency in designs helps users understand the function of the design quicker cognitively which in turn will help them navigate the pages with ease.
Especially for products affecting the human body, it is important to be clear when communicating information on how tis will impact users' well-being.
Avoid dark UX designs, present pages in an honest manner.
Although the initial project inspiration came from a few of my friend’s frustration who were referred to Hum Nutrition’s products by bloggers, I wanted to see if their hesitancy with the company’s e-commerce website was consistent with supplement consumers who never encountered it before. I conducted interviews with 5 avid supplement takers and asked them the questions below to find out what was at the core of their bad experience in order to improve it.
Armed with ideas, I turned to the timeless pen and paper method to translate thoughts into tangible sketches.
Prioritizing simplicity and consistency in my UI design sketches, I avoided elements that might breed user distrust. For inspiration, I looked to companies like HelloFresh, Care/Of, Scentbird, Aduible, and Vous Vitamin, all shining in the subscription sphere and/or excelling in conversion UXUI design.
Through multiple iterations, user feedback, and valuable insights from mentor Brian, I was able to deliver refined mobile and desktop designs for Hum Nutrition's Homepage, Shopping Quiz Flow and Recommendation Page.
Centered Elements: Instead of a left aligned hero banner, I chose to use an image with no prominent justification and centered the related components. The centered justification of components conveys a more balanced visual hierarchy compared to the original design.
Accessible Carousel: To enhance accessibility, I added Floating Action Buttons (FAB) which appear upon user's mouse hover, enabling carousel image rotation. Dashed indicators were also introduced to signify the carousel's position. These changes address cognitive overload from previous designs, boosting function clarity.
Reduction for Simplicity: The original design's extensive use of pink and verbose sections led to user frustration. In my redesign, I limited the pink palette and restructured both the text and components, such as the 'How It Works' section, to enhance user comprehension.
The first thing I addressed was the lack of summarization pain point users had with the original recommendations page. To mimic the analysis a professional nutritionist might give, I made sure key elements were clearly visible upon arrival and included a concise summary reflecting their quiz results.
I also eliminated the 'Coupon Countdown Timer', a dark UX element that created artificial urgency by imposing a faux expiration time. Removing this deceptive component fosters a more authentic experience for users shopping on this site.
User feedback indicated confusion over some questions and a desire for more context. To address this, I introduced a "Why we Ask" modal button for certain potentially sensitive or complex questions. Upon clicking, users can understand the reasoning behind each question, fostering trust and showcasing the company's expertise in health knowledge. This feature acts as a clarifier, enhancing user understanding and confidence in the quiz's purpose.
From user interviews, I learned the quiz induced cognitive overload. To alleviate the confusion and ambiguity of the original design, I strategically implemented a balance of icon usage. For some questions, I paired icons that was better matched with text labels to enhance recognition, while for others, I opted for icon removal to mitigate cognitive load.
View the full desktop version here
While designing this content-rich mobile page, I considered the potential for information overload. Understanding this challenge, I organized the layout to progressively unveil content, allowing users to focus on manageable sections at a time. I implemented a fixed checkout button to aid quick browsing and added an expandable, collapsible order detail element for user flexibility
To heighten clarity and improve user experience in the quiz journey, I incorporated a contextual information page. The original quiz flow directed users to a page more focused on selling than orienting them within the process. This absence of context left users feeling disoriented and overwhelmed.
By aligning with key UX principles, particularly 'being clear' and 'being simple', this change now guides users smoothly along their journey, ensuring they remain informed about their progress and what to expect next.
The original mobile quiz was scaled down version of the desktop quiz, which is not an optimized design for mobile visibility and interactivity. To mediate this issue, I made the buttons larger for better touch accessibility.
Self-guided projects can easily lose focus without defined constraints.
In this endeavour, I set constraints like retaining Hum Nutrition's brand colours and content, albeit reshaped as needed based on user insights. I also added lighter shades to their style guide. This helped tone down their bright pink brand colour, and introduced a calming, trustworthy sentiment - something we often associate with the health industry. The idea was to use colour to subtly foster a sense of balance and reliability for users.
Designing for mobile and desktop has opened up my eyes to a lot of different ux design strategies.
Here are some of my main takeaways + reflections:
A New Addition to My UX Toolkit: Adobe XD was a requirement for this project, and although I was initially hesitant, being an ardent Figma enthusiast, the experience proved to be an enriching one. I was able to broaden my horizons, appreciate the distinct features and capabilities of both tools, and strengthen my adaptability as a designer.
Tackling Perfection with Constraints: One of the major lessons from this project has been learning to view constraints not as obstacles, but as opportunities for creative problem-solving. The constraints I placed on myself - strict deadlines, clear objectives - were what ultimately allowed me to break free from the loop of endless iteration. They forced me to make decisions and move forward, turning what could have been a roadblock into a powerful catalyst for progress.
The Power of Feedback and Iterative Learning: Feedback and iteration emerged as vital components of my design journey. Acknowledging critique, revising designs, and viewing each step as a learning opportunity rather than failure has immensely contributed to my growth as a designer and the success of the project.
Integrity CAN be shown through design: In synthesizing user interview insights, I discovered that integrity can indeed shine through design. When users interact with a well-crafted product, they may not explicitly recognize the amount of work put into it, but they intuitively appreciate the quality. This appreciation, although often subconscious, is a silent nod to the effort invested and the integrity of the design process
If I had more time... I'd definitely create my own icons to reflect the quiz question option labels better and explore other flows of the website.
