Rivers & Reefs Pet Center
Reinventing an ecommerce webiste
The goal for this project was to create a welcoming website that showcases the business and encourages it’s customers to shop online. I decided to tackle Rivers & Reefs Pet Center, a local pet store located in Austin, Texas and catered the website to the Careful Critic Archetype. This is a spec project.
Role: Solo Designer– Discovery, User Research, Design, Protoyping and Usability Testing.
Local Pet Store Re-Design
Due to the Covid-19 pandemic, thousands of brick and mortar stores have struggled to meet customer needs. The original website for Rivers & Reefs Pet Center is currently not a functional e-commerce platform. Customers cannot browse through their available products and must call the store or go in person in order to find out what they sell, and thus Rivers & Reefs were missing out on customers for their business.
The central focus of this project was to upgrade their website in order to enable users to browse through the pet store’s products and shop online from their own devices. Creating this website would meet the business’s goals, which is to provide their services electronically and the consumers’ goals, which is to be able to browse and buy pet products from their local business online without having to call or physically come into the store. The website entails a fully functional checkout process, from product discovery to product purchase, as well as the ability to read and write reviews and compare multiple products from different brands.
The Careful Critic
To the careful critic, the most important factor in their purchases is quality. This person will take the time to look over ratings and reviews, and will look into the products’ brands as well to ensure the quality of their products. They will take their time to read into product descriptions and details, and will have no problem spending time comparing different products to find the best one. Throughout the deisgn process it was important for me to contantly have this user's needs and values in mind to ensure their goals will be met:
•Assurance of quality
•Brand Information
•Ratings & Reviews
Problem Statement & Competitive/ Comparative Analysis
Problem Statement:
Customers cannot browse through their available products and must call the store or go in person in order to find out what they sell. Rivers & Reefs Pet Center needs an updated redesign of their online presence to meet customer needs.
Competitive & Comparative Analysis:
In order to get a better grasp at the state of competition, I decided to conduct competitive and comparative analysis on four businesses. I looked into the features of Amazon, Petco, Urban Outfitter and Chewy. Despite Amazon and Urban Outfitters not being direct competitors to our local pet store, I thought it would still be valuable to look into them as they are both successful e-commerce websites. I honed in on the features of Urban Outfitters and Chewy as my main design inspirations for our new e-commerce site.
pluses & deltas chart
Urban Outfitters has a wide variety of products ranging from womens and mens clothing to home furniture. They offer delivery and a personalized account so that users would be able to track their purchases and save them for a later time. They have a reviews system for every product along with great UI & IA elements such as navigation components and white space. However, they do not offer additional information for the brands that they sell which is a key component for our persona.
Chewy also enables users to create a personalized account, includes reviews and comments as well as brand information which is essential to our target user. They offer delivery and also has a wide range of products, however their information archetecture is not as spaced out compared to Urban Outfitters.
Site Mapping
In order to find the most intuitive way to organize the website, I conducted an open card sort where I had users arrange over 50 items into groups of their choosing. After gathering the results, I found that a majority of people would categorize an item by animal first then say whatever subcategory it was. For example, dog food, cat food, fish food, fish tanks, etc. Thus I created a site map:
User Flows
Based on the target user’s key points, I created a user flow:
Product Discovery:
1) Navigate to category
2) Browse through sub categories
3) Select and filter based on needs
4) Browse and select product
5) Read through reviews and product details
6) Select another item and compare
7) Make a decision and add to cart
Checkout Process:
1) Go to cart
2) Decide if they want to log in or check out
3) Is their payment method saved?
4) Select delivery options
5) Review order
6) Checkout
Sketching:
When drafting out the idea of the website, I took a lot of inspiration from Urban Outfitters’ user interface. I wanted to create a site that was easy for users to navigate through:
Global Navigation: a menu at the top of the page
Local Navigation: a drop down menu showcasing subcategories
Wireframing & prototyping
While creating the wireframes for the website it was imperitive that I kept thinking of the contrast, repetition, alignment and proximity of the elements on the page.
testing and Iterations
Usability Tests:
In order to test the design of the prototype, each user was given two tasks:
1) Compare two brands of dry cat food and select one you prefer more
2) Add the selected item to your cart and complete the checkout process
Iterations:
After conducting several tests, it was clear that changes had to be made in order for the design of the website to be more intuitive and to ensure a smooth user experience. Despite 100% of the users having completes the tasks successfully, only 20% had navigated to the brand page. The other 40% stated that they weren't aware that they were able to navigate to the page. In addition, users wanted added features so to decrease the time spent during the checkout process:
•One slot for credit card name
•Logos for credit cards to show what is acceptable
•The ability to go back and edit provided information during the checkout process
•Same as shipping address instead of filling billing address
•Enable user to exit out of checkout process without having to checkout
Final Design
