Kat Arroyo (She/Her)
Mainstay Pet Supply
Overview
For this spec project, I was given the opportunity to create an ecommerce website for a small business. It was important for me to keep in mind that the business model was based on customer service, quality products, and reasonable pricing.
Mainstay Pet Supply, the pet store I created for this project, is located in Seattle and offers many different products for both cats and dogs. Their target user is one that carefully analyzes, reviews, and compares products prior to making a purchase. As you could imagine, walking into a pet store with so many options leaves this user feeling overwhelmed.
Mainstay Pet Supply needs a way to help customers easily get into the fine details of each product and quickly compare them to others so that they can feel good about the products they are purchasing and with less stress, too. Since Mainstay didn’t have a website, this was the perfect opportunity to create an ecommerce website that would allow users to analyze and purchase products online with just a few clicks.
Duration.
2 week sprint
Role.
This was a solo project where I completed all the deliverables apart from the provided initial user research.
Tools.
Figma
Miro
Optimal Workshop
Method.
Competitive and Comparative analyses
Card sorting
Wireframing
Prototyping
Usability testing
Competitive and Comparative Analysis
When I thought about the user’s needs, I knew it would be important to get a sense of how other businesses were approaching ecommerce. After all, the point was to make things easier for the user, not to reinvent the wheel. I visited several different websites and took note of the features they implemented to help users analyze and compare products, as well as those that allowed them to navigate about the site with ease.
Persona
Using the user research I was provided with, I brought Mainstay’s target user to life. My persona, Eric, helped me remember who I was designing for throughout the entire project. Stepping into his shoes, I could better understand his pain points and was able to develop a clear problem statement.
Problem Statement
Pet owners spend a lot of time making sure they buy the best quality products for their pets. Eric feels overwhelmed by all the available cat products on the market and needs an easier way to find the best quality products for his cat.
How might we help Eric quickly analyze cat products so he can more effortlessly buy the best items for his cat?
Information Architecture
Card Sorting
Now that I understood who my user was, I was ready to start organizing Mainstay’s inventory into a way that made sense for Eric. I used Optimal Workshop as a tool to facilitate card sorting and collect data on how users would organize the pet products that Mainstay offers. The trends were clear to me, and I used that data to lay out a sitemap and start sketching some page layouts as well as a user flow for Eric to happily enter Mainstay’s website and make a purchase.
Site Map
User Flow
Prototype
Putting all of that together, I used Figma to design wireframes and a prototype for a website that was intuitive, functional, and familiar. Most importantly, it met Eric’s needs.
Reflections and Next Steps
Throughout this process I really learned how important information architecture heuristics are, and how they can affect the user’s experience. When it comes to ecommerce, there are standards already in place as far as navigation and features go so it is important not to reinvent the wheel no matter how awesome a new idea might seem. I learned the importance of asking myself over and over if I am meeting my user’s needs and how I am doing that.
Moving forward, I would like to work on reducing the number of clicks a user has to make in order to reach the end goal. I would use drop down menus to improve the user’s experience by reducing clicks and the number of pages they are taken to in order to purchase a product.