Project Overview

How do you design an online experience for a newly launched apparel company, that conveys its unique value proposition while also providing the groundwork for further growth of the company? A. Lynn is a fashion e-commerce brand that offers more sizing options than department store brands. A. Lynn’s founder approached our team to help address usability concerns with her company’s newly launched e-commerce website.

 

The Brief

 

Find pain points for users visiting A. Lynn’s website and make redesign recommendations for a responsive website. A. Lynn’s founder was concerned about a high bounce rate on her homepage, and wished to add a “fit calculator” feature to help simplify the current Fit Guide & Starter Kit process.

The Team

 

Meghan Salviejo
Research & UX/UI Design
Client POC

David Gonzalez
Research & UX/UI Design

David Sainté
Research & UX/UI Design

 

UX Tools & Methods:

Research: Heuristic Analysis, Competitive/Comparative Analysis, Market & Industry Research, Feature Analysis, User Interviews, Usability Testing, Affinity Mapping, Persona Development

Design: Design Studio, Co-creation, Feature Prioritization, Wire-framing (Sketch), Interactive Prototype (InVision), Specifications Documentation

TIMELINE: 2.5 Week Sprint

Research

 
 

In addition to our own internal analysis of A. Lynn’s website, we created and sent a screener survey [link] to identify users in our client’s target market. We conducted exploratory interviews with previous shoppers of the site and through our screener survey, conducted usability tests on our client’s current website with potential users. The results from our usability testing echoed our findings from our own heuristic analysis.

 
Left:   We created our screener survey using Typeform |   Right:   We used Trello to identify patterns and insights through affinity mapping

Left: We created our screener survey using Typeform | Right: We used Trello to identify patterns and insights through affinity mapping

 

Insight: Sending Mixed Messages

Users believed A. Lynn was offering custom-tailored clothing, that fit exactly to the users’ specifications. While A.Lynn does offer more sizing options it does not offer custom tailored clothing to customers. So why weren’t users visiting the site on A. Lynn’s value proposition?

 

1. The language used in the copy confused users: “Bringing a tailored experience to your front door”.

2. The mannequin and measuring tape imagery used were items users associated with a tailored or custom made clothing.

3. Users were instructed to purchase a “Starter Kit” and use the kit to measure themselves and return to the site to find their corresponding “fit”.

 

Insight: Losing Credibility

Our users told us they shop online for the connivence and time saved by not having to go to an actual brick and mortar store. They shop online from brands whose sizing information they are familiar with and want information presented to them that is clear and concise. Users want to make purchases confidently and don’t want to any doubts when it comes to their purchases.

 

4. Users wanted to see general product information at a glance: information on pricing, name, stock and color.

5. Users were overwhelmed by the size chart and unfamiliar with A. Lynn’s measurements.

 


Clearing the Path to Conversion

We presented our findings to our stakeholder and came to a consensus about focusing our design efforts on messaging and optimizing a path to conversion. We created a new problem statement that helped guide us through our design studio:

 

PROBLEM STATEMENt

How might design a website for A.Lynn that clearly conveys their value proposition, while providing simple and clear sizing information so that customers have the information they need to make purchases confidently?


Redesign / Solutions

Meghan Salviejo (left) and David Gonzalez (right) in a design studio session.
 

We prioritized creating a clear path to conversion from the moment a user landed on the homepage all the way through to checkout. I lead the re-design on the Home page, Product Gallery and Size Chart.

Home Page Redesign

Based on the user feedback we received, my goal for the Home Page redesign was to have a clear display A.Lynn’s value proposition and an explicit call to action.

 

Left: A Lynn’s Home page | Right: Proposed Home page redesign

Product Gallery Page Redesign  

 

The Product Gallery page was flagged during our usability testing as a pain point for our users in their flow. My redesign recommendations, although rather traditional, kept the users’ needs at it’s core. It keeps product photography the focus, but includes the information users need to inform their decisions, which includes product pricing, name, and available sizes.

 

Left: A Lynn’s old Product Gallery page | Right: Proposed Product Gallery page redesign

Size Chart Redesign

 

We found that when users shop online from an unfamiliar brand, they use different points of reference to identify clothing sizing and fitting. They expect a brand to present it’s sizing information in a clear and concise manner. However, A. Lynn users were overwhelmed and unfamiliar with some of the measurements displayed on A. Lynn’s old size chart. Our client is an expert in the fashion industry and we wanted to ensure we accurately portrayed the sizing specifications, so we invited her to collaborate with us on developing a new size chart. We identified the key information most needed by the user, and highlighted A. Lynn’s other unique sizing offerings and how they are measured. We proceeded to create an entirely new templated system for the size chart, complete with photographic reference and guide.

 

Left: A Lynn’s old Size Chart modal | Right: Proposed Size Chart redesign

Redesigned wireflow with Hi-Fidelity screens

Redesigned wireflow with Hi-Fidelity screens


Results

We conducted an exit survey after conducting usability tests of the current site, and after testing the proposed redesign. Our users perception of the website increased dramatically in terms of a perceived value added, credibility , and delightfulness. The chart below illustrates our findings:

USABILITY TEST SURVEY RESPONSES_CHART_V1.png

final thoughts

Our client approached us initially to validate a potential solution, but was receptive to a user centered approach to the problem. This project taught me the value of including a stakeholder in the design process, especially if they have an unfamiliarity with a user centered design process. The involvement of our stakeholder into our process ensured that my team balanced not only user needs, but also the needs of the business and it’s growth.