Easy Vet

Colgate-Palmolive

UI Design Challenge

 

One of my favorite parts about interning at Colgate-Palmolive is the design challenges we do every couple weeks. It allows me to refine my design skills and design interfaces I would have never gotten to design for otherwise.

Topic: Joy

Duration: A couple hours.

Tools: Figma

Prompt: Design for a medical service using 2-3 elements from the image below.

Screen+Shot+2020-06-30+at+10.41.18+AM.jpg

The three elements I chose are:

✔️Play

✔️Energy

✔️Surprise

designprocess1.png

Ideate

I began with thinking of a concept that was important to me. I really wanted to design something that would solve a problem I think myself and many users would have.

The first thought that came to my mind was dogs! I love dogs, have a dog and thought that this would be a great place to start. I also associate animals with joy and most online veterinarian/pet services interfaces have a lot of room for design improvements.

I have a dog that has unique needs and from my experience being a pet owner, some vets understand his needs much better than others. He wasn’t even able to be properly diagnosed till his third vet visit! Vet services can be a hit or miss for pet parents of animals with special needs, especially exotic animals, and I wanted to design a website that would make their lives easier.

That’s when I came up with Easy Vet, a pet service that helps you find your perfect veterinarian match based off specific data and preferences you provide. You can filter from hours to insurance types accepted to vets specialising in a specific area. Easy Vet also scans reviews online and catches information in positive reviews that reflect the data you’ve entered to provide you with your best match.

Easy Vet is a pet service that helps you find your perfect veterinarian match based off specific data and preferences you provide. You can filter from hours to insurance types accepted to vets specialising in a specific area. Easy Vet also scans reviews online and catches information in positive reviews that reflect the data you’ve entered to provide you with your best match.

designprocess2.png

Design

The three main parts of the website I designed are:

➖Landing Page

➖Filter

➖Map

LANDING PAGE

The landing page was a space for all three elements, play, energy and surprise, to come out.

Color: The orange image inspired the color schemes for the rest of the page. To me, saturation and brightness bring out joy.

Type: I used San Francisco for a more universal feel considering this is a medical services page.

Scrolling on landing page

Shapes: I used blobs so bring a whimsical, fun element to the style.

FILTER

For the filter view, I wanted the user to feel like they had many of their preferences covered.

Specificity: After the user selects their preferences from the filters, they can type additional information in the last input box and the website will find positive reviews all over the internet using those words keeping in mind what was previously inputted to recommend vets near them.

MAP

Based on the users preferences, the map view shows vets near them ranked highest to lowest on how closely they fit the users requirements.

Accessibility: I believe accessibility is really important, especially medical interfaces that have all types of users. In order to accommodate for accessibility, I added a dot, a line and a triangle under the location icons as a visual indicator so color was not being relied on solely to show difference in matches.

designprocess3.png

Prototype

Below is the Figma prototype for you to play around!

 
 

LOOKING BACK

Considering the fact that this was something that I did during my free time (which isn’t a lot when you’re working on super demanding, impactful projects), I’m happy with where it is at. It was purely a UI challenge, but I could see this being an interesting topic that can be explored more in depth beyond the visual level.