Amy Jacobson
UX designer
Made with

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

        Amy Jacobson              E-Commerce Site

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.

        Amy Jacobson              E-Commerce Site

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.

        Amy Jacobson              E-Commerce Site

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.

        Amy Jacobson              E-Commerce Site

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.

        Amy Jacobson              E-Commerce Site

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.

        Amy Jacobson              E-Commerce Site

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.

        Amy Jacobson              E-Commerce Site

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.

        Amy Jacobson              E-Commerce Site
        Amy Jacobson              E-Commerce Site

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.

        Amy Jacobson              E-Commerce Site

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.

        Amy Jacobson              E-Commerce Site

Desktop Wireframes V1

        Amy Jacobson              E-Commerce Site

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.

        Amy Jacobson              E-Commerce Site

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.

Thanks for reading! Feel free to reach me through my website contact page.