User research
Mockups
Visual design
Information Architecture
HotJar
Google Analytics
Figma
Adobe CC
As the sole designer of the start up, I designed all aspects of Revital U’s official website end-to-end from the initial concept through a high-fidelity interface. During the project I collaborated closely with the marketing, sales and the C-Suit leadership to align goals. I also was responsible to create a comprehensive PRD and talk to the developers to execute the project.
THE BUSINESS
Revital U is an e-commerce company that offers health and wellness supplements. Their bio-optimized ingredients offers varieties of benefits that can fit in anyone's lifestyle.
As an ever-evolving company, Revital U took a Beyond Organic approach to their health and wellness products. That meant cleaner and more scientifically-tested ingredients were used in their products. Hence, they wanted this change to be conveyed through their digital platforms too.
In the beginning of the project, I conducted a quick audit of the website and conducted heuristic analysis based on Nielsen Norman’s 10 Usability Heuristics for User Interface Design. Below is what the original Revital U website looked like.
RESEARCH - pt.1
To have a better understanding of the website’s problems, in addition to the heuristic analysis, I worked with the developers to implement HotJar, an analytics platform that records users sessions. I watched users who dropped off the website and checkout and wanted to know what’s their general behavior on the site and their main drop off reason.The key issues I found was:
The top navigation included a products dropdown menu. However, it only listed the product names without giving them any context or guidance on what they were. This based on “Recognition Rather than Recall” principle, this added extra unnecessary cognitive load.
The credit card input information used a engineering-driven approach, where it was just following what practically was needed for the site as opposed to how users expectations were from a credit card input system. This conflicted with users’ expectation based on 4th heuristic principle which suggests users spend time on other website more.
The sessions recordings showcased that many users were interested in learning about the products’ ingredients, as 80% of the observed users clicked on the ingredients button. However, they only accessed a PDF of all ingredients, which was hard to navigate.
Overall aesthetics of the website was very unorganized and inconsistent throughout the site.
RESEARCH - pt.2
In addition to the research above, I conducted competitive analysis to better understand the supplement B2C landscape and see how others approach their site. For this I targeted two main website: Ritual and Mudwater. Even though these two were not direct competitor, they each were recognized for their sales and innovative website flows. Below are the key learnings from them:
Compared to the other D2C websites, where they strongly highlighted their story and transparent practices, Revital U website was very sales and marketing focused and only talked about the promotions.
The reviewed websites used nudges to guide customers add more products to their cart in an nonintrusive way whereas Revital U did not have anything when the cart was empty.
Hypothesis & Strategy
I formulated three hypotheses, each followed by a strategy and design solution aimed at improving user engagement and the website quality.
DESIGNING AND ITERATING
I started the visual design process by creating multiple rounds of wireframes. After each ran, I shared them with the team and got their quick feedback about the information architecture and the flow. This early feedback process helped me iterate quickly without being invested in the design and get trapped in sunk-cost biased.
adaptablity
I created a responsive web layout optimized for various devices, including desktops, tablets, and mobile phones. This involved using a structured grid system to improve user experience and maintain consistent performance across platforms.
Shortly after the high-fidelity design was completed I was assigned to another task within the company and I didn’t get a chance to conduct usability testing and get user feedback. If there was more time, I would come up with 4 tasks and ask the participants that I recruited to complete the tasks while navigating the website. The 4 tasks would be:
• Do a cognitive walkthrough of the home page and products page.
• Place an order using your credit card.
• Come back as a returning customer, choose and purchase a different product.
• Find and learn more about an ingredient in your new product on the website.
I collaborated closely with the engineering team to ensure proper integration of the CMS while also balancing the expectations of the marketing and sales teams. This required re-designing some page elements to simplify the development process and align the CMS functionality with the site's goals.
