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.
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
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
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
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.
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.
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.
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.
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.
.png){kind=logo}
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.
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.
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.
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
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.
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?"
