Amy Jacobson
Fashion
E-Commerce Website
Amy Jacobson Online Clothing Store:
UX/UI Case Study
As a new brand hitting the online fashion sector, Amy Jacobson is looking to be the best e-commerce site amongst its many successful predecessors. With an online-only store, I set out to establish Amy Jacobson to stand out against competition and gain top market share by exceeding customer expectations and offering something new and innovative.
Project Brief:
The research goal for Amy Jacobson is to establish all of the desired features & necessities to excel amongst competition.
Target User:
Customers looking for fashion-forward, quality clothing for competitive pricing.
Challenge:
Design a responsive website and mobile app that encompass all that shoppers are looking for and more.
Design company logo that is modern, fresh, and captures the values and aesthetic of Amy Jacobson
Deliverables:
A Responsive Website and Mobile App
Empathy Map
Competitive Analysis
User Research and Interviews
Personas
User Flow
Sitemap
Usability Testing
Role:
UX/UI Designer: Branding, Research, & Visual; Wireframes, Low, Mid, & Hi-Fidelity Prototypes and above Deliverables
Stage 1: Empathy & Research
Through the use of Empathy Mapping, the user's pains and gains before, during, and after their interaction with the E-Commerce clothing site started to become apparent. This process helped me to see from Marissa's perspective on what a typical user's life might be like, and what their needs are so that the next steps in research could be conducted. This can be seen in the map to the right and the storyboard below.
Discovery
The storyboarding was able to give insight into the user’s journey through her search for a dress for a common event that many user’s encounter. Different emotions were expressed throughout the process, ultimately leaving her happy in the end because the site fulfilled her needs.
Preview of Primary and Secondary competitors.
Competitive Analysis Process and Thinking:
The study began with comparison of companies who have, and continue to be successful in the online fashion marketplace. Zara was one company that Amy Jacobson looked for inspiration as an overall business model, based off of affordability and type of clothing (user motivation). To see the analysis in further depth, Click HERE.
User Interview Findings Summary:
Using my own assumptions and personal use of e-commerce fashion clothing sites, I developed my initial interview questions for a sample group of women from various cities across the United States. Each had different backgrounds or life circumstances and gave me their insight into what they needed, expected, preferred, or really liked about sites that they frequent.
To see the interview questions, Click HERE.
Stage 2: Define
Company Centered Thinking: We need this online shopping site to be the best in order to gain top market share and increase sales.
User Centered Thinking: I need this online shopping site to save me time from going into stores, save me money on shipping, and provide me with the best quality & best fitting of current fashions available.
Customer Archetypes:
After conducting the user interviews and competitive analysis, the main users representations became apparent. By categorizing users into these archetypes, I was able to clearly identify specific habits, goals, and painpoints to understand what features the Amy Jacobson e-commerce site needed to consider. To view customer archetypes in detail, Click HERE.
User Personas:
After both qualitative and quantitative data had been collected from prior research and empathy, user personas were able to be developed and guide the site's design process. For a look at the additional personas, Click HERE.
Establishing Project Goals:
Product And Features
Using the above research findings, I was then able to move forward and develop a product features list for the Amy Jacobson e-commerce site. This was based off of user habits, goals, painpoints, and the competitive analysis. The preliminary Product and Features list can be seen HERE.
User Flow:
Demonstrates how the user would navigate a path to purchase a product. In this user flow, the user is given options along the way to their purchase- including paths to start over if a size or color is unavailable, as well as choosing to sign in as a guest, log-in, or sign-up.
Mobile View Wireframes V1
Stage 3: Design
Wireframes
After all of the above research had been conducted, it was time to begin wireframing. For visual aid, I added some quick images from Pexels and Unsplash to my Figma wireframes where I felt I already had a clear idea of direction. Others were left to be decided upon iteration and review. The wireframes gave the project the backbone needed to become a responsive website. I began with the desktop versions. Have a look at the Zoom View and Fit guide wireframes below and additional wireframes HERE.
Desktop Wireframes V1
Logo
Another part of the design process includes the company logo. I tried several versions of the abbreviated Amy Jacobson as AJ for something short and easy to tie back to the fashion designer name. Several iterations were done to capture the brands aesthetic. Keeping it clean in black and white felt right for the brand at this time.
Stage 4: Prototype
Hi-Fidelity
Once I was able to combine all of the above components, with iteration and feedback, the Hi-Fidelity versions were then created. Some screens can be seen below or click HERE to explore the Prototype further.
Stage 5: Usability Testing
Final Hi-Fidelity Iteration upon testing results for improvement
After conducting testing, the final hi-fidelity version was created and completes this case study. This is my first case study as a UX UI designer. A lot of time was put into researching, and repeatedly iterating to get the final product.