A nutrition supplement website redesign

Role: UX researcher, end-to-end UX designer

Timeline: two weeks

Process: goal determination, user research, secondary research, affinity mapping, POVs & HMWs, persona creation, site map, task flows, style guide, wireframing, UI kit creation, prototyping, desirability testing, result mapping

Target Demographic: men ages 23-43 who exercise and regularly use nutritional supplements in their workout routines

Tools: Figma

• Create a strong hero section that passes all accessibility testing and immediately draws in potential users with a recognizable CTA 

• Design wireframes that meet stakeholder needs, giving them less of what they don't want while providing for the user's needs

• Make a responsive design that can be used on mobile devices while primarily being used on desktop devices

• Client prefers using a template for ease of future editing and adjustments

• Lack of budget

• no current SEO plan or usage

• Minimal ideas from the client other than what they do not want

• six men

• ages 19-28

• each of the interviewees exercises a minimum of four times per week

When it comes to researching and purchasing nutrition supplements and pre-workout products online, young men aged 19 to 28 have diverse approaches. Some initiate their journey with thorough online research, scouring articles, reviews, and forums for insights. Others are influenced by social media, with platforms like Instagram and YouTube introducing them to products through fitness influencers. Once they've narrowed down their options, they visit brand websites to explore product details, user reviews, and testimonials. Price comparison tools help them find the best deals, while trial packs or samples offer a low-risk entry point. Fast and reliable shipping is a key consideration as they complete their purchase online.

• Social media, particularly Instagram and YouTube, play a significant role in product discovery and influence the decision-making process of users

• Some users prefer to start with samples before committing to full-size purchases

• Many users will base their supplement choices on pricing

• Celsius

• C4

• Orgain

• Strengths include consistent branding, clear layouts, and engaging visuals

• Color schemes and the balance between branding and product focus can enhance alignment with target demographics

• Prominent CTAs will set Blue Clover apart from competitors

Both Miles and Henry are passionate about fitness and their workout routines. Supplements are important to both of them, but what they value from those supplements differs. Pricing is a factor for both, while science-based and sustainable products are not as important. Having products with excellent reviews backed by other athletes is also important to the personas.

• Miles is looking for supplements that are made with clean and natural ingredients. He values transparency in product labeling and avoids artificial additives.

• As an athlete, Miles is seeking workout supplements that can enhance performance, boost energy levels, and improve endurance during intense training sessions. He values products with proven ingredients that align with his fitness goals.

• Miles values knowing what supplements other athletes are using, why they are using them, and why they like them.

• How might we communicate the use of clean and natural ingredients in our supplements to align with Miles' preference for transparency?

• How might we tailor the product to athletes like Miles, providing clear information on how each supplement enhances athletic performance, boosts energy, and improves endurance during intense training?

• How might we develop an interactive platform or community forum where athletes like Miles can easily share their supplement preferences, usage, and insights with others?

The below task flow is one created for the Blue Clover High Energy website redesign. This flow follows how a user would interact with the website redesign and navigate from the homepage through the shopping experience, ending with adding an item to their cart prior to checkout.

• Due to the lack of budget and time constraints, Blue Clover stakeholders were only interested in seeing minimal wireframes 

•  Using my design skills, I was able to provide them with more wireframes than they were expecting which allowed for greater communication and understanding of their vision

In creating the wireframes seen below, I started with something extremely basic. Because I had not been provided assets or copy as I initially began to design the wireframes, I used lorem ipsum copy text and empty images as filler.

After presenting to stakeholders, they were able to immediately provide the feedback that they were looking for a darker design, something where the background would blend into black. With this feedback, I was able to change the wireframes as requested while keeping the user in mind - I was constantly referring back to Miles and the requirements he needs met when purchasing from a company like Blue Clover. However, I also let the stakeholders know that with dark or nearly black backgrounds, it's critical to provide eye-catching images, animations if desired, and an overall design while focusing less on text. Together we got to work - me iterating on the designs and them providing assets crucial for a successful design.

Creating a working model of the design was a critical step in ensuring that the final product would meet the needs of both the client and the target demographic. My prototyping process aimed to test the functionality, usability, and overall effectiveness of the design, thus aligning the project with its goals.

Prototyping was an iterative process. I produced multiple versions of the design to test various scenarios and user interactions. Feedback from our user testing sessions significantly influenced the refinement of the design.

Through rigorous testing, we sought to validate our design decisions, improve usability, and enhance overall user experience. Testing, in this context, was not only a design phase but also a bridge between user expectations and the project's goals. It transformed abstract concepts into tangible, testable interactions, helping bridge the gap between the client's vision and the needs of their customers. The end result was a website that not only met the client's requirements but also exceeded user expectations, aligning the platform's capabilities with the diverse approaches of their audience in the nutrition supplement space.

The success of the Blue Clover High Energy project was a collaborative effort. The client's insights, UX expertise, and user feedback merged seamlessly. Collaboration with users, developers, and stakeholders ensured that we delivered a design that exceeded expectations. It reaffirmed the power of effective communication and teamwork in achieving project goals.

The Blue Clover High Energy website redesign project showcases the transformative potential of UX design. By adhering to a user-centric approach, embracing iteration, ensuring clarity in design, and fostering collaboration, we delivered a final product that meets user needs and aligns with the project's objectives. This project is a testament to the impact of human-centered design and the ability to craft digital experiences that truly resonate with their audience.

Moving forward, these takeaways will continue to inform and inspire my approach to UX design, underlining the importance of listening to users, evolving our designs, ensuring clarity, and nurturing collaboration as we embark on new and exciting projects.