Embedded Files
With closures and limited entry into clothing stores the past couple years due to Covid-19, many brick and mortar stores have needed to rapidly produce e-commerce sites to stay available to customers. With the transition to e-commerce come all the pains of online shopping, such as sizing issues and limited or lacking item descriptions. Another consideration, are the increasing demands of the consumer to know the sustainability, inclusion efforts, supply chain, and who made their items.
With my design of Farben, a boutique clothing website, I wanted to focus on gender inclusion, sizing options such as tailoring services, and highlighting the designers behind the clothing. These are all things that I and many others I know wish we could see more in an online retail experience. Fashion is a form of self-expression and identity, as such, we want our clothing to not only fit us, but to also represent our values.
Scope
Scope
Project Duration
September 2021-November 2021
My Role
UX/UI Designer and Researcher from conception to delivery
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Objectives
Objectives
Create a website with tailoring service
Highlight designers whose clothing are sold on the site
Be gender inclusive by not having men's and women's categories
User Research
User Research
Competitive Audit
Competitive Audit
With my three objectives in mind, I sought out popular and some local boutiques to review. I chose Aritzia because its is a global brand and thus should have the most compelling features. I also chose two local boutiques as they would be most similar to Farben in terms of scale and what features were possible for a small business.
After completing this audit, I complied a report to analyze my findings.
Competitor Gaps:
No gender fluid/non-binary category
No tailoring service
No country of origin and who made product
No filter for black, women, or indigenous makers
No environmental impact info
Opportunities:
Make a category for genderless clothing items
Be able to filter brands based on the owner description
Give environmental impact rating
Provide more details on origin and factory
Offer tailoring service in addition to size charts
Customer Base
Customer Base
Personas
Personas
Problem statement:
Ann is a working mom of two teenagers who needs to find sizing and tailoring options for clothing because she has a hard time finding trendy clothing that fits her body.
Problem statement:
Jay is a non-binary music producer who needs an easier way to find designers from their cultural background because they want to support people from their own historically underserved communities.
Design
Design
Information Architecture
Information Architecture
Before I started a wireframe, I wanted to build the information architecture to make sure I didn't forget anything in the design. I wanted to keep the design as simple as possible with limited yet effective functions. I knew I tended to try to include as many features as possible at the beginning, and then once I start designing, I narrow down what is really important.
Wireframes
Wireframes
I begin the design with some paper wireframes, and after deciding on a layout, created a digital wireframe in Adobe XD.
Low-Fidelity Prototype
Low-Fidelity Prototype
After a quick review of the IA in the wireframe I filled it out the connections in Adobe XD to create a functional prototype.
Low-Fidelity User Testing
Low-Fidelity User Testing
Before committing to this design and creating a high-fidelity prototype, I wanted to do some quick user testing. I knew my design needed some changes but I wanted to see what others thought the priority was before I started changing everything.
I interviewed 5 participants, all in my demographic of 21-65. It was an unmoderated study conducted remotely within the US.
My users consisted of two males, two females, and one non-binary person. I set forth a few navigation tasks for them to complete, and then asked for their general thoughts on layout and possible features. I had them voice record their process, and then compiled responses into an affinity map below.
Affinity Map
Affinity Map
While there were a number of different suggestions from the testers, I focused on the top three that were most in common.
Users felt the item page was too empty and would prefer suggestions for other like items.
Users were overwhelmed by the designers page and wanted less writing and featured designers per page.
Users were overwhelmed by the filters and felt they took up too much of the page.
Redesign
Redesign
Updates
Updates
First, I went ahead and restructured the app design to take care of the three design changes my users wanted from the user testing session.
I started with the item page and added item details such as material, country of origin, etc. I also added links to more by the designer so that users could find similar items.
For the designers page, I more than halved the amount of featured designers per page and removed a couple lines of descriptor text. The idea would be to have a page for each designer to go more into their story and their designs instead of trying to fit it all on the designer page.
Finally for the filters, I set them to be expandable instead of having all the filter options show at once. This still allows for all the filter options if the user wants to utilize them, but doesn't steal focus from the clothing items displayed on the page.
High-Fidelity Prototype
High-Fidelity Prototype
Final Thoughts
Final Thoughts
I am really interested in fashion and have encountered many frustrations when trying to shop online including sizing issues, lack of sustainability statistics, missing material information, gender constructs, etc. I had a clear vision for the things I wanted in a site, but I also knew I was asking for quite a bit of features that could easily overwhelm the user. I had to put a lot of effort into balancing the features and resources I wanted while maintaining a simple, minimalistic design. With designing from a website down to phone it was even more imperative that my design be minimal and easily scalable.
If I were able to create this website, then I would want to do another round of testing with users, do another high-fidelity rendition with a different campaign, summer dresses, with a new color scheme for example, and built out the designer pages as well as the search page function. I had a lot of fun making this project as I feel like it helps answer some of the clothing shopping issues I have seen others encounter often.
Page updated
Google Sites
Report abuse