Atelier
Project Overview
Summary
I built a custom website for a new e-commerce business that is aiming to bring sustainable goods to developed countries. The goal is to provide enough information without overwhelming the user during their time on the website, and encouraging them to make a purchase.
Problem
There is an increase in “fast fashion", and cheap products being made which is causing an increase in pollution, and unethical working conditions for the people making the products.
Solution
The solution is to develop an e-commerce website that connects consumers in the developed world to artisans and designers in developing countries. The website will:
1) Have a transparent website that provides consumers a clear and efficient way to purchase sustainable goods.
2) Provide a map to show what countries consumers can buy products in.
Timeline
February 10th - March 3rd 2022
Roles
UX Researcher - User Surveys, User Interviews, and SWOT analysis
UX/UI Designer - Wireframes and prototyping
Brand Strategist - Brand development, logo and typography
Audience
The primary demographic is single women between the ages of 26 and 42 years old. They are college educated and earn between $30k - $90k a year.
Tools
Figma
Adobe Color Wheel
WebAIM
Google Suite
Zoom
Notion
Discovery & Research
Pain Points
The users pain points are bad filtering systems and the inability of seeing where products are made, and what materials were used in making the products.
Consumers want to see more transparency from companies. They desire better products, but the lack of information and the overuse of buzz words makes it increasingly more difficult for consumers to discern what is the better place to shop overall.
Competitive Analysis
I conducted four SWOT Analysis on different competitors in the same market. Through this I discovered that Amazon has a better checkout flow and suggestion page.
The Little Market and Ten Thousand Villages had a better filtering system, and more transparency.
Etsy’s footer was the best of all four websites that provided consumers the best website architecture.
Informational Interviews
3 virtual interviews with women.
Between the ages of 20 - 60 years old.
I learned about their shopping habits, and pet peeves when it comes to online shopping.
I gained insight into their motives for purchasing products, and what would make them more willing to buy goods from Atelier.
User Survey
75 respondents
66% female
Between 26 - 42 years old
81% Caucasian/White
College educated
81% of respondents are interested in purchasing products that are sustainable and benefit the designers who make them.
Additionally, about 75% care about how the products they purchase are made.
Persona
Olivia is a 25 year old Supply Planner for an e-commerce dog store. She loves to travel and shop second hand, so she does not create more waste. She values learning about new cultures and gaining new experiences.
She desires to purchase sustainable products that benefit the environment, society and economy of where she is purchasing the products.
User Stories
“ I want to know where the products I buy are made, and how the employees who make them are treated.” - Olivia
“I want to see what countries Atelier is partnered with.” - Olivia
Develop
Branding
I wanted Atelier to have a fashion-forward and minimalistic feel. It was important to create a similar vibe to other websites that evoke a sense of "high fashion" for the user.
When it comes to color, I want the colors to be inviting but neutral, so they do not detract from the products on the website.
I discovered my color palette from this image and, through user testing, found that some of the colors needed to be changed for better visibility. You can see the slight adjustments in color in the example below.
Logo Development
During the logo development process, I searched for inspiration and design ideas by looking at other websites, and used Figma for designing. At one point, I showed my design of the globe to a colleague, who loved it. Building on that feedback, I modified the font and size, conducted some testing, and ultimately created my third and final logo in the bottom right corner, which was well-received by all of my users.
Typography
When selecting fonts for my project, I researched modern font choices commonly used on fashion websites. I discovered that the typical pairing is a serif font with a sans-serif font. After conducting research and testing, I decided on using Crimson Text and Poppins as my font choices.
User Flows
I began my design process by creating a user flow to see how Olivia would navigate the website. My user flows displayed what screens I would need to create.
Sketches
After finishing my user flows, and discovering what screens I would need, I sketched different pages of my website. The above images are of the home page and product page.
Wireframes
From my sketches I created Low -Fidelity wireframes like the first image on the right. I tested their flow on multiple users to ensure it made sense.
From this step I created the High Fidelity wireframes, like the second image on the left, and ran these screens through user testing to test the UI as well as the flow.
I received a lot of positive feedback with minor adjustments needing to made to the flow due to prototyping errors.
High - Fidelity Prototype
The video above goes through the user flow of Olivia making a purchase.
Deliver
Usability Tests
The filtering and check out flow were the most important aspects for the Atelier site. I wanted the flow to be similar to other filtering and checkout processes that users would be accustomed to navigating. Through testing, I found that I had achieved this.
“I feel like I am really shopping.” - User Five
“Everything that happened during the flow is what I expected to happen.” - User Three
“It goes with my mental model for online shopping.” -User One
Final Thoughts
Successes
The Atelier website is the beginning of a new way to shop in a world of fast fashion. The users have transparency when they shop with a minimal number of clicks. They can see where the products are coming from without having to navigate through pages of information like on other websites.
Opportunities
As Atelier grows, I will develop my skills further in designing ways for consumers to navigate through large amounts of products.
I will grow my UI skills through continued branding of the website.