Homepage redesign— a UX case study
Have you ever had a dog and dreaded to leave them with a pet boarding service in order to take that much deserved vacation? Or wondered which pet daycare service you can trust with your furry friend when you are at work?
If not, you don’t know how hard it is to find a trustworthy business that truly values your pet and offers a safe and comfortable space.
This case study explores the homepage redesign of a dog daycare and boarding business, aiming at increasing customer sign-ups and improving the user experience.
The Challenge
My professor had selected Mr. Muggles’ homepage to redesign. This case study spanned several semesters as part of a UX Design course, and took a combined 3 months and two weeks to complete. My role was to complete all the tasks solo and utilize my classmates and professor for interviews and feedback.
The design challenge was to increase user sign-ups for the pet services business. We were given full controls to change the homepage layout and text.
Understanding the problem space
First, I established a user persona based on assumptions of a typical pet owner’s behaviors, goals and pain points. This helped to understand more about the problem space before ideating solutions.
Brainstorm and Ideation
Crazy 8s is a great method to cheaply and quickly flesh out ideas on paper. This free flowing ideation technique helps to visualize the general layout.
Increasing Engagement
The current website only allowed for clients to call or email for services. It was crucial to establish online registration, which addresses the business’ goal of enhancing client acquisition. The first round of sketches explore ways to introduce the CTA.
Refining the Sketches
After sketching crazy 8s, I selected three options to explore further. By sketching them larger, it allowed me to focus a more on spacing and content.
Wireframing in Low Fidelity
I then created low fidelity wireframes in Figma based off of the enlarged sketches. This quick and cost effective method makes it flexible to change. You’ll notice realistic text here because I was instructed to create more of a mid level mockup.
Wireframing in High Fidelity
The wireframes were critiqued by my professor and I was able use the feedback to make adjustments before enhancing the design’s fidelity. They now included relevant images and text that aligned with the tone and goal of the business.
Since these designs were based on assumptions thus far, it was crucial to gather user feedback on the designs for usability and functionality. I needed to know if they were addressing the business goals as well.
Usability Testing
I created a testing guide to help facilitate the three interviews, lasting approximately 30 minutes each. The focus was to see the design through the user’s eyes and to understand how they were experiencing it. Asking open ended questions evoked more insight and depth in responses.
Data Organization & Analysis
I grouped the data using a whiteboarding exercise. Key takeaways were grouped into sections; what didn’t work, what needs improvement and what questions remain about the persona or problem.
This helped me recognize the obvious blockers in the design like making the CTA verbiage more clear and the user’s call for more details about the facility features and services.
Updating the User Persona
After the usability testing, I now have data to back up the user’s behaviors and pain points. When creating a user-centered experience, it’s important to have a good idea of the target user. I then applied these learnings to the next wireframe build which includes the sign-up process
Design Direction
I first created a short slide presentation to group key takeaways. My professor then introduced the four square method. It is a method to guide the focus of the design with specific emphasis on layout and content.
The pain points that were uncovered directly influenced my design direction, here’s why.
Designing for Layout
I found that users tend to scan over large text blocks and jump ahead to more easily readable information like bullet points or lists. A minimalist approach eliminated big text blocks and allowed other content like images and quotes to relay the extra information that the users craved.
Designing for Content
Users also requested more images of the facility, staff and amenities offered. Beyond a safe and clean space for their pet, users wanted to get to know the business. To gain user trust and loyalty, transparency about staff training and customer reviews have been a key focus.
Second Round of Ideation
Guided by the design directions, I sketched two rounds of crazy 8s, each one focusing on a design direction. Three sketches from the ideation session were starred and referenced for the wireframing next.
Final Wireframe
Taking the feedback from the user tests and combining it with the two design directions, I constructed a high fidelity wireframe. Adjustments to this design were made after receiving feedback from my professor.
End to End Task Flow
Competitive analysis with three different websites and their sign-up flows allowed me to note some pros and cons. With conventions and usability in mind, I sketched a sign-up flow for Mr. Muggles’ pet services.
Clickable Sign-up Flow in Figma
I then built a wireframe of the sign-up flow. This allowed for another round of user research to test the usability and user experience.
User Interviews
To test the functionality of the sign up flow, a clickable prototype was put together in Figma. I conducted three interviews, asking users to accomplish one main task:
Find out how to join the dog day care at Mr. Muggles and join.
Feedback analysis
Style Guide
With the clickable prototype updated, the next step was to create a style guide based on the original homepage. I tried to stay as close as possible to their playful and welcoming aesthetic.
The Solution
Then I applied the style guide to the final prototype revision to reflect color and typography. This was the final assignment in my UX Design certificate course.
Reflection
This project showed me that designs based on assumptions rarely come close to the version that ships. With my case study, without primary or secondary research, the redesign had lots of issues. I also learned that iteration is an ongoing process and is beneficial at multiple steps in the design journey.
Next Steps
To continue developing this project, I would conduct more user interviews and analyze the data for further refinement of the sign-up process. Then I believe this design would be ready to launch.
But the iteration doesn’t stop there, further testing could be done to get additional user feedback. To stay functional and usable, updates will be necessary as new user behaviors become apparent.
Open to critiques and suggestions you might have.
