Designing a sustainable luxury fashion e-commerce website
UX/UI Design | Research | Wireframe | Prototype | User Testing
UX/UI Design | Research | Wireframe | Prototype | User Testing
|
The Beginning
Osha is a high-fashion brand dedicated to creating sustainable and ethically sourced clothing. Committed to environmental responsibility and community support, Osha provides high-quality apparel made from natural fibers while contributing to local initiatives like funding schools and supporting farms. |
|
The Challenge
Despite its strong mission and high-quality products, Osha faces challenges in converting browsing sessions into completed purchases on its e-commerce platform. To address these challenges, we conducted extensive usability testing with diverse participants to identify pain points and areas for improvement. |
|
Our goal was to enhance the user experience, streamline the checkout process, and ensure that Osha's values of sustainability and quality resonate with its customers.
This case study outlines the key findings from our research, the proposed solutions, and the impact of these changes on user engagement and conversion rates to thrive in the competitive e-commerce landscape. |
Phase 1 | Discovery
|
During the discovery phase of the Osha e-commerce project, a comprehensive research plan was developed to ensure a structured and effective approach to identifying user needs and market opportunities. This phase included:
Research Plan Outline the objectives, methods, participant characteristics, and schedule for our research activities. Competitive Analysis Conducting an in-depth examination of leading competitors in the sustainable fashion industry. Comparison Matrix Creating a detailed comparison matrix to evaluate key features, design elements, and user experience strategies across competitors. |
|
|
Competitive Research
Analyzing leading competitors in the sustainable fashion industry to identify best practices and areas for improvement. |
Comparison Matrix
Served as a structured framework for systematically evaluating and comparing key attributes, features, and characteristics of competing products or experiences. |
Virtual Moderated Usability Testing
Conducting sessions with users to observe their interactions with the Osha website, providing direct feedback on the design, layout, and functionality. |
|
The Objective
Identifying key factors that influence users' decisions when browsing and purchasing sustainable fashion items online. Understanding current expectations and pain points preventing users from completing the checkout process. Evaluating user perception and response to the proposed guest checkout option to address registration page abandonment. |
|
Competitive Analysis
The competitive analysis aimed to benchmark Osha's e-commerce platform against three industry leaders in the sustainable fashion industry to identify strengths and weaknesses in their checkout processes and derive actionable insights to enhance Osha's user experience. Our purpose was to understand best practices in the industry, identify common pain points and successful solutions in the checkout process, and inform design decisions for Osha's e-commerce platform. Our approach was narrowed down to the following:
|
Actionable Results
|
|
Comparison Matrix
A comparison matrix was used to evaluate key features, design elements, and user experience strategies across leading competitors in the sustainable fashion industry. This tool provided a structured way to compare different aspects of each competitor’s e-commerce platform, allowing for a thorough analysis of their strengths and weaknesses. The comparison matrix involved defining four key categories for comparison:
|
|
|
|
|
Detailed information on each competitor’s performance in these categories was gathered through direct testing and analysis. The strengths and weaknesses of each competitor were then assessed, with scores or qualitative assessments assigned to highlight differences and similarities.
Using a comparison matrix can provide a clear and organized way to compare multiple competitors across various dimensions. This structured analysis helped highlight successful strategies and features that could be adapted to improve Osha’s e-commerce platform. It also identified areas where competitors excelled or lacked, revealing opportunities for Osha to differentiate itself. |
|
Website Design
|
Phase 2 | Design
|
User Flows
User flows were created to map out the paths users take to complete key tasks on Osha’s e-commerce platform. These flows visually represent the steps and decisions users make, from entering the site to completing a purchase, and other critical interactions. The process involved identifying essential tasks such as browsing products, adding items to the cart, checking out, and signing up for a newsletter. Detailed diagrams were created to outline each step a user takes to accomplish these tasks, including decision points and potential obstacles. The purpose of creating user flows was to understand user behavior, improve the user experience, support design decisions, and optimize conversion rates. |
Branding Guidelines
|
A style guide was created to ensure consistent visual and interaction design across Osha’s e-commerce platform, serving as a comprehensive reference document detailing the brand’s visual elements, design principles, and usage guidelines.
The process involved defining core visual components such as color palettes, typography, icons, buttons, and imagery, and incorporating accessibility standards to ensure the platform is usable by all users, including those with disabilities. The purpose of creating a style guide was to maintain a uniform look and feel across all pages and elements of the platform, reinforcing the brand identity and creating a cohesive and predictable user experience. By implementing the style guide, we were able to have a consistent and high-quality user experience, streamline the design, and strengthen its brand identity. 
|
Osha Style Guide
Click image below to view
|
Low-Fidelity Prototype
A low-fidelity prototype was created to visualize and test the basic structure and functionality. This prototype served as an initial model to gather user feedback and identify areas for improvement before investing in high-fidelity design.
The focus was on functionality, ensuring the prototype included all critical interactive elements and user pathways without detailed visual design.
The process involved wireframing key screens to represent the layout and structure of essential pages such as the home page, product pages, and checkout process.
The prototype was then prepared for round 1 of moderated usability testing to observe user interactions and gather qualitative data.
The focus was on functionality, ensuring the prototype included all critical interactive elements and user pathways without detailed visual design.
The process involved wireframing key screens to represent the layout and structure of essential pages such as the home page, product pages, and checkout process.
The prototype was then prepared for round 1 of moderated usability testing to observe user interactions and gather qualitative data.
|
The purpose of creating a low-fidelity prototype was to validate design concepts, gather early feedback on the core structure and functionality, facilitate rapid iteration and refinement based on user testing insights, and prepare for usability testing by creating a functional model.
By developing and testing a low-fidelity prototype, we were able to create a user-centric design that set the stage for the first round of usability testing and initiated an iterative process for improvement. |
Phase 3 | Validate
|
Usability Testing
(Round 1) Remote moderated usability testing was conducted to validate the low-fidelity prototype of Osha’s e-commerce platform. This method involved observing real users as they interacted with the prototype and test the usability and effectiveness of the design.
Participants were recruited and realistic scenarios and tasks were designed for them to complete, such as browsing products, adding items to the cart, and proceeding through the checkout process. Live sessions were conducted using video conferencing tools while collecting feedback. The sessions were recorded to capture user behavior, verbal feedback, and any difficulties encountered, and this data was analyzed to identify patterns, pain points, and areas for improvement. |
|
|
Results
|
|
Action Items
|
|
|
Phase 4 | Design
|
High-Fidelity Prototype
A high-fidelity prototype was created to develop a detailed and realistic version of Osha’s e-commerce platform, incorporating refined design elements, interactive features, and comprehensive visual details to closely resemble the final product. This phase also served to validate design decisions made during the low-fidelity phase and ensure necessary adjustments were made before final development, incorporating changes based on the first round of testing to create a more user-centric design. This process involved integrating feedback from the low-fidelity prototype and usability testing, developing polished high-fidelity wireframes with enhanced visual elements, and adding interactive components like clickable buttons and dropdown menus to accurately simulate the user experience. Consistency across all design components was maintained by adhering to the style guide, and actionable insights from the first round of usability testing were applied to improve the user experience. |
|
Highlights
Detailed User Feedback Collected detailed feedback on visual and interactive elements, allowing for fine-tuning of the design. Improved Usability Identified and resolved any remaining usability issues, ensuring a seamless and intuitive user experience. Design Consistency Ensured that all visual and interactive elements were consistent with the brand’s style guide, reinforcing brand identity and trust. Incorporated Action Items Addressed specific action items from round 1 of usability testing. |
High-Fidelity Prototype
Updates
|
Browsing Page
|
|
Checkout Page
|
Phase 5 | Validate
|
Usability Testing
(Round 2) Round 2 of usability testing was conducted to validate the high-fidelity prototype of Osha’s e-commerce platform, focusing on detailed user feedback regarding the refined design and functionality.
This phase involved recruiting a diverse group of participants representing the target user profile and developing realistic test scenarios that mirrored the typical user journey, such as browsing products, applying filters, adding items to the cart, and completing the checkout process. Remote moderated sessions were conducted via video conferencing to observe participants interacting with the prototype, capturing real-time feedback and reactions. Each session was recorded to document user interactions and verbal feedback for thorough analysis. The testing aimed to validate design refinements made based on the first round of testing, ensuring they effectively addressed user pain points and enhanced the overall experience. It also sought to identify any new or persistent usability issues, gather detailed feedback on high-fidelity design elements and interactive features, and confirm that the design met user expectations for a seamless, intuitive shopping experience. |
|
Results
Positive Feedback on Refinements Users appreciated the design improvements made based on the first round of testing, particularly in areas such as discount code application, clearer navigation, and enhanced product details. Further Usability Enhancements Identified a few remaining areas for improvement, such as streamlining the checkout process even further and enhancing visual hierarchy on certain pages. Validation of Key Features Confirmed that features like express checkout options, comprehensive product reviews, and detailed product information significantly enhance user satisfaction. Detailed Actionable Insights Provided a clear set of final adjustments needed to perfect the user experience, ensuring a polished and user-friendly platform at launch. |
Phase 6 | Final Design
The final prototype for Osha’s e-commerce platform was designed to incorporate the insights and improvements identified during the second round of usability testing. This prototype represents the polished, ready-for-development version of the platform, integrating all refined visual elements, interactions, and user feedback. We also summarized all the key findings based on our user data that shows the overview of user feedback and preferences that is essential in the improvement of Osha’s e-commerce platform.
Initial Impression
90%
of users appreciated the layout and design of the website, describing it as nicely put, not cluttered, and visually appealing |
Search
100%
of users relied on filtering options (size, style, category) to find products, highlighting the need for comprehensive and user-friendly filter functionality |
Account Creation
60%
of users were frustrated with the need to create accounts during checkout and preferred a guest checkout option |
Overall Experience
90%
of users provided positive feedback on the overall site experience, noting it as user-friendly, well-organized, and visually appealing |
The Final Prototype
Additional Features50%of users suggested additional features such as quick view options, more products displayed at the top of the page, and enhanced filtering options |
Checkout Satisfaction100%of users were satisfied with the overall checkout process, describing it as smooth and straightforward |
Trust in Brand100%of users expressed trust in the brand for making purchases, though 50% wanted more third-party verification for the brand’s sustainability claims |
Reflections
|
User-Centric Design is Paramount
The usability testing sessions underscored the importance of designing with the user in mind. From initial interactions to the final checkout process, every element needs to be intuitive and aligned with user expectations.
|
Visual and Functional Consistency
Ensuring that all design elements adhere to a cohesive style guide was crucial. This consistency not only reinforced Osha's brand identity but also enhanced the overall user experience, making the platform visually appealing and easy to navigate.
|
All In The Details Of The Product
Users highly valued comprehensive product details, including high-quality images, videos, material information, and customer reviews. These elements significantly influenced their purchasing decisions and overall satisfaction with the platform.
|
|
|