Cary Lane, a San Francisco-based clothing retail store, specializes in offering high-end designer samples at affordable prices. However, their current website falls short of reflecting the store’s clean and elegant aesthetic.
The challenge was to identify the core issues from the user’s perspective and develop a solution that enhances the online shopping experience. The goal was to create a more user-friendly design that not only empowers customers to shop with ease but also expands Cary Lane's reach to a broader audience, especially those who may not be able to visit the physical store.
Online shoppers at Cary Lane need an improved way to navigate the website, allowing them to easily find the right products in their size and price range, and ultimately enjoy a seamless, positive shopping experience.
This project progressed to the mid-fidelity prototype stage, allowing me to conduct user testing and address some of the key issues identified by users.
In the next phase, I would further refine the high-fidelity prototype, conduct additional usability tests, and collaborate with the store to create a comprehensive mockup of the website.
In the accompanying video, you'll see a walkthrough of a typical user shopping for and purchasing three items on the envisioned future website.
The first step in the process was conducting a heuristic evaluation of the current site to identify issues and assess each page based on UX/UI principles.
Next, I conducted contextual inquiry interviews with four community members to uncover the challenges they were facing. I assigned various tasks for the users to complete and closely observed their emotional responses throughout the process. After affinity mapping the results to identify patterns and common pain points, I developed a journey map to illustrate the findings and user experiences.
From the journey map, it’s clear that the website’s initial landing page had UI and accessibility issues, with overly complex navigation.
While browsing products, users expressed frustration over the lack of filtering and sorting options. The product information pages were insufficient, with accessibility concerns related to font color and size. On a positive note, the checkout process was generally smooth and user-friendly. These insights highlighted the specific areas in the site design and user flow that required improvement for a better overall experience.
Ella prefers shopping online, seeking trendy but understated styles that fit her budget in an expensive city. Size and fit are important to her. She discovered Cary Lane last year and loves their affordable prices, but wishes the website was more user-friendly and reflected the store’s aesthetic.
Based on marketing research and user feedback, I developed a target user persona to maintain a clear focus on the user. This persona highlights key needs, goals, and frustrations, helping guide the design process effectively.
After identifying the issues in the current design, I created a 10-question survey to gather feedback on users' online shopping experiences at various stores.
The goal was to understand what information users find essential and what enhances their overall experience.
The survey, completed by 25 users, provided valuable insights that supported the inclusion of features like filters and search functions in the new design.
In the survey, I also asked users to name their favorite online stores. I used these stores as the foundation for a competitive and comparative analysis, as well as an open card sort to better understand how users categorize and navigate products.
.png){kind=logo}
The competitive and comparative analysis revealed that Cary Lane was missing several key features found on other similar sites.
Using these findings, I created a feature prioritization list to identify the most important elements to incorporate for an improved and enjoyable user experience.
After completing the defining research phase, I began iterating the design through various versions of user flow diagrams and wire flow sketches before transitioning to Figma. The image below showcases the mid-fidelity wireframes developed for user testing.
During user testing, I had 5 users complete 2 scenario tasks similar to those from the initial contextual inquiries. I then created an affinity map to identify common errors and hesitations, revealing areas for design improvement. Below are key takeaways from the interviews and potential solutions to enhance the design.
After synthesizing the user testing results, I revised the user flow diagram to address the missing filtering options in the faceted navigation. I then updated the prototype to incorporate the feedback received.
Since the project was only developed to the mid-fidelity stage, I created an initial concept of what the high-fidelity design would look like. Below are a few key wireframes elevated to a high-fidelity level.
If I were to continue with this project, the next steps would involve conducting additional usability tests on the iterated design and then developing a full high-fidelity prototype. I would also collaborate with the store to create a mockup for customer testing.
Additionally, exploring how to design for store staff as users—by incorporating a straightforward method for them to update the website without relying on a third party—would be an interesting angle to pursue.
One of the key lessons from this project was the value of clean and thoughtful prototyping—ensuring that you create just enough to clearly communicate your idea. I also learned a great deal about using Figma efficiently and prioritizing features effectively.
Additionally, I discovered that surveys are an excellent tool for gathering quantitative data, as they allow you to reach a broader audience than interviews alone. By carefully considering the information you want to gather and crafting questions that provide insightful answers, you can keep tests, interviews, and surveys both engaging and effective. Always ask yourself, "Is this question helping me gain insight into the problem?
