Treatos & co.
Responsive e-commerce website selling all-natural, healthy, and customizable dog treats.
overview
PROJECT BACKGROUND
Treatos & Co is an all-natural dog treat company based in Minneapolis, MN. Their treats are made with high-quality and healthy ingredients. What sets them apart is their customizable treats where customers can personalize the treats with their dog’s name!
problem
As an expanding small business, Treatos & Co want to refresh their brand, streamline their existing website, and reach a wider audience.
Goal
This project’s goal is to revamp the Treatos & Co brand and design a responsive website that is easy to use, pleasant, and fulfills customer needs.
01: RESEARCH
OBJECTIVES
Establish target audience
Highlight the most important factors taken into account when shopping for dog treats
Ascertain whether there is a market for higher-priced custom treats
Determine the need for an account feature
COMPETITOR RESEARCH
I began my competitor research by exploring the market for custom dog treats. My main focus was around factors such as treat shapes, flavors, size, customizability, and packaging. Understanding the common trends and determining what sets Treatos and Co apart from their competitors would allow me to create a distinctive and engaging user experience.
USER RESEARCH
PARTICIPANTS
Total participants: 5
All participants own at least one dog
All have had experience buying dog food
Age range: 20—57 years
SUMMARY
I conducted 1-1 user interviews asking questions about their dog’s eating patterns and their thought process when buying dog food. There was a wide range in the responses.
4/5 participants give their dog treats multiple times a day; 1/5 gives 1 treat per day
3/5 participants don’t look at ingredients in their dog’s food; 2/5 look at the ingredients
4/5 participants said the quality of a treat is more important than the shelf life; 1/5 participants said shelf life is more important
CLIENT INTERVIEW
I interviewed my client to find out more about the company and its goals. I especially wanted to understand what features were important to keep and where they would like to see changes.
The company was inspired by the owner’s pet that has a very sensitive stomach. They started making homemade treats in mid-2020 and decided to start a business in January 2021. Their goals are to reach a wider audience, add a pupcake flavor, introduce dog-friendly birthday cakes, and attend more local events to get their name out.
The owner likes their current logo, but wants to see options for a new logo—something clean and modern. However, the color scheme was non-negotiable. Furthermore, they want to combine their two wholesale pages into one (the current website has one page for showing partnered companies and another for placing a purchase order).
The interview helped cement the requirements and I was excited to get started!
02: DEFINE
PERSONA
I analyzed the user research and created a persona to fit a realistic customer of Treatos & Co.
Maisy West is a dog lover, environmentalist, and a health nut. She owns two small dogs, Zac & Zen. Living a healthy lifestyle is very important to Maisy. She likes to eat healthy foods and provide the same for her dogs. She likes baking dog treats but doesn’t always have the time to.
I chose “The Health Nut” persona because this company has a niche customer base—people with dogs who care about providing healthy treats for their pets.
SITE MAP
With the persona defined, I started on the sitemap. My main goal was to create an intuitive structure. My starting point was the current Treatos & Co website. From this I highlighted these key components:
“About” page to give background on the company
“Shop” page where customers can purchase products
“Wholesale” page to display past partnerships and ability to place new wholesale orders
“Contact” page with the information to get in touch with the company
“Events” page that lists upcoming events Treatos & Co. will be attending
“Shopping Cart” page where the products are added before purchasing
New feature:
“Sign In” page where customers can create an account, access past orders, and save their personal information (name, address, etc).
USER FLOWs
Using Whimsical, I created three flows based on my sitemap.
What Maisy would most likely use the website for—buying treats for her dog (with the option to customize them).
How the general checkout process would work from start to finish.
The Sign-In process, or Account Creation if the user does not have an account.
03: DEsign
Sketches
Using the Procreate app on my iPad, I began sketching different ideas for my landing page. My goal while sketching was to create a well-structured site that has a natural flow. I created three different sketches of the homepage. I decided to move forward with the first sketch.
WIREFRAMES
I took my low-fidelity sketch and mocked wireframes in Figma. At this stage, I set up a grid, chose my icon sets, typography, and other necessary components. I made iterations from the original sketch.
branding
To bring the design to life, I needed to add a logo, pictures, a color scheme, and accents to the wireframes. My client made it clear they loved their current color scheme, therefore we kept the shades of green and neutrals. My client however wanted to see options for a new logo and overall look. I created a mood board to get inspiration for the brand identity.
logo
My goal was to create a vibrant yet simple logo. I had a difficult time creating one that matched the brand and its aesthetic. I started on the left with very simple designs—the company name with a dog bone. I then shifted over to a floral dog bone because the treats are all-natural (which reminded me of nature). Although I liked this logo, it didn’t fit with the overall UI design. I finally ended up with a variation of the first idea—the company name and a dog bone with a pattern. The patterns within the logo also present an overall playful and inviting mood I strove to create for the website.
style tile
Before moving on to the UI, I created a style tile to have a consistent brand feel while designing the screens. My goal for the brand was to be described as playful, clean, and modern.
TESTING UI
Now it was time to put it all together! I started by simply adding color to the wireframes; this led to a very boring and modular design. It lacked creativity, so I decided to brainstorm. I looked at other dog treat websites, creative UI design, and whatever else I could think to type into Google for inspiration. The next step was trial and error. I began designing and experimenting with the homepage. I didn’t like any of my designs and I felt stuck. I persevered and after several more duds, I created one that I immediately knew was a winner.
UI design
The next step was applying the UI design to the rest of the wireframes. I decided to make the homepage and ‘About’ page more playful while keeping the rest of the pages clean and simple. I wanted the landing page to be inviting while keeping the experience straightforward for ordering treats, looking up events, creating an account, etc.
04: test
USABILITY TESTING
I used the prototyping tool in Figma to bring the design to life and create mock scenarios. Through usability testing, I was hoping to get feedback and improve the design through iteration.
AFFINITY MAP
had a total of 6 participants ranging between 23-57 years old. One test was in-person and the other five were remote. I took audio and screen recordings of user testing to refer back to in the future. I asked the participants to complete three tasks:
Purchase order of Custom Treatos, Portable Water Bowl, and order of Pupcakes
Go through the checkout process
Create an account
PRIORITY MATRIX
The majority of the feedback I received was about the sizing; Many users said the Shop pages seemed zoomed-in and some pictures and fonts were slightly too large. Another main point of feedback was moving “Create Account” to somewhere more visible. Based on the feedback I received, I created a priority matrix with changes based on effort and impact and decided to make all the changes in the low effort half of the matrix.
final design
The final step was to make the changes from the usability testing. These minor changes made a vast difference and elevated the overall feel of the design.
06: NEXT STEPS
CONCLUSION
In this project, I learned about working directly with a client to reach a successful outcome. Because Treatos & Co has a current website from Squarespace, I wanted to keep the aspects that were important to my client but create something unique and compelling. Through the process, I learned how to listen to users, take their feedback, and make the necessary changes to better the design.
Next Steps:
Add the remaining elements from the Priority Matrix
Conduct further usability testing with more participants
Iterate based on the second round of usability testing
Design all pages for tablet and mobile
Discuss the final result with my client