Revamp and enhance Fabletics' online platform to effectively showcase their new sustainability, fostering a stronger connection with environmentally conscious consumers.


Duration

August 2023 - December 2023


Role

Project Manager


Team

Jenny Weng, Michelle Gantos, Olivia Liu, Seeun Ahn, Zachary Khouri
Project Mentors: Logan Karam, Ryan Darling


Team

User Research
Design Systems
Usability Testing
Interactive Design
Prototyping

Tools

Figma
Figjam
Miro
Notion
Google Docs
Pen & Paper


Project Overview
‍

Fabletics is a global, active lifestyle brand that sells men and women’s activewear ranging from sportswear, footwear and accessories. Their mission is to create fashionable, high-preformance products that are sustainable at accessible prices. 

As the lead on a product design project for Fabletics, I guided the enhancement of their digital platform to better communicate the brand’s sustainability initiatives. Through user research, competitive analysis, and website audits, we identified opportunities to clearly highlight Fabletics' eco-conscious efforts. The resulting strategy involved redesigning the website with compelling content and user-friendly design, significantly improving how sustainability was portrayed and connecting more deeply with environmentally conscious consumers.

The Challenge

Fabletics faced a critical challenge in its digital presence: the brand's dedication to sustainability and eco-conscious fashion was not effectively communicated on their website. Their recent efforts in transitioning towards using sustainable materials and reducing carbon emissions, were underrepresented, leading to a gap in consumer perception and brand identity. The primary challenge lay in revamping Fabletics' online platform to not only highlight their existing sustainable practices but also to clearly articulate their future goals in sustainability. This task demanded a strategic overhaul to ensure that the brand’s mission resonated with and engaged environmentally conscious consumers, reinforcing Fabletics as a leader in sustainable fashion within the activewear market.

"How might we re-design Fabletics' website to effectively showcase their current and future sustainability practices, enhancing user understanding and engagement?"

User Research

Our Research goals encompassed on how we could alleviate the following pain points:

1. Usability and Navigation Challenge

The absence of clear indications regarding sustainable materials or products while shopping for Fabletics clothing limits shoppers' awareness and hinders their ability to make informed, environmentally conscious choices.

2. Absence of Visuals & Interaction

The absence of visually engaging images and interactive elements on Fabletics' sustainability page creates a disconnect with users and makes it challenging to capture their attention and effectively convey the brand's commitment to sustainability.

3. Absence of Sustainability Indicators

The absence of clear indications regarding sustainable materials or products while shopping for Fabletics clothing limits shoppers' awareness and hinders their ability to make informed, environmentally conscious choices.

4. Customer Behavior

Customers wouldn’t buy more just because it’s sustainable

Stakeholder Interviews

Our opportunity to gain more understanding about Fabletics sustainability practices and research through interviewing how we can better create a product that fulfills our client and users’ needs

We conducted stakeholder interviews with two groups: The sustainability interviews provided insights into the brand's eco-conscious practices, helping us accurately represent their commitment on the website. The web development interviews focused on understanding stakeholders' expectations, restrictions, and desired features for the online platform. By separating the interviews, we gathered a holistic view of Fabletics' sustainability efforts and website development needs, allowing us to align our redesign strategies accordingly.

Key Insights

1. Highlight strategic collaborations and partnerships, such as the recycled fabric initiative, to demonstrate Fabletics' proactive approach to sustainability.
‍
2. Engage customers in Fabletics' sustainability journey by showcasing the brand's eco-conscious practices in an exciting and relatable manner, ultimately enhancing brand perception.
‍
3. Comprehensively showcase Fabletics' multi-faceted commitment to sustainability across various areas of their business, emphasizing the connection between these efforts and the brand's core values.
‍
4. Enhance user engagement by incorporating dynamic motion interactions, captivating graphics, and informative videos throughout the website, creating a more active and immersive experience.
‍

Competitive Analysis

We strategically categorized our research into two distinct groups: major, established brands and niche, sustainability-focused companies. Our objective was to strike a balance—understanding how industry giants like Athleta showcase their information while gaining insights into the presentation strategies of smaller, eco-conscious brands.

We strategically categorized our research into two distinct groups: major, established brands and niche, sustainability-focused companies. Our objective was to strike a balance—understanding how industry giants like Athleta showcase their information while gaining insights into the presentation strategies of smaller, eco-conscious brands.

Auditing 

Part 1: First Impressions of the Website 

This first impression audit provided invaluable insights into the website's current strengths and weaknesses in conveying the brand's commitment to sustainability. It allowed us to identify key pain points and opportunities for improvement, forming the foundation for our subsequent redesign efforts.

Things we Noticed:

1. Repetitive wording, yet content needs more detail and transparency
2. Purpose of the photos they used is unclear
3. Needs an overview of the supply chain
4. Not very informative on the differences between their fabrics

Part 2: UX Audit Flow

This process involved a systematic evaluation of the site's information architecture, navigation, content hierarchy, and overall usability.We began by mapping out the existing user flow, and documenting the various paths users could take to access information about Fabletics' sustainable practices. This allowed us to identify any bottlenecks, redundancies, or inconsistencies in the user journey.

Goals:

1. Identify Pain points of user flows
2. Brainstorm solutions and ideas for potential growth
3. Find places of growth to enhance user engagement in retrospect to our How might we statement.

User Surveying

Lastly, we utlized user surveys to understand what users look for when shopping for a company. We wanted to see the focal points in sustainability for them and what opinions users held for the existing Fabletics’ page, if they had any

Audience

- General consumers
- Activewear shoppers
- Users focused on sustainability

Questions

- Fabletics brand image
- Consumer shopping habits
- Sustainability goals

Compiling all UX Research: Key Insights

Key Insights

1. Community-Centric Authencity: Communicate genuine external partnerships and collaborations, like recycled fabric initiatives, showcase real commitments to environmental and social responsibility
‍
2. Metrics-Driven Transparency: Enhance transparency with sustainability metrics. Provide filter options and statistical facts to empower informed consumer choices, building credibility and trust in a company's environmental commitment.
‍
3. Strategic Communication and Engagement: Present sustainability information for easy access. Enhance engagement with interactive graphics and videos.
‍

The Challenge

Low-Fidelity and Midfis

Goals:

1. Emphasize external partnerships and initiatives i.e. Fabletics x ThredUp
2. Connect sustainability to Fabletics’ brand while conveying an optimistic tone. 
3. Showcase commitment to sustainability in every area
4. Increase user engagement through interactions, graphics, and visual media.

Usability feedback on Midfis:

1. Enhance Interactive Elements Across All Pages: Incorporate and expand interactive features such as pop-ups, detailed informational icons, and quick preview options for products. This includes eco-friendly icons on the Product Page linking to sustainability pop-ups, and a more interactive supply chain exploration on the Sustainability Page.
‍
2. Visual and Navigational Improvements for Clarity and Engagement: Introduce visual aids like comparison circles, timelines, and graphics (e.g., pie charts for fabric breakdown) on the Sustainability Page, alongside a segmented navigation system to replace long scrolling pages, making it easier for users to digest information and engage with the content.
‍
3. Focus on Sustainability and Transparency: Showcase sustainability efforts through detailed comparisons with competitors, a timeline of practices evolution, and a breakdown of sustainable fabrics used. Optimize User Experience with Accessibility and Convenience in Mind: Increase text size for better readability and introduce features that allow for a seamless shopping experience

Usability testing

Objective

1. Understand if the interaction with our prototype impacts their perception of Fabeltics
2. Does it show our efforts in sustainability efforts
3. Are our interactions smooth and easy to use
4. What features inform them about Fabletics’ sustainability and which features are they drawn to
‍

Round 2 of iterations + Prototyping -> Usability Testing 2

Objective

1. How can we make our transitions for the sustainability page more intuitive that aligns with mobile interface
2. Websites are usually more statics
3. Swiping is more intuitive than clicking on buttons for mobile however, websites on mobile don’t usually have swipes unless it’s on an app
4. Supply chain tab has more complex interactions than other tabs → might feel inconsistent
5. Do we separate it, keep it grouped? simplify the supply chain?
‍

Final Deliverables (Static Version)

Interactive Version available (Please contact me for the interactive file!)