Modeled off a real world business, I designed a website for an aquarium supply store in Denver, CO that previously has no online presence. The new website features a rewards program for improved customer engagement and a responsive functionality that allows users to easily shop from mobile devices.
Given that there was no existing website for this company, the challenge was designing an e-commerce website from the ground up. The goal was simply to create a web design with intuitive information architecture and familiar e-commerce design principals.
I created a user friendly, responsive website that gives customers a better way to quickly find the products they need and incentivizes repeat customers through a rewards program.
My next step was to conduct interviews with pet owners to understand their decision process when purchasing pet supplies. Additionally, I lead users though card sorting exercises to develop logical categories for the information architecture of the site.
Using affinity mapping, I synthesized qualitative data from user interviews into themes and attitudes. Then using patterns I found in the affinity diagram I developed two user personas. These distinct personas would drive the evolution of the user flows for the website as well as the overall design.
Sitemap & User Flow
To help inform the structure of the website and the information architecture, I created a sitemap. This helped to show how the pages are related to each other. To demonstrate how users would navigate and move around the site, I created user flows based off my two personas.
Sketching & Wireframing
I drew out my initial screen ideations on paper first, so I could easily consider different options and choose a visual design direction. I also considered common UI patterns from existing e-commerce pet sites to figure out what would be intuitive to users. From there I created digital wireframes. Moving into pixels, I became more precise about how the interface would work.
I landed on a final design after several rounds of user testing and ideation. From these user interviews, I learned that pet owners often decide where they purchase their pet supplies based on where they have a loyalty program. I included this feature in order to increase customer retention and repeat business - a sensible goal for a real world business.
In order to detail interactions for development, I created an annotated report. This report described the intricate interaction behaviors and functionality of dropdowns, modals, navigation, carousels, and form fields.
What I Learned
During the user research, I was genuinely surprised at how much time and money aquarium owners spend on this hobby that they viewed as creating a work of art for their home. Many fish owners I talked to purchased supplies at Walmart or Amazon and had no store loyalty. When I talked to dog and cat owners, I found the opposite.
This discovery really taught me how important the wireframing stage is in iterative design. I really enjoyed the process of taking my ideas to users, getting feedback, changing the designs based on feedback, testing again, and iterating multiple times. It was really important to get that feedback before going into my high-fidelity mockups so I didn’t have to redo work that took more time to complete.
Had a developer been coding this website, it would have been even more important to ensure confidence that users would have a positive experience on the site.