TUG

ui/ux case study - Product Design

background

Alex, the owner of TUG, contacted me to design his website and possibly create an app. I couldn’t pass up the opportunity. As I got to know him, I gained a better understanding of why he started this new venture.

He has been around dogs all his life, and for the past 11 years, settled with two of his own, Tokyo and Kiba who are both a Shiba Inu mixed breed. Alex would routinely dog sit and board dogs for a few friends who traveled and vacationed. He always thought that it would be great to do this as a full time job, so he can be around dogs all the time, and help people out with any kind of dog services they would need.

The mission at TUG is to provide professional pet care visits, walks, grooming to animals in their homes, and take them out and about, so their owners can relax during their time away. Whether for traveling, hospital stays, honeymoons, or family emergencies, their clients know that their pets are well cared for and happy.

And this now brings us to taking the next big step in starting his business!

Process

phase1: Define

Project goal

Alex hopes for TUG to get a local and online presence to help out people in the community with an affordable service that makes their lives easier.

Provisional Personas

• Retirees

• Mobile Impaired/Disabled

• Single Parents

• Business Travelers

• Busy Parents

• Young Professionals

project vision

Alex really likes the color orange and wanted to incorporate it within the interface design, logo, and marketing material. Here is the mood board we came up with to show happy dogs, activities and bringing in the brand colors.

phase 2: Research

Competitive Research

Starting with competitive research, we picked the pros and cons of each website or app. Gathering this data helped us get on the right track to make a product that will have a lasting impression and a good user experience.

feature roadmap

User research

We created a list of questions pertaining to pet owners about their pet’s exercise routines, eating habits, weight, and if they have a need for dog services. 

interview questions

1. Is your dog getting the right amount of exercise per day?

2. Is your dog overweight?

3. Do you have a busy schedule?

4. Would you need a dog sitter when on vacation?

5. Do you have someone reliable to take care of your pet?

6. Do you have difficulty performing basic grooming for your pet?

7. Does your dog have too much energy?

8. Would you benefit from having a dog walker or sitter?
   If yes, could you tell me how?

9. What would make you trust a service like this?

10. Do you currently have a dog walking service?
    If yes, are you happy with them?

survey

This survey was based on the need for dog or pet services and how beneficial it would be for the participants either for grooming or dog walking etc.

User Needs

Phase 3: Understanding Users

personas

Identifying personas will help us to set up specific needs for the users and help structure the product. We were able to create two personas, one as the user or client needed services and two as a student wanting a job with TUG.

empathy map

To further the persona process we can move to creating empathy maps to find out what the persona says, thinks, does and feels.

phase 4: Goals

Understanding business goals is just as important as understanding user needs. Without that, the chances of creating useful and viable products are low.

The business pays for the product. The more value the product brings to the company, the higher the probability that a product will be funded, and supported for a long term.

phase 5: Ideation

Information architecture

Information architecture (IA) is, like a blueprint, a visual representation of the product’s infrastructure, features, and hierarchy. The level of detail is up to the designer, so IA may also include navigation, application functions and behaviors, content, and flows. There is no set limit to the size or shape of IA; nevertheless, it should encompass the generalized structure of the product so anyone (theoretically) should be able to read it and understand how the product works.

sitemap

A UX sitemap is a hierarchical diagram of a website or application, that shows how pages are prioritized, linked, and labeled. If a user flow is like the street view details, the sitemap is like the bird’s eye view.

phase 6: Wireframes

Going lo-fi, we can layout a simplified outline of the product to help out with the design stage for mockups and prototypes.

lo-fi wireframes

phase 7: visual design

design system

The design system gave us a collection of reusable components, guided by clear standards that can be assembled together to build any number of pages for the application and website.

UI Design & Responsive Pages

Responsive design allowed us to show the graphic user interface (GUI) design approach used to create content that adjusts smoothly to various screen sizes. With the appropriate sized elements, the screens automatically adapted to browser spaces to ensure content consistency across devices.

phase 8: User testing

We recruited five participants for testing the prototype. The prototype was designed for the process of signing up as a new user, completing onboarding then selecting a service to schedule followed by the payment process.

Testing results & feedback

The gathered feedback really gave us insight to how the experience was, what they notice and any suggestions they would like to see. 

The Affinity Map allows us to group feedback to categories related to the product. 

iterations

After we prototyped and gathered data from testing, we made the suggested changes to accommodate the user experience.

Most participants said the logo was hard to see and suggested finding better contrasting colors

The font in the navigation bar was increased to 20pt for better readability.

Participants showed frustration when selecting the date. The original prototype had you click the arrow, select the date then click the arrow to collapse the calendar. In the new prototype, the calendar collapses once the date is chosen eliminating a step to get to the time picker. 

In the first prototype no padding was added to the arrows. With the frustration shown from the prototype feedback a sufficient amount of padding was added to the new prototype.

3 of the 5 participants asked if they are going to be able to know more about the staff or walker they want to select. We added a “see profile” to the info card that you can click and will bring a pop card with the staff bio.

Prototype