breaking society barriers
Overview
Flannelfox. represents a clothing store with no barriers. Who says, you have to be defined by what society believes you should wear? Our goal is for users to see a unisex clothing collection and know they belong.
The brand strives to be raw, edgy but also welcoming. Everything could be for anyone, it's about fitting outside the box and going against the current. Unisex clothing is generally accepted in society, this design sprint is about helping my client build a brand that normalizes unisex clothing as it should be.
Problem
In many stores, clothing is limited to gender roles where one store only carries clothes that only women can wear or vice versa for men. Our goal is to create a way to solve this barrier for those who don’t quite fit into those margins.
We already know that online clothing stores exist and there are many ways to create a simple and intuitive process for an individual to browse through items, add them to their cart, and checkout. Our challenge is figuring out how we can get the user comfortable enough to purchase an item, and how to relay sizing information to both genders.
Solution
To solve the problem for this design sprint, we focused on creating a brand that concentrates on a unisex clothing collection and eliminating women and men sections. To relay sizing information, we included reviews from previous customers and also a scale from customers on how true to size an item is. In addition, we added a size drop-down with various sizes and a ONE-SIZE fits all feature.
Roles + Responsibilities
UX Design and Research, UI Design, Developer, Product Designer
I was able to collaborate with multiple colleagues on decisions, share my work with TAs receive feedback from not only my peers but research studies. In addition, I had a massive amount of help and guidance along the way from my instructor and mentor.
Scopes + Constraints
Business Requirements:
An intuitive flow of products and clothing to browse and shop for: Shipping, online orders, e-commerce shop.
Sizing information and reviews from other customers who have bought the item
Multiple offers and deals for not only first-time shoppers but everybody
Because it was a very collaborative design sprint, time zones were one constraint. In addition, we did not have a budget but the timing was also a major constraint. As a student, I did not want to fall behind and had to manage my time accordingly to stay on top of the sprint.
Users + Audience
In the beginning, our target audience was a bit tricky. The client knew what she wanted, she knew what kind of people her brand would attract but it overlapped.
My client and I came to consider individuals who believe in change, like unisex clothing styles, more on the edgier side, darker colors possibly even off-brand. Those who are not so trendy, people that are more like granola girls.
18-30+
A mix of women and men
Has trouble finding clothes when shopping
Seeks for a sense of belonging
Enjoys a variety of clothing styles
A glimpse of the outcome.
Stick around for the process…
The Design Sprint
To begin the sprint, we started some generative research like the Competitive analysis. Here we were able to gain insight on key features that were working well in the industry and also features that were not. One thing to note is that we did not conduct a user survey for this sprint. The data collected for the sprint comes from the competitive analysis and the interview with the client, however, if we were to go back and from what we have learned a short survey would have tremendously been valued in the process.
As mentioned above, starting with the competitive analysis really helped get our ideas flowing on what other brands were doing in the industry and what we wanted to implement into our own. The findings like Pacsun being one of the few that has a unisex clothing brand, drove our process to focus on sizing information. To relay sizing, again we implemented a size dropdown with various sizes and also a ONE-SIZE fits all feature to solve the challenge with sizing information.
By starting with a competitive analysis, we can also analyze what similar companies are doing that could potentially solve our problem. From there, we moved into creating empathy maps, journey maps, and proto-personas.
Visualizing our audience.
Through creating the empathy map and journey map, we were able to get a better understanding of who our target audience is going to be and what they may be thinking, feeling, or doing.
Information Architecture
For the user flow, we were able to gain insight into a potential path a user could take when shopping online at flannelfox. We created the user flow for the developer in later phases.
The Site Map
Since we are building a website for this sprint, creating a site map was valuable in establishing the hierarchy for the website to help again the developers.
HMW Brainstorming activity
Moving forward, the HMW brainstorming activity was useful in narrowing down what we could do to help the user and our potential target audience. After brainstorming, we compiled them into three categories and chose the top three.
An intuitive flow of products and clothing to browse and shop for.
Sizing information that relays information to users on products, possibly reviews.
Multiple offers and deals.
Sketches for Wireframes
-
Version 1: Wireframes
At the beginning of sketching, we had originally had buttons on the homepage for women’s and men’s attire. However, by doing that it did correlate with the solution we were trying to achieve so we ended up removing it entirely. Another thing to note is the hamburger menu. From similar companies, the hamburger menu seemed clean and modern. Although, because we are building a website we initially had the space for a straight navigation.
-
Version 2: Wireframes
Here you’ll see the final iteration of the wireframes. Compared to version 1, there is a bit more personality and creativity that went into these wireframes. In the beginning, it felt as if we needed to copy a certain mental model that was very similar to other clothing brands. The first version lacked ownership, it was very basic and the layout of any general clothing store. Version 2 is where we went off-brand, with the big lettering and abstract shapes for some of the images. The mental models are still present, just with a bit of a twist.
Time to test it with real target users.
Moving forward, we conducted a usability test with a total of 10 testers using a tool called Maze.
Tasks that were asked:
Browse through the homepage and find your way to the unisex clothing section.
Add an item to your cart.
Place your order and find your way back to the homepage.
The first task had a 27.7 % misclick rate, with a total of 5 testers who got lost. From the second task, there was a 36% misclick rate, and the last task ended with a 21.5% misclick rate.
After the usability testing, we were able to identify the areas that users got lost or confused. The homepage was an area that seemed to be confusing and had the highest rate of misclicks, with 2 testers who gave up. However, all testers completed the checkout process with no misclicks and a low avg. duration time.
Mood board
For the mood board, we curated a mix of images from Dribble, Pinterest, and Unsplash to match what the client had envisioned for the sprint. The visual design portion went rather fast but it was fun to dive into it!
After implementing colors, typography, and visual elements into creating a Hi-Fi prototype, we conducted a Preference test before moving forward.
Outcomes & Final Thoughts
From incorporating the Design Sprint into this project, we created an MVP for our client without spending money or losing time. My team and I plan to iterate on the feedback given and also discover more innovative ways to relay sizing information to users through more research and additional testing.
The Design sprint has taught our team how to leverage new concepts in society and bring them to the surface. In the beginning, we had no knowledge of what unisex meant, we were able to learn and discover challenges that humans face in their everyday lives concerning this topic. Moving forward, our team is happy to be here to help make a change in establishing unisex clothing in society through flannelfox.