Grace's Portfolio

Project background

DC Dog Sitting is a locally-owned dog care service based in Washington D.C., specializing in personalized pet sitting and walking. To better serve their customers, I aim to redesign their website, making it responsive and user-friendly. The goal is to enable customers to easily browse services and book appointments with minimal effort.

Research

Understanding the Problem

To validate the need for redesign, I interviewed eight users and observed them navigating the original DC Dog Sitting website. The research revealed several pain points:

Users struggled to find the booking section and key information about services.
Navigation was unclear, with small buttons and poor readability.

Competitor Analysis

To help redesign dcdogsitting.com, I conducted a competitive analysis of four major dog-sitting services: Rover, Wag!, Fetch Pet Care, and Barking Trails.

Rover and Wag lead the pack with their extensive networks and on-demand services, making it easy for dog owners to find sitters anytime, anywhere. Fetch Pet Care offers a more personalized experience with carefully screened, professional sitters, ensuring consistency and reliability. Barking Trails brings a local, community-focused approach, providing a more intimate service but with potentially fewer options. By analyzing these platforms, I aim to identify strengths and opportunities that can elevate dcdogsitting.com and better meet the needs of our customers.

Competitive Analysis Full Report

Define

Problem Statement

DC Dog Sitting is a locally-owned dog care service based in Washington D.C., specializing in personalized pet sitting and walking. They attract clients through referrals, website bookings and social media channels.

Desktop

Mobile

User Persona & Empathy Map

I created a persona based on the insights gathered from interviews, ensuring the redesign addressed the needs of local pet owners. The empathy map helped maintain a human-centered approach throughout the design process.

User Persona

Empathy Map

I brainstormed product features and prioritized them by necessity: must-haves for a successful launch, nice-to-haves if time allows, and those that can be added in future updates.

Prioritized Features

Using Whimsical, I created two user flows to illustrate how users will interact with the website, outlining the steps and actions needed to ensure a seamless and successful experience.

Design

Wireframes and prototypes

Starting with low-fidelity wireframes, I designed a new homepage that prioritized key information and clear calls to action. After validating the design, I developed mid and then high-fidelity wireframes for both desktop and mobile, ensuring the site was responsive and visually consistent.

Low-fidelity Wireframes

Full Figma File

Mid-fidelity wireframes

Full Figma File

Branding

The DC Dog Sitting website has the opportunity to enhance its visual identity, setting it apart from competitors. Strengthening the website's ability to communicate its unique value and fostering an emotional connection with visitors can help attract and retain a loyal customer base.

To address these branding gaps, I created a comprehensive brand style tile for the dcdogsitting.com website. This style tile establishes a cohesive visual identity and clearly communicates the unique value proposition to potential customers. It has a carefully chosen color palette, typography, button styles, and a unique logo. I selected the Late font for its clean, modern look and readability across devices. The colors were picked to convey warmth, trustworthiness, and professionalism, enhancing the overall user experience and strengthening the brand.

High-fidelity wireframes

After finalizing the brand style tile to ensure a cohesive visual identity, I moved onto creating the high-fidelity wireframes for both desktop and mobile platforms.

High-fidelity wireframes (desktop)

Full Figma File

High-fidelity wireframes (mobile)

Full Figma File

Prototyping

I then built an interactive prototype in Figma, focusing on the booking process. The prototype included booking an appointment, completing a new customer form, and navigating what services are offered.

Test

Usability Testing

I conducted usability tests with fiver users, focusing on tasks such as booking a service and navigating the site. The tests revealed:

The need or clearer navigation between services and booking pages.
Suggestions for improving the visibility of the logo and enhancing text readability.

Tasks:

Booking a service
Complete a new customer information form
Understand the services offered

Positive Feedback:

Users found the website easy to use, rating of 9.5 out of 10
The color scheme, logo design and overall aesthetic were well-received
Users appreciated the size and placement of product images, although they found the text a bit too small on desktop
The user interface was effective, allowing users to complete tasks quickly, with an average of 10 seconds per task

Challenges Identified:

Some users were confused about where to click to book a service from the homepage, suggesting the merging of the services and booking pages.
The "back" button on the last mobile screen was deemed unnecessary by several participants.
Participants found the text prices under the services section hard to read and suggested making them bold.

Next Steps:

Remove the unnecessary "back" button on the final mobile screen
Update the "Book Now" button to "Existing Customer"
Enhance the logo visibility by making its outline darker
Create a dropdown menu for the drop-in visits to clarify the payment process for dog walking and drop-in services

Iterations

The above iterations were made to refine the final product. Below is a comparison of the before and after, detailing the specific changes.

Figure 1

Figure 2

Problem (Figure 1)

Users were confused about the book now button.

Solution (Figure 2)

Renaming the "book now" button to "existing customer" differentiates it from the "new customer" button. This change helps users quickly identify the appropriate option based on their status.

Figure 1

Figure 2

Problem (Figure 1)

Users were confused when booking between dog walking and drop-in services.

Solution (Figure 2)

A dropdown menu was created. This change organizes the service options more clearly, making it easier for users to select the correct service without misunderstanding.

Figure 1

Figure 2

Problem (Figure 1)

Users suggest that the logo was not that visible on the website.

Solution (Figure 2)

I made an outline of the logo darker to help increase its visibility. A more visible logo enhances the brand recognition and ensures the logo stands out against background, improving the overall visual design.

Final Thoughts

Redesigning DC Dog Sitting website has been a valuable learning experience, especially in prototyping for both desktop and mobile. Key takeaways include the importance of clear navigation, distinct user pathways, and visual clarity in UI elements. I've also learned the value of user feedback in refining designs.

Moving forward, I plan to focus more on user testing, explore advanced prototyping tools, and stay updated with UX design trends. The next steps include implementing the redesign based on feedback, monitoring user interaction and iterating the design to enhance usability.

DC Dog Sitting

A responsive website for a local dog sitting business in
Washington D.C. (concept design)

Project background

Research

Understanding the Problem

Competitor Analysis

Define

Problem Statement

User Persona & Empathy Map

Design

Wireframes and prototypes

Branding

High-fidelity wireframes

Prototyping

Test

Usability Testing

Tasks:

Positive Feedback:

Challenges Identified:

Next Steps:

Iterations

Problem (Figure 1)

Solution (Figure 2)

Problem (Figure 1)

Solution (Figure 2)

Problem (Figure 1)

Solution (Figure 2)

Final Thoughts

Let's talk about your project.

DC Dog Sitting

A responsive website for a local dog sitting business in Washington D.C. (concept design)

Project background

Research

Understanding the Problem

Competitor Analysis

Define

Problem Statement

User Persona & Empathy Map

Design

Wireframes and prototypes

Branding

High-fidelity wireframes

Prototyping

Test

Usability Testing

Tasks:

Positive Feedback:

Challenges Identified:

Next Steps:

Iterations

Problem (Figure 1)

Solution (Figure 2)

Problem (Figure 1)

Solution (Figure 2)

Problem (Figure 1)

Solution (Figure 2)

Final Thoughts

Let's talk about your project.

A responsive website for a local dog sitting business in
Washington D.C. (concept design)