all projects
Blue Rooster Art Supply Co. is an art supply store in Los Feliz, CA that thrives on its indie charm. It's a family-owned and -operated business that really wants to know and build relationships with its customers and prides itself on being a community hub for artists. However, the appeal of the in-store experience that Blue Rooster customers love is missing from its online shopping experience. The interface lacks consistency, a logical structure, and a user-friendly check-out process which ultimately causes the user to feel overwhelmed and frustrated.
To create an intuitive website for Blue Rooster that cultivates the same meaningful connection with its online customers as they do their in-store customers in order to increase online sales. Simplify the information architecture, enhance the checkout process, improve the overall aesthetic, and establish consistency throughout the website to build trust with online users and increase online sales.
Heuristic Evaluation, C&C Analysis, User Interviews, Usability Tests, Affinity Mapping, User Personas, Journey Mapping
Feature Prioritization, Site Map, User Flow, Low Fidelity Wireframes
Low Fidelity Prototype, Medium Fidelity Prototype, Usability Tests, Iterations
High Fidelity Prototype, Reflection
I began my research by conducting a Heuristic Evaluation. I went through Blue Rooster’s e-commerce website several times to get an overview of the flow of the interface and performed various user tasks which helped me identify usability issues. After determining the severity of each problem, I made certain recommendations to make the interface more intuitive and to optimize the user experience.
Next I performed a Competitive Analysis to help assess how Blue Rooster performs in relation to other art supply stores in Los Angeles. I broke this analysis down by feature per page. This allowed me to gain a deeper understanding of what is being offered, uncover areas where Blue Rooster can level up, as well as identify opportunities to differentiate Blue Rooster from their direct competitors.
The biggest takeaway here was that while there is room to draw from what these other companies offer, the best way to give Blue Rooster more of a competitive advantage would be to promote what makes it unique - it is a local business that supports local brands, offers a sense of community for artists, and is familiar with their customers and neighborhood. This will help foster loyalty from those who are tired of supporting larger, corporate companies.
Next it was time to bring in real users. I conducted semi-structure user interviews with three people with varying levels of experience shopping for art supplies. This allowed me to put aside my own biases and assumptions and listen to other people’s opinions of and experiences with the interface.
Here’s what I learned about the existing design:
I used affinity mapping to group comments and user observations from my interviews into clusters. This helped me organize and find patterns in the data and understand the commonalities between the users.
Using these insights, I was able to build a user persona to represent Blue Rooster’s target audience. This helped guide my design thinking and build empathy with the user.
Next I used a Journey Map to chart out the user’s journey which helped me further identify how users’ are currently interacting with the interface when trying to complete a desired task. This helped highlight the problem areas that needed to be redesigned in order to improve the customer experience.
Next I took a look at the existing site map to get a better sense of the sites structure and navigation schema. I then performed three open and two closed card sorts in order to understand the user's mental models and help determine the information architecture of the new site.
Next, I mapped out how the user moves through the existing interface, which helped me determine areas in the flow where users were getting stuck. I then reconstructed the flow to eliminate these points of frictions, especially during the checkout process, to optimize the user experience.
.png)
.png)
Finally, I sketched out low-fidelity wireframes and created a paper prototype. I conducted 3 usability tests with all the users being able to complete the given task of finding a specific spray paint, adding it to their cart, and checking out.
I then moved into medium-fidelity and conducted 3 more usability tests. Again, users were able to complete the given task and found the flow to be very intuitive.
The only iterations I made going into high fidelity were little tweaks to the checkout process (e.g. adding a sign up, adding Paypal as a payment option, and the option for guest users to create an account after purchase).
%201.png)
This e-commerce website redesign for Blue Rooster Art Supply was both fun and challenging. I'll admit that I initially missed the mark. I thought that the best way to make Blue Rooster more competitive was to design a website that was similar to the competition. In doing so, I overlooked what was unique about Blue Rooster.
As a small independent art store, Blue Rooster can't offer everything the corporate giants' offer (free shipping, frequent deals, huge inventory). However, they also provide things that the corporate giants don't (sense of community, local products, art classes, etc.). This realization resulted in a final design that is characteristically Blue Rooster.
