Tailster Case Study

Prototype Quick Links

My Pets

Desktop – Mobile

Pet Profile

Desktop – Mobile

Live Booking

Desktop – Mobile


The Brief – Part 1

The Brief – Part 2


My Approach

Discover – Define – Design – Deliver
  • Understand the problem statements
  • Review existing Tailster branding and experience
  • Research other pet service providers
  • Persona creation
  • Sketching/wireframing and ideation
  • UI toolkit
  • Visuals in Sketch (mobile & desktop)
  • Prototyping in InVision
  • Next steps

Understanding the problem statement

My interpretation of the task is to improve the usability and visual aesthetics of Tailster’s pet profiles and bookings. Ultimately this will encourage users to be more engaged by the service, interact with the functionality and share/promote the service on social media.


Tailster Observations

  • Inconsistent CTAs in terms of colour, size and shape
  • What is the purpose/value of the heart icon on the profile picture?
  • No obvious journey or primary action
  • Check accessibility of orange text
  • Only social media share option is Facebook

Competitor Analysis

After reviewing the Tailster online experience I looked into some other Dog walking service providers. I signed up to them so I could review their pet profile pages. I also looked at some apps that use GPS tracking for inspiration.


Persona Creation

Without data about the customer base, I have created a persona based on assumptions about one segment of Tailster’s audience, their values and needs as a dog owner.


Notes/Ideation

After gathering research, I began noting down some potential ideas to explore.


Sketching/Wireframing

Sketching out my ideas, I felt that the pet profile page would be best split into 2 pages. 1 as a simple overview where the user can see all of their pets in one place, and one that goes into more detail with the full pet bio and photos. I also wanted to simplify the Bookings page and have a timeline in the form of an infinite scroll, much like social media such as Instagram, highlighting the maps and photos from each walk.


Accessibility

The orange colour (#FF7F16) Tailster currently uses in its UI for text or as a background colour to text is not accessible and doesn’t meet AA standards. Going forward in my designs this colour should only be used as a supporting colour. I have taken the green (#008165) used in Tailster’s branding on the homepage. This meets AA standards and so can be used for text links, CTAs etc.

Source: https://webaim.org/resources/contrastchecker


UI Toolkit


The UI

My Pets

Prototypes are available here: Desktop & Mobile


Pet Profile

Prototypes are available here: Desktop & Mobile


Live Booking

Prototypes are available here: Desktop & Mobile


Next Steps

Given more time on this task I would proceed as follows:

  • Map out the user journeys
  • Design for alternate scenarios, e.g. where an owner has more than 1 dog to be walked or no images have been uploaded
  • Design the expanded state for images whereby users can view a larger image and share it to their pets profile or their social media e.g. Instagram
  • Conduct usability testing to establish the ease of use of the components and journeys
  • Conduct user testing/focus groups to determine the perception of the brand with the updated UI

Thank you for reading!