Make improvements to Puppy Village’s website by introducing a robust e-commerce platform.
O B J E C T I V E
B A C K G R O U N D
Puppy Village is a store in Federal Way, near the greater area of Seattle. While they have excelled in face-to-face interaction with their customers, they see an opportunity to promote their business through their online website. Currently, they are not pleased with the results. Through an improved website and revamped e-commerce, we aim to provide greater customer service while still maintaining their “small shop” appeal.
P R O P O S E D S O L U T I O N
I S S U E S & I T E R A T I O N S
D I S C O V E R
D E F I N E
Color Branding
Digging deep into the psychology and emotional triggers of colors, I found that recent study showed that there are generally five common characteristics of a dog owner: fun, friendliness, happiness, trust, and excitement.
Logo
After series of sketches, a refreshed logo is finalized. An iconic silhouette of a dog incorporates imagery of a village. The orange and yellow is a nod to the original logo and typeface. The new logo is simple and yet memorable.
B R A N D I N G
Puppy Village needs a more focused branding that allows clarity and user understanding of the business’ goals and features. A clear brand will allow for a more pleasant user experience and promote bookings and purchases on the company website.
Brand & Commerce
L O G I N C O N D E N S E D
A more simplified sign-in screen features the ability for registered users to login with their email and password. New users are able to create an account by clicking “hey! I’m new here.”
L O G I N
Login screen included a section for both registered users and new users to sign-in. Usability testing proved that this screen was challenging optically and too busy.
T O G G L E B U T T O N
When choosing a grooming service, original designs used toggle buttons. The intention was that users would choose one option and move to the next section. However, usability testing showed users chose multiple service options. This proved to be an issue needing correction as only one option should have been available.
R A D I O B U T T O N
Radio buttons are used when there is a list of two or more options that are mutually exclusive and users must select only one of them. A change from toggle buttons to radio buttons proved to be the iteration needed.
E X C L A M A T I O N P O I N T
In attempts to draw attention to potential add-ons for the grooming I placed red exclamation marks next to service add-ons which were options that users would be able to include in their grooming service. However, learned through usability testing, users thought that the red exclamation mark meant that the option was not available.
“B A R K” M A R K S
Replacing it with “barking” expressions and adding a key on the bottom enabled users to understand the call for attention.
Future iterations may consider a change in color for the “bark” marks as red may be too assertive of a color.
C O N F I R M
At the checkout page, I made the button labeled “confirm”. Users were unclear if they pressed that button if their credit card would be charged or if it was just meant to confirm that the credit card information was entered correctly. The fix to “pay” brought clarity to the the user and a solution to the initial roadblock.
P A Y
The fix to “pay” brought clarity to the user and a solution to the initial roadblock.
Logo exploration brought me to analyze the puppy village logo. We see the neon orange and yellow used. A rather busy typeface. A grey bar behind the logo. A drop shadow. Oh, and I forgot to mention the Korean words. Collectively, it is a rather chaotic logo which would benefit with a refresh.
Using these emotional responses, I chose colors which coordinated to those emotions. This orange/red offers excitement and happiness. Yellow showcases friendliness and fun. And blue grounds the palette as it represents trust and dependability.
Analyzing the original Puppy Village website, users found the navigation throughout the website to be challenging. As users attempted to maneuver, we learned that the primary reason for difficulty was due to the multitude of colored links and imagery. Nine total colors are utilized causing user confusion. Because of this, we found it important to first start with bringing more focus on the color palette.
There is currently no means for customers to book grooming appointments and make purchases on the website. A user-driven e-commerce that is specific to each individual will allow for customer loyalty and repeat revenue.
E - C O M M E R C E
"How Might We" (HMW) statements are small but mighty questions that allow us to reframe our insights into opportunity areas and innovate on problems found during user research.
They are a rewording of the core need, which you have uncovered through user research and help teams focus on user needs and problems, rather than just jumping straight to solutions. These statements help inspire user-centered design!
Comparative analysis allows us to identify industry leaders’ solutions that excel. We’ve narrowed to three companies that excel in customer service and the sale of goods and services. First, The French Laundry, is a three-star Michelin restaurant well regarded as one of the best restaurants in America. Second, Burke Williams Spa, a wellness and rejuvenation spa offering world-class wellness packages. And lastly, Chik-Fil-A, a nationwide market leader in the fast food market known for fast and friendly processes.
While we have the existing website to work off of, it is vital to understand the competitive landscape to give an idea of what user experiences are standard for the dog grooming and pet store market. We do this through competitive analysis.
We’ve narrowed down two big box stores, Petco and Petsmart. Additionally, local small shop competition include MudBay, PetCentral, and PetPros.
A complete e-commerce system was created for Puppy Village. This allowed guests to register to the website, select grooming services and products from the Puppy Village store and complete a full check-out though payment pages. As we progressed from sketches to wireframes to mid-fidelity prototypes, we hosted usability tests at each stage to discover issues that needed to be addressed and created the appropriate iterations.
P R O T O T Y P E