Balancing visual organization & play for a dog daycare’s site
More options, more decisions
Pant Dog Center is a small, local business in South Philadelphia that operates a dog daycare and offers a range of other dog services. When Pant opened 8 years ago, they were the only dog daycare in the neighborhood. Now, there are 4 other dog daycares within a half mile radius.
For dog owners in the area, having more options means more decisions. They’ll need to spend more time and effort shopping around and comparing places. I set out to redesign Pant’s website knowing that it’s crucial for dog owners to easily find what they need and understand what makes Pant unique from the sea of dog daycares.
| Role | UX/UI Designer, Copywriter |
|---|---|
| Scope | Website redesign (Client project) |
| Tools | Figma, Miro, Airtable |
| Timeline | 85 hours |
Laying the groundwork
Research Plan
Clarifying goals
Before diving into my research, I had a kickoff meeting with the client to understand the business’ goals and values and also outlined what I wanted to uncover from my research.
Research goal
I want to understand what people value when selecting a business for dog services to redesign Pant’s website so users can easily explore and find what they’re looking for.
Pant’s goal
Pant wants to be more than a dog daycare and be a go-to community resource for dog owners in the neighborhood.
Looking at direct & indirect competitors
I did a competitor analysis to look at other dog daycares’ websites and see how they talked about themselves and the services they offered.
I chose 3 direct competitors near Pant and 1 indirect competitor across the pond in London. I included an indirect competitor to see where there were similarities and differences with a different target market.
The competitors
Canine social club
A dog daycare where dogs can learn healthy social skills to become the best versions of themselves.
Wag days
Pet resort that provides high-quality care and services in boarding, grooming, training, and daycare.
Barkadelphia
A dog daycare that offers the best care at an affordable price where they treat your dog like their own.
King’s dog daycare
A dog daycare & cafe devoted to both dog owners and dog lovers and believes dogs are more than mere pets.
Findings
- Like Pant, lots of places offer more than just dog daycare. Wag Days, a direct competitor, offers 3 other dog services. King’s Dog Daycare, the indirect competitor, had unique operations and services–a cafe and “Pet-a-Pooch” sessions for people to just play with dogs.
- Don’t just say what makes you unique, show it too. All dog daycares have a clear value proposition but only 2 have strong branding on their website that’s memorable and distinct.
- Accessibility should always be a priority so everyone can see and read the website. All websites had accessibility issues, including issues with color contrast and responsiveness.
- Make sure information is thorough, succinct, and readable. One dog daycare had too little information and another had plenty but the text alignment made some sections hard to read.
What matters to dog owners?
I conducted five 30-minute interviews to understand why & how people search for dog services, what people look for on those websites, and what people value in a small business.
The participants
My participant criteria was dog owners who have been interested in dog daycare, walking, and/or training services.
Since I wanted to understand people’s wants, expectations, and challenges in their search, it wasn’t necessary that people actually chose a place and used the service. They just needed to have looked into it and shopped around.
Sifting through findings
Interview insights
Group, shuffle around, repeat
I took my interview notes into Miro to do affinity mapping.
The process
I used different colors for each participant. Each sticky note has 1-2 quotes, notes, or observations from the interview.
Then, I started to label the sticky notes with high-level groups. The largest group was wants & needs from a business followed by deciding factors.
Taking the leap
I kept repeating the steps of creating clusters, finding themes, and regrouping notes until I ended up with these findings and insight.
Key insight
It’s a leap of faith to trust someone else to care for your dog but people are willing to if it adds to the happiness and enrichment of their dog’s lives.
“Ultimately, I’m leaving my dogs with strangers for a while.”
“It’s important that you can see if the staff really like what they’re doing.”
“Most of all, I want to know they take good care of the dogs.”
Creating trust
When it comes to trust, people decide from first impressions and initial interactions whether or not to trust a business. Trust is established through:
- Good reviews
- Clear information
- Qualified & caring staff
- Transparency on pricing
- Clear expectations
- Sense of community
“Something that was unexpected as I was searching was the overall friendliness of the staff.”
“As I’m going through a website, I want to get a good vibe in how they talk about the dogs.”
“Some websites didn’t look professional & looked like they aren’t very organized.”
A website plays a huge role in gaining (or losing) someone’s trust from the start so I made sure to keep this in mind later on in the design process.
Creating the blueprint
information architecture
Time to organize content
I combed through Pant’s digital content not only on their website but also their social media and customer portal to take stock of all of their content then decide on next steps.
Inventory
I organized content into the following categories:
- About
- Testimonials
- Events
- Daycare
- Walking
- Treadmill training
- Walking training
- Group classes
- Drop-off training
Audit
Then, I decided what to keep, remove, or update.
Keep- Their story and brand keywords
- Features and benefits of their services
- Information repeated on different pages
- Information on the customer portal or on social media that isn’t on the website
Re-mapping the website
Now that I had a high-level view of the content I needed, I looked at the current sitemap to see what, if any, changes needed to be made.
Pant’s sitemap
Previously, the sitemap and labels didn’t make it clear where to go for what.
The Home page included information about daycare and walking. It wasn’t clear what the “More” for the Training Treadmill & More page included. Information to get to know Pant and about dog walking was on both of those pages.
Updated sitemap
Now, there are clear and separate pages for each category of content. I created a secondary menu for Services after exploring a flat navigation.
I wanted it to be immediately clear what Pant offered and was concerned that a secondary menu would bury their services. However, the tradeoff was clutter and users having to mentally separate and group daycare, training, and walking as services themselves. Since users would have to click into the menu on mobile anyway, this wasn’t the solution.
Sketching ideas
I sketched my low-fidelity wireframes with pen and paper to stay focused on quickly exploring ideas and to avoid getting carried away with details that weren’t needed now.
Home
Rather than having all of the services on the primary navigation, I added an overview of services to the homepage so that users could quickly see what Pant offered.
Contact
Pant’s sign-up process for a lot of their services involved contacting Pant directly to coordinate, so it was worthwhile to create a separate contact page for users to go to.
Services
With daycare, training, and walking, I focused on consistency with similar sections both in their layout and order on the page so users have a clear and consistent flow of information from page to page.
Defining the brand
Branding
Taking inventory again
I looked at Pant’s logo, colors, photos, and language on the website and social media to come up with some words to define their brand.
Brand adjectives
Pant is friendly, cheerful, dependable, and lively.
Creating consistency
I decided to use Pant’s existing logo since it reflected the playfulness of their brand and because the scope of the project was a website redesign and not a rebranding.
However, I did update their color palette since they used slightly different colors for their logo, website, and social media and I wanted a cohesive set of colors to represent their brand.
Pant’s logo, website, & social media
Updated color palette
Primary
Secondary
Neutrals
Show & tell
One of my findings from my competitor analysis was to both say and show the business’ brand and personality. I didn’t want to stop at just a friendly tone and a defined color palette to communicate Pant’s brand.
Sparking my imagination
I went to other websites for inspiration, especially since it was out of my comfort zone designing something with lots of color.
I looked at websites for pet businesses and video games since one is in the same industry as Pant and the other is also about fun and play. I took notes (and screenshots) of borders, sizing, and layouts that stood out to me.
Putting it all together
design
Doing some heavy (copy) lifting
As I thought more about the visual elements and layouts, I thought more about the content for each section. Another competitor analysis finding was to keep information thorough but succinct and readable. I needed to do some legwork in rewriting Pant’s existing copy.
Before
Like my content audit earlier, I looked at each section in detail and decided what to keep, update, or remove.
I decided to keep Pant’s keywords and phrases, update redundant information and jargon, and remove information that belonged elsewhere.
After
Then, I relied on visual design principles like hierarchy and balance to visually organize my updated copy.
Tapping into the inspiration I got from other sites, I used playful images and borders to show Pant’s personality.
Finding the right order
With different sections coming together visually and content-wise, I revisited the flow and order of sections on each page.
Pricing last?
When I created my mid-fidelity wireframes for services like dog walking, I initially ordered the page so Pant’s features were highlighted first and pricing was down towards the bottom. I thought it would be best to first make the case of why people should choose Pant before showing the cost.
No, pricing first
However, that didn’t prioritize users’ needs. My user interviews uncovered how transparency on pricing helps to build trust. By having it at the bottom, I was burying that information and making it hard to find. For my high-fidelity wireframes, I moved the pricing section towards the top of the page.
Making it responsive
Once my desktop screens were almost finalized for usability testing, I tackled my mobile screens. While some sections just needed a change in layout or spacing for mobile, other sections required a different solution.
Adapting to mobile
On the dog training page, I had separate cards for each of Pant’s training programs. Even though they all had different information, I followed a consistent format so users can easily understand what each one offered and not feel overwhelmed.
On mobile, showing all of the information would’ve made the page incredibly long so instead, I collapsed the cards. Because of my consistency with the format, I easily implemented my 1 solution to the 5 training cards to make the page easy to navigate on mobile.
Desktop
Mobile
Test, reflect, & revise
iterations
Testing, testing, 1, 2, 3, tasks
I conducted a moderated usability test with 6 participants—3 participant tested mobile screens and 3 tested desktop screens.
The 3 tasks
I tested the following tasks based on Pant’s 3 services: daycare, walking, and training.
- Check prices and requirements for dog daycare then sign up
- Check dog walking availability and inquire about additional times
- Search for an obedience class where dogs learn stay and leave-it then sign up
Findings & changes
While users found the tasks for daycare and walking straightforward, the task for training brought up points of confusion for users and reflection for me.
Be conscious of my use (& misuse) of design patterns
When making design decisions, be mindful of the design patterns the solutions are drawing from and whether or not it fits.
For the top half of this page, 4 out of 6 participants thought the photos in the “Training at Pant” section were anchor links.
I realized participants thought they were cards because of the format and content. Since it highlighted specific training programs and the supporting text provided a little preview, people wanted to click on it to learn more and jump straight to that part of the page.
I ended up removing the “Training at Pant” section since the summary of options was redundant, created confusion, and took up valuable space at the top.
Look out for breaks interrupting a page’s flow
Don’t just think about the order of sections users expect to see on a page. Also think about what users expect as they scroll and what adds to or disrupts that flow.
For the bottom half of this page, 4 out of 6 participants thought when the reached the “Philly Unleashed” section, that it was the end of the page.
I included this section to differentiate the training programs run by Pant and the ones in partnership with Philly Unleashed. However, including that section interrupted the flow of the page and signaled to participants that this was the end of options rather than the start of another training section.
I ended up removing the “Philly Unleashed” section since the separation between different types of training programs was nuanced and disruptive to the flow of the page.
The final steps & result
prototype
The redesign
While staying true to Pant’s brand, values, and voice, I reimagined the website to improve the site structure, visual design, and content for users to easily find what they’re looking for and, ultimately, be able to put their trust in Pant.
Desktop prototype
Mobile prototype
Wrapping things up
I presented the prototype in a final meeting with the client, and she loved how information was presented in a clear and readable way and expressed how happy she was with how the design was clean, accessible, and pretty.
The handoff
UI kit
My handoff was to the client and her assistant and not a Developer. I prepared materials for the client in both Figma and Google Drive, including a UI kit.
The implementation
Before
My design
After
The client implemented most of my redesign with a few tweaks. Some changes were due to technical constraints with her platform and some were last-minute changes she made.
Reflection
With this project, I have a few takeaways in design and in working with clients.
Communicate the why’s behind big & small changes
With some of the client’s changes after handoff, I realized I focused on explaining big decisions like the new sitemap and page structure and less on the small details like button labels and CTAs. The why’s behind small but fundamental parts of UX design are important to communicate too.
Don’t make assumptions on what people know
From my client communication, I realized I need to be conscious of what is straightforward to me from my perspective as a UX Designer that isn’t to someone else. I think this is something to be mindful of in general with communication.
Get inspired
I spent a lot of time finding inspiration from other websites, exploring ideas, and sketching. This was such a helpful practice to lean on whenever I felt uncertain or stuck in the design process.
