About this project
McCormick's Pet Emporium is a local pet store in Alhambra (CA), serving the pets and community. It is an established store trying to set the trends in the pets of its customers. Working on this project has been a pleasure experience for me, not only because it gives me a great learning opportunity, but also because I always enjoy visiting a pet store.
Current State (as of Dec 2020)
Knowing the users
According to Don Norman, human-centered design is a design method which emphasizes meeting people's need, ability, and behavior. This is an important method for building a solution that aligns with users' needs. Following this design methods, the first step for me is to learn my users, so I went to the store and conducted short interviews with some customers.
A list of interview questions created for McCormick's Pet Emporium customers
After analyzing the interview results, I discovered that regular customer is our primary persona, and there are five things our users want to accomplish most on the website.
Primary persona
Top things people want to accomplish on the website
Generating the feature list
Following the principles of human-centered design, the second step is ideating. Based on the goal-directed context user scenarios, user stories and user cases, I generated a list of features that I considered the most critical ones for our users.
Building the sitemap
With the available feature list, the next step is to focus on the information architecture, so I built a new sitemap for this website using Sketch.
And the wireframes came in next
Once the information architecture was set, the wireframes kicked in! Starting from this point, I used Adobe XD for wireframing, visual design, and prototyping in this project. I began by designing a desktop version of the website to get an idea about what the website should look like with all the features included. Also, instead of introducing all the colorful designs in the first place, I focused mainly on low fidelity layout. After the desktop design was finished, I then moved on to the responsive design.
Left: desktop version of the home page; Right: responsive design of the home page
Left: desktop version of the service page; Right: responsive design of the service page
Left: desktop version of the shop page; Right: responsive design of the shop page
Working on the visual design
Because the original logo design on McCormick's Pet Emporium did not look particular satisfying, I used freelogodesign to create a new logo for the website. Once I found the logo I liked, I decided to use its colors as the color palette for the new website.
A new logo for McCormick's Pet Emporium (from freelogodesign)
Left: home page; Middle: service page; Right: shop page
The most interesting part of the project, prototyping
Finally, I reached my favorite part of this project. That is, creating a prototype for this project that resembles how the actual website should work like. Feel free to check out my prototype here.
Prototyping makes my design look like an actual website with workflows
Time to get hands dirty with some usability testings
The most important step in human-centered design is probably testing. Here I used UserZoom for unmoderated usability testing to see whether my design aligned with people's experiences and needs, and to find rooms that could better the design.
A research plan created for the unmoderated usability testing
How do potential users interact with the website
Here I include the "highlight reel" video showing clips about how users interacted with the prototype. In the video, I could also hear users "thinking aloud", this helped me understand, situationally, users' goals, expectations, emotions, abilities, and obstacles when interacting with my design right at that moment, and suggesting areas where I should work on to improve the design.
Plenty of rooms for improvements indeed
More work needed
Human-centered design is all about iterating the aforementioned four steps until the design is ready. It typically takes many rounds of revisions to get to the final product with quality. Based on these findings, I found plenty of rooms that could improve my design. So I made some adjustments to my original design to better serve users' needs.
Darkened the "Service" button to make it more prominent
Added call for action button for shopping
Original checkout page New checkout page
Original appointment pages New appointment pages
Closing thoughts
Human-centered design is an important design method widely adopted in the industry. Working on this project, though it might seem a bit simplified, I had the opportunity to experience this design process myself. My biggest takeaway from this experience is the design thinking. A good design is not about the cool features you have, but rather if your design is grounded in users' needs. Therefore, defining who your users are and learning about them should not only be the regular starting point, but also be treated seriously. Another lesson I learned was that design processes are iterative, it takes many rounds of modifications to a good design. So, it is better to make small improvements and test the design frequently than to aim at perfection at the first place without having usability testings in between. This is, again, concerning whether your design is user-centered. Throughout this project, I also learned about how to use some cool design tools, such as Sketch, Adobe XD, UserZoom, and Behance, from scratch, expanded my own toolkits.
Overall, I have a lot of fun in this project!
