Background
A clothing brand based in Tehran that focuses on unity and minimalism, they sell style instead of individual fashion items.
Objective
The goal of designing this project was to create an avant-garde mobile website with a unique UX pattern, and minimal user interface to motivate people to buy the whole style instead of a separate items, and also users would be able to receive fashion advice from the designers
My Role
During the three months working on this project, I was in charge of conducting usability tests, wireframing, user flow, user journey, information architecture, site map, low-fidelity prototype, and high-fidelity prototype
Research
I performed research to find out the pain points that shopping website users mostly experience. At first, I completed a competitive audit review by close observation of our direct and indirect competitors, and then, I conducted a UX interview with four participants as potential users to understand their behavior toward online clothing shopping. Three main pain points coming out of the interview and research are indicated below:
One
Pain Points
People were frustrated since they expected to see a summary of their receipt before the final purchase
Two
People need to get advice during their purchases. Since they aim to be more stylish
Three
People generally are not aware of their exact sizes are, they need some functional measuring method or assistance
Information Architecture
Site Map
A site map is a visual representation of the content of the product and I created it to be user-friendly anf=d usable based on my finding during the research phase
.png)
Task Flow
Based on my research insights and persona, I began to categorize and structure the information based on what was most useful, usable, and user-friendly
.png)
Wireframing
After the ideation phase on paper for rapid brainstorming, I turned my paper sketches into a "low-fidelity" wireframe and then low-fi prototype to test the very first function of the site.
.png)
Prototyping
Low-Fidelity
After the confirmation of wireframes it is time to add interaction to make an interactive lo-fi prototype to be tested by participants
UI Kit
A UI Kit is a collection of interconnected patterns and shared practices coherently organized to make the design and development process more comprehensive
.png)
Mockups
Here are a collection of some main designed pages of the final website. (note: website is under construction currently)
Final Design
Here is a video of full function of the website.
