Reimagining a Community Space for a Sustainable Activewear E-Commerce Website
Reimagining a Community Space for a Sustainable Activewear E-Commerce Website
Reimagining a Community Space for a Sustainable Activewear E-Commerce Website
A UX/UI Project with Studio Nidra
Role
UX/UI Designer
UX/UI Designer
UX/UI Designer
Industry
Fashion
Fashion
Fashion
Duration
9 days
9 days
9 days
I teamed up with two other UX designers, Daniela and Jess, for one of our Ironhack bootcamp projects that involved external clients. Our mission was to help a local e-commerce shop enhance its online presence to boost visibility both online and offline. Our goal was to develop a high-fidelity design and branding strategy for the business in just nine days.
I teamed up with two other UX designers, Daniela and Jess, for one of our Ironhack bootcamp projects that involved external clients. Our mission was to help a local e-commerce shop enhance its online presence to boost visibility both online and offline. Our goal was to develop a high-fidelity design and branding strategy for the business in just nine days.
About Studio Nidra
About Studio Nidra
Studio Nidra, a sustainable activewear shop founded by Nicolas Witt, is an all-gender activewear brand that upholds principles from Yoga Philosophy in all aspects of its operations. They prioritize non-harmfulness, non-greed, and transparency in their clothing production process.
Studio Nidra, a sustainable activewear shop founded by Nicolas Witt, is an all-gender activewear brand that upholds principles from Yoga Philosophy in all aspects of its operations. They prioritize non-harmfulness, non-greed, and transparency in their clothing production process.
Context
Context
Challenge
Nicolas highlighted two key areas: retaining recurring customers and fostering customer interactions. We decided to focus on building a community within the website.
Competitor analysis
We began with a competitor analysis, using perceptual mapping and feature comparison. We observed that well-known activewear brands tend to lean towards unsustainable practices but have strong built-in communities, while sustainable brands focus more on communications but have fewer community features.
Here we see a unique opportunity for Studio Nidra to represent both the sustainable benefits as well as build a community that supports sustainable practices.
User interviews
We conducted user interviews to determine the benefits of a community for e-commerce.
“It’s important to see that the brand is interested in creating a community; that makes me respect the brand.” — Quote from user interviews
Users valued transparency, a sense of belonging, and loyalty in a community. This feedback informed our project direction.
Problem statement
Our problem statement was twofold:
User Problem: Consumers of yoga active wear with a sustainable vision need to find a way to to be part of a community that reflects the values of yoga because many brands are not connected to their vision.
Business Problem: Studio Nidra was designed to achieve a sustainable all-gender activewear brand that upholds principles originating in Yoga Philosophy in all aspects of its operations. We have observed that Studio Nidra has a potential to also create a yoga community that can allow young conscious yogis to grow and learn about sustainability which in turn can create a loyal retaining customer base for the business.
Challenge
Nicolas highlighted two key areas: retaining recurring customers and fostering customer interactions. We decided to focus on building a community within the website.
Competitor analysis
We began with a competitor analysis, using perceptual mapping and feature comparison. We observed that well-known activewear brands tend to lean towards unsustainable practices but have strong built-in communities, while sustainable brands focus more on communications but have fewer community features.
Here we see a unique opportunity for Studio Nidra to represent both the sustainable benefits as well as build a community that supports sustainable practices.
User interviews
We conducted user interviews to determine the benefits of a community for e-commerce.
“It’s important to see that the brand is interested in creating a community; that makes me respect the brand.” — Quote from user interviews
Users valued transparency, a sense of belonging, and loyalty in a community. This feedback informed our project direction.
Problem statement
Our problem statement was twofold:
User Problem: Consumers of yoga active wear with a sustainable vision need to find a way to to be part of a community that reflects the values of yoga because many brands are not connected to their vision.
Business Problem: Studio Nidra was designed to achieve a sustainable all-gender activewear brand that upholds principles originating in Yoga Philosophy in all aspects of its operations. We have observed that Studio Nidra has a potential to also create a yoga community that can allow young conscious yogis to grow and learn about sustainability which in turn can create a loyal retaining customer base for the business.
Design process
Design process
User persona & user flow
We created our user persona, Sofie, a conscious yogi who seeks a sustainable, supportive eco-friendly activewear and yoga community.
Sofie’s journey revealed a significant dip during the research and decision phase due to a lack of reviews or feedback from fellow customers. This phase was crucial for adding features to boost her confidence.
Ideation phase
Using the Crazy 8s method, we brainstormed solutions for the problem statements.
We decided to create a community page to centralize content that benefits users and encourages engagement. We performed card sorting to organize our ideas and created a user flow illustrating how users would navigate the website.
Prototyping
For our low-fi designs, we started with pen and paper, then finalized the designs on Figma. We aimed to create a calm yet active presence right from the start. We proposed featuring a video banner on the homepage to give a vibrant, dynamic flow. Additionally, to enhance transparency and user experience, we wanted to ensure easy navigation on the About Us page by incorporating anchor links, allowing users to seamlessly explore different sections of the page. We also included a review section on the product page to validate purchase decisions, providing users with the confidence and transparency they value.
User persona & user flow
We created our user persona, Sofie, a conscious yogi who seeks a sustainable, supportive eco-friendly activewear and yoga community.
Sofie’s journey revealed a significant dip during the research and decision phase due to a lack of reviews or feedback from fellow customers. This phase was crucial for adding features to boost her confidence.
Ideation phase
Using the Crazy 8s method, we brainstormed solutions for the problem statements.
We decided to create a community page to centralize content that benefits users and encourages engagement. We performed card sorting to organize our ideas and created a user flow illustrating how users would navigate the website.
Prototyping
For our low-fi designs, we started with pen and paper, then finalized the designs on Figma. We aimed to create a calm yet active presence right from the start. We proposed featuring a video banner on the homepage to give a vibrant, dynamic flow. Additionally, to enhance transparency and user experience, we wanted to ensure easy navigation on the About Us page by incorporating anchor links, allowing users to seamlessly explore different sections of the page. We also included a review section on the product page to validate purchase decisions, providing users with the confidence and transparency they value.
Validation
Validation
Feedback & iterations
We received feedback from our user testing sessions that primarily focused on our product and community pages mid-fi designs:
Branding was already on point: Even though nothing visual was placed in the mid-fi design, we were already told that the messaging was on point. (Kudos of course to Studio Nidra for their existing powerful messaging!)
Account and support buttons weren’t necessary: We removed the buttons as they were confusing everyone.
Ratings and reviews should be more visible: As we wanted more transparency, we added a “leave a review” interaction and showed ratings at the top of the product.
The community page is a bit confusing: We split the community page into three pages instead and updated some of the community context as well as made the call-to-action button clearer with a dedicated subheading.
We also revised our sitemap, removing unnecessary pages and adding blog and journal pages.
Style Tile
Although Studio Nidra already had strong branding, we created a mood board reflecting values like ecological responsibility, cleanliness, minimalism, warmth, modernity, and calmness. Our style tile focused on earthy green shades and lotus flower icons representing yoga principles.
Feedback & iterations
We received feedback from our user testing sessions that primarily focused on our product and community pages mid-fi designs:
Branding was already on point: Even though nothing visual was placed in the mid-fi design, we were already told that the messaging was on point. (Kudos of course to Studio Nidra for their existing powerful messaging!)
Account and support buttons weren’t necessary: We removed the buttons as they were confusing everyone.
Ratings and reviews should be more visible: As we wanted more transparency, we added a “leave a review” interaction and showed ratings at the top of the product.
The community page is a bit confusing: We split the community page into three pages instead and updated some of the community context as well as made the call-to-action button clearer with a dedicated subheading.
We also revised our sitemap, removing unnecessary pages and adding blog and journal pages.
Style Tile
Although Studio Nidra already had strong branding, we created a mood board reflecting values like ecological responsibility, cleanliness, minimalism, warmth, modernity, and calmness. Our style tile focused on earthy green shades and lotus flower icons representing yoga principles.
Result
Result
Final design
Armed with our style tile and prototypes, we created our high-fi design. Here you can explore the design prototype directly on Figma and see it in action on the video:
Key learnings & next steps
We concluded our group project with two key points:
Since we had a tight timeline, it was very important to create a schedule and game plan from the start. From the beginning, we listed out what we wanted to do and when they should be done, keeping ourselves accountable for our progress. Of course, we should also be flexible in case we realise we need a break. For example, we revisited some ideas later on, even though we said that we would finish it on the first day. And that’s okay.
As already mentioned in the first point, time is tight. So we adhered to the 80/20 rule: 20 percent of efforts produce 80 percent of the results. We should prioritise what was important so that we could deliver our project without burnout.
This project was an enjoyable and valuable experience, especially seeing the high-fi design come to life and interacting with it in real-time. We firmly believe that a collaborative sustainable community can be built within Studio Nidra with the solutions we suggested.
Final design
Armed with our style tile and prototypes, we created our high-fi design. Here you can explore the design prototype directly on Figma and see it in action on the video:
Key learnings & next steps
We concluded our group project with two key points:
Since we had a tight timeline, it was very important to create a schedule and game plan from the start. From the beginning, we listed out what we wanted to do and when they should be done, keeping ourselves accountable for our progress. Of course, we should also be flexible in case we realise we need a break. For example, we revisited some ideas later on, even though we said that we would finish it on the first day. And that’s okay.
As already mentioned in the first point, time is tight. So we adhered to the 80/20 rule: 20 percent of efforts produce 80 percent of the results. We should prioritise what was important so that we could deliver our project without burnout.
This project was an enjoyable and valuable experience, especially seeing the high-fi design come to life and interacting with it in real-time. We firmly believe that a collaborative sustainable community can be built within Studio Nidra with the solutions we suggested.
Quenching Thirst, Reducing Waste: Crafting a Mobile App with Wonderfill (formerly Fountain Impact)
A UX/UI Project on Bridging Hydration and Business with Smart Design
Redesigning Dropout with Nielson’s Principals for Uninterrupted Comedy Gold
Honing the Comedy Experience with Usability Heuristic Principles
Reimagining a Community Space for a Sustainable Activewear E-Commerce Website
A UX/UI Project with Studio Nidra