Overview
CHALLENGE
Design a warm and welcoming website for Simply Hay to market and sell their products
SOLUTION
Conduct user research methods and market research to build an information structure to hand off to Simply Hay's developers
METHODS
Contextual interviews, card sorting study, usability tests
DELIVERABLES
Storyboard, persona, thematic analyses from research, sketches, wireframes, site mockup
ROLE
UX/UI Researcher
TIME
3 Weeks
TYPE
Client-Project
TASK
Research and design a basic mockup for client's site
TOOLS
Figma, Ipad, AI Image generator, Pencil and paper
RESEARCH AND EMPATHIZE
Market Research
I began my research by investigating the online shopping market and the world of animal owners.
-
2.64 billion people worldwide shopped online in 2023; 10.0% were Americans. Online shopping is expected to increase in the next ten years to a total spending of $2.5 trillion (in the US alone)
-
266 million Americans (79%) shop online.
-
​In 2024, U.S. pet owners will spend $28.5 billion buying pet food and supplies online, up 2.60% year-over-year (YoY). This high demand for pet food eCommerce means there is a market for Simply Hay enter as a small pet food and supply company
-
Top 5 reasons pet owners shop online:
-
Convenience of shopping at home
-
Freedom to shop at any point of the day
-
Accessibility to varying prices and product qualities
-
Cheaper prices from online sales
-
Time-efficiency
-
-
​Amazon.com is the #1 e-commerce retailer in the U.S. and in the world with; JD.com is a close 2nd.
-
66% of American households own pets
-
Projections indicate that in 2030, the pet food market will be worth $135 billion.
-
​Middle-aged and older Americans are likely to spend more on pets, with a drop-off in spending at age 75.
-
Most pet store revenue (37.2%) comes from consumers aged 25 to 44 years.
-
An estimated ~19 Million American households own pets that require hay as part of their diet. This is not including the many animal habitat uses for hay such as animal bedding that would cater to a larger market.
-
The ownership of certain hay-eating rodents such as rabbits is three times more common in the UK than in the US
-
On a survey study performed in the UK on rabbit owners with a sample size 1200+ highlighted the following rabbit owner demographics: 89.1% Female in the age range from 30-49 (56.6%). Of total survey respondents, 48.3% had no children in the household.
-
Forbes Advisor provided a demographic breakdown of age and pet ownership in the United States that can be seen below:
Competitive Analysis
Now that I had a better understanding of Simply Hay's product market, I investigated some of its strongest competitors to identify their strengths and weaknesses. This analysis allowed me to gain a better perspective on how to adress some of Simply Hay's challenges and construct a more effective product.
User Interviews
With a clearer understanding of the market, competitors, and Simply Hay's general audience, I wanted to focus on empathizing with the users. I needed to learn who was shopping at Simply Hay and what kind of experiences they wanted to have.
After interviewing participants that fit into Simply Hay's target demographic, I was able to construct the following empathy map.
Empathy Map
Using the notes from my interviews with participants, I grouped recurring themes and patterns to construct this map. and the following insights:
1.
​Users are drawn to shop online to save time
2.
Users want to feel like they're making the healthiest/best decision for their pets
3.
Users are willing to spend more if it means the convenience of online shopping vs in-person prices
4.
Overly expensive food products, regardless of quality, disincentivize user purchasing
Storyboard
After learning more about our user's motivations, I created the following storyboard to visualize what a typical user interaction with Simply Hay would look like
Persona
Since we now know our users motivations, goals, frustrations, and needs, we can finally develop our user persona.
Hello Gwen!
MEET GWEN
GOALS
- To save time
- To quickly receive her pet food
- To find high quality food at lower prices
NEEDS
- To feel like she's a great pet owner
- To keep her pet happy and healthy
- To shop conveniently
MOTIVATIONS
- Convenience
- Saving money and time
- Quick delivery
- Happy/healthy pet
FRUSTRATIONS
- Having to run pet errands in the middle of a busy week
- Not finding the right type of food in the pet stores
- Lugging food packages from the store to her car to her house
AGE
OCCUPATION
GENDER
STATUS
LOCATION
31
Graphic Designer
Female
Single
Portland, OR
(and Peanutbutter)
DEFINE AND IDEATE
Project Goals
To kickstart the design definition process, I began by creating the following venn diagram that outlines user goals, business goals, and technical considerations and how all three sectors overlap. This visualization of website requirements allowed me to better understand what features would be absolutely necessary to include
Card Sorting
Using my venn diagram as a guide, I created a list of necessary features for the website that would fit both users' goals and the client's goals. I then conducted a study with 5 participants allowing them to sort through the cards and create intuitive information hierarchies. Based on these studies, I found the following insights.
1
Landing page should include the mission statement, the ordering process, and testimonials from customers.
3
One page on the menu should be solely dedicated to the hay products. Each product should have an image and a nutritional breakdown.
2
A menu item should be about the company's origin story. This page should include the family's backstory, a product quality description, and why customers should buy from Simply Hay.
4
The final menu item should be a contact page that gives users the opportunity to ask nutritional questions to the vet, has an FAQ section, and a newsletter section to stay informed.
Basic Sketches
After creating task flows and user workflows based on my card sorting results, I began to sketch out basic site designs for Simply Hay.
Digital Wireframes
With my basic sketches as a guide, I used Figma to create digital wireframes of the site layout. I used these wireframes to run a usability test with 5 participants that led to some minor layout re-ordering.
DESIGN
Branding
As part of my design research for Simply Hay, I was tasked to create a basic style for the site. Researching thoruhg common hay and agriculture sites for common patterns, I decided on the following palette and fonts. The warm colors offer site visitors rustic, warm feelings just as the open and modern fonts offer credibility and quality in the mind of the visitor.
Style Guide
Montserrat
Simply Hay is a family-owned farm
Montserrat Black
We care about your pets nutrition!
UI Design
With the style of the site decided, I transformed by wireframes into mid-fidelity mockups on figma to gain a better feel of how the site might look once implemented with the true images and text provided by the organization.
Wide
Narrow
REFLECTION AND NEXT STEPS
This project brought me out of my comfort zone in designing app UIs to practice researching and building designs for a real-client, facing website. Since Simply Hay did not already have a site, I had a complete blank space to work with - a task both challenging and exciting. Without ever being given the final logo, images, or text content for the site, I struggled to envision the UI for this site. This forced me to let go of visual aesthetics for a moment, and really focus on how to structure the information of the site. In deciding that first, deciding a style for the site came naturally. Although it was a fast-paced project, I really enjoyed working on a challenge with such fluid creative freedom
1
Re-test Mockups
Even though I ran a usability test on the original wireframes, running one again on higher quality mockups would allow me to see how users my navigate through the actual dynamic site
2
Hand-off to Web Devs
The final step would be to hand my research off to the web developers so they can implement these designs and publish the site.