Website Redesign
Role: UX Researcher and Designer
Duration: 5 Weeks
Project Status: In Development
Challenges
We focused on solving key issues across four areas:
-
Brand Storytelling: Strengthening the narrative to reflect the mission and connect with users
-
User Experience: Improving navigation, accessibility, and checkout flow
-
Community Building: Adding testimonials and user content to build trust
-
Streamlined Shopping: Making the purchase process faster and more intuitive
Project Overview
Medalist Skin is a clean skincare brand for next-gen female athletes, founded by Olympians. The project aimed to transform the brand’s website into an engaging, accessible, and conversion-friendly platform. We identified usability issues, a lack of compelling storytelling, and accessibility barriers as key pain points. Through user research, heuristic evaluations, and iterative design, we crafted a cleaner, more cohesive user experience that reflects the brand’s mission and values.
.png)
Framework:
We followed the Double Diamond framework, starting with research to uncover user needs, then moving into ideation, prototyping, and testing to refine a design that’s both user-focused and business-ready.
We began with user interviews, surveys, and a heuristic evaluation to understand the current site’s pain points. Key findings included unclear brand messaging, accessibility gaps, and a confusing checkout process.
Problem Space:
Simplifying navigation, adding community-driven elements, and optimizing accessibility would enhance user engagement and boost conversion rates.
How might we create a more seamless and inclusive shopping experience while highlighting Medalist Skin’s unique value?
Discover & Define:
Goal of Research
To understand how users navigate the Medalist Skin website, identify usability and accessibility issues, and uncover ways to improve storytelling, engagement, and the shopping experience.
Competitive & Comparator Analysis
To understand Medalist Skin’s market position and improvement areas, we analyzed skincare and adjacent brands.
We analyzed competitor websites to compare features and user flows, helping us align Medalist Skin with modern eCommerce standards and user expectations.
User Interviews & Usability Testing
We analyzed competitor websites to compare features and user flows, helping us align Medalist Skin with modern eCommerce standards and user expectations.
We interviewed five users to understand their skincare shopping habits, needs, and frustrations. We also ran a first round of usability testing on the current site.
Persona
Ashley is a young, active athlete juggling school, workouts, and social life. She needs gentle, hydrating skincare that’s portable, easy to use, and fits her fast-paced routine. Her main challenges are sweat-induced irritation and finding products she can trust to work with her busy lifestyle. Ashley reflects Medalist Skin’s core audience: Gen Z and Millennial athletes at both recreational and professional levels. Her persona helped guide design decisions by keeping the team focused on real user needs.
Journey Map
Creating a journey map for Ashley gave us a clear view of her daily routine, challenges, and emotions. It helped us identify key moments where Medalist Skin can fit naturally into her active lifestyle, addressing her needs and pain points with the right products at the right time.
🧩Revised Problem Statement
Ashley wants to care for her skin proactively, but her intense workout schedule leads to irritation from sweat and chafing. She hasn’t found quick, reliable skincare she can use throughout the day to cleanse and hydrate on the go.
Research Takeaways
Based on all the research and first round of usability testing findings, several key pain points were identified, leading to strategic design adjustments aimed at improving the user experience, engagement, and conversion rates.
Key Issues Discovered:
-
Lack of Ingredient Transparency: 47.4% of users prioritized ingredients but struggled to find clear information.
-
Unclear Product Usage: Users didn’t know how or when to use certain products within their skincare routine.
-
Difficult Product Discovery: Poor navigation made it hard to browse or find relevant products.
-
No Purchase Incentives: The absence of subscription options or promotions reduced buying motivation.
-
Cumbersome Checkout: Users wanted a quicker, simpler path to purchase.
-
Missing Social Proof: There was no visible user content, testimonials, or athlete engagement to build trust.
Design & Delivery
Sketching & Rapid Concept Development
Goal is to quickly visualize the structure and layout of the website by sketching out key pages.
What was done:
-
Wireframed essential screens like the homepage, product pages, and checkout flow.
-
Focused on content placement, navigation, and user flow without getting caught up in visual details.
-
Iterated multiple layouts to explore different ways to simplify navigation and improve product discovery.
Mid-Fidelity Screens
Translating sketches into digital wireframes with more defined layouts and functionality.
Key Updates:
-
Refined navigation based on low-fidelity testing feedback.
-
Improved product discovery sections, including filters and recommendations.
-
Enhanced checkout flow to ensure a seamless shopping experience.
High-Fidelity Prototype: Bringing the Design to Life
Transform static wireframes into an interactive experience that simulates the real user flow.
What was done:
-
Designed polished UI elements, incorporating brand colors, typography, and visuals.
-
Built a clickable prototype to mimic real interactions, including navigation, add-to-cart functionality, and checkout flow.
-
Ensured responsiveness across devices, optimizing for desktop and mobile users.
Usability Testing
Usability testing was a key part of the design process, allowing us to measure how real users interacted with the website, identify pain points, and improve the overall experience. We conducted three rounds of usability testing on the current site, the mid-fidelity wireframe, and the high-fidelity prototype to track progress and ensure that each iteration made the site faster, clearer, and easier to use.
Existing Site
What we tested: Simulated a product purchase and explored the founder’s story.
Results: Near-perfect success rate. A solid starting point.
Mid-Fidelity Wireframe
What we tested: Compared task completion time to the original site.
Results: Users finished tasks 30 to 50 seconds faster, showing improved navigation.
High-Fidelity Prototype
What we tested: Final refinements and overall task flow.
Results: Task time dropped by 38 seconds to nearly 1 minute and 50 seconds. A major win in clarity and efficiency.
Each round of usability testing helped refine the design and ensure the final site was not only visually engaging but also intuitive, efficient, and easy to navigate. By tracking measurable improvements, we confidently delivered a faster, smoother experience that enhances how users interact with Medalist Skin.
Final Thoughts
The Medalist Skin redesign was more than just improving the website, it was about understanding users, solving real problems, and creating a more seamless, inclusive, and engaging shopping experience.
By using data-driven insights, iterative design, and usability testing, we transformed Medalist Skin into a high-performing, user-centered eCommerce platform that better reflects its athlete-driven mission.
Looking ahead, the next steps include tracking post-launch metrics and refining the experience further based on real-time user feedback!