Retail Website Re-design

Revamping the online shopping experience of a San Francisco based small business clothing store

Project overview

Cary Lane is clothing retail store, located in San Francisco, CA. The basis for their business is that they receive samples form higher end designers and sell them to consumers at an affordable price. The website is not currently a good representation of the stores clean and elegant design.

The task was to figure out what was really thee problem with the website through the users lens and come up with viable solution that improves the design by empowering the users to shop there and uplift the business to reach a wider audience that isn't alway able to come into the physical store.

What is the problem?

Online shoppers at Cary Lane need a better way to navigate the website, so they can find the information and products they are looking for in their size and price range, and leave with a positive experience

2 week sprint
UXUI Designer & Researcher
Web Based
Figma, FigJam, Notion, Adobe Photoshop

What is the solution?

This project was taken to a mid-fidelity prototype stage where I could perform user testing and iterate some of the key issues that users were finding.

In the next phase I would further develop the high fidelity prototype, perform more usability tests, and begin working with the store itself to create a full mockup of the website.

In the video, you will see a walkthrough of a typical user shopping for and purchasing 3 separate items through the future website

Discovering the challenge

The first task in the process was to do a heuristic evaluation of the current site to discover the problems and analyze each page based off of UX and UI principles.

I then was able to perform contextual inquiry interviews on 4 other people in the community to find out which issues they were facing. I created a few different tasks for the users to perform and then gaged their emotional reactions at each step of the way. After affinity mapping the results to find the commonalities, I was able to create a journey map of the results

Journey mapping the current experience

From the journey map above, you can see that the initial opening had some UI and accessibility issues, and the navigation was a bit overly complicated.

While browsing through the products, the users had frustrations that there were no filtering or sorting options. The product info page was not thorough enough and had accessibility issues due to the font color and size. Finally the checkout process was mostly straightforward and easy to use. From these results, I could see the areas in the site design and flow that needed improvement.

Understanding the user persona


25 - 35 yo
San Francisco

Ella would rather stay at home and shop online. Her style is trendy and hip without being too flashy, so she loves shopping from brands that fit her taste. Also because she lives in an expensive city, she cant always afford to shop at from those overpriced stores. Size and fit are definitely important to her. Ella discovered Cary Lane last year an immediately fell in love with their affordable prices. She wishes the stores website was more user friendly, and representative of the stores image itself.

  • Frustrated when she's not able to easily navigate the online store or filter through the clothes
  • Frustrated when the text is too small to read on the website
  • Frustrated when she doesn’t see all the inventory on their website
  • Would like to be able to stay home and shop at her favorite store if its raining or if she just feels like it
  • Feel confident that the clothing will fit her by looking at the sizing information
  • Find quality clothing that she can fit into and stay within her budget
  • Needs to be able to easily navigate and read the information on the website
  • Needs to be able to understand where the store is located and what all the return policy’s are
  • Feel comfortable entering her credit card info without feeling like the info might get stolen

Based off marketing research and user feedback, I was able to create the target user persona which helps keep the focus on the user and allowed me too easily see what the main needs, goals, and frustrations are.

Defining the research

Once I was able to understand the issues in the current design, I created a 10 question survey to gather user feedback on their online shopping experiences at different stores.

The goal was to find out what types of information are important to users, and which ones help make the overall experience enjoyable.

From the survey, I obtained user feedback form 25 different users. This helped strengthen my claims for adding different features into the design like filters and search functions.

User survey results

In the survey, I also asked users to name stores that they enjoy shopping online at. I then used these stores as a basis for a competitive and comparative analysis, as well as an open card sort.

Competitive & comparative analysis results

States if sold out
Filters & Sort
Product reviews & rating
Best sellers
Sizing guide
Images from customers

From the competitive and comparative analysis, I could see that Cary Lane was typically the one store that did not have some key features that the rest did.

I then used these findings and created a feature prioritization to see could see which features were the most important to incorporate for a pleasant experience.

Ideating on possible solutions

Wireflow sketch ideation

After the defining research phase, I was able to start iterating the design through different versions of user flow diagrams and wire flow sketches before taking the design into Figma. In the below image, you can see the different Mid-fidelity wireframes that I could use for user testing.

During user testing, I had 5 different users perform 2 different scenario tasks that were similar to the initial contextual inquiries. From the results, I created an affinity map to see where there were overlaps in errors or hesitations, and see what areas of the design could be improved on.

Below are some of the key takeaways from those interviews, and some of the possible solutions to improve on the design.

User testing takeaways

“I had difficulty finding and figuring out how to discover products based on brand”
“I had difficulty finding and figuring out how to discover products based on brand”
“I had difficulty finding and figuring out how to discover products based on brand”
“I had difficulty finding and figuring out how to discover products based on brand”

Possible solutions

  • Add an option to filter by brand in the faceted navigation menu on thee product browse pages
  • Add the brands specific to women/men in their respective local navigation menus
  • Make the global navigation stand out more
  • Add jewelry to the women/mens respective faceted navigation menu on the product browse pages
  • Add the jewelry specific to women/men in their respective local navigation menus
  • Make the global navigation stand out more
  • Change how the ‘quick add’ and product pages are laid out so the ‘add to cart’ all info can be seen on a smaller screen
  • Make the global navigation menu stand out more

After synthesizing the user testing results, I went back and iterated the user flow diagram to correct the missing filtering information from the faceted navigation I then iterated the prototype incorporating the feedback that I had received.

Delivering the solution

Because this project was only taken through the mid fidelity stage, I wanted to create an idea of what the high fidelity would begin to look like. Below are a few of the key wireframes brought up to a high fidelity level

What could I do next?

If I were to continue on with this project the next steps would be to perform more usability tests on an iterated design, and then develop a full high fidelity prototype. I then would work with the store itself to develop a mockup to test on customers.

Another angle to this design that would be interesting to explore, would be the thinking about the store staff as users and incorporate an easy way for them to keep the website up to date, without having to go through a third party.

What did I learn?

One of the key lessons learned during this project was the importance of clean and thoughtful prototyping, and to make sure that you are creating just enough to allow others to understand your idea. This project taught me a lot about utilizing Figma in an efficient way, and the importance of feature prioritization.

Another lesson learned was that surveys are a great way to gather quantitative data, because you can reach a larger audience than you would just by interviewing people. I found that by thinking out exactly what information you are trying to gather, and writing questions that gain insight to the information, helps keep the tests, interviews, and surveys engaging and efficient. When writing, it is important to ask yourself, "Is this question helping me gain insight into the problem?"

Feel free to reach out via email or LinkedIn.
I would love to hear from you!
Designed and developed by Griffin Chierici ©2024