Sulien Design
Sulien Design
  • Home
  • UX Design
    • UX Overview
    • KC Vet App
    • Parystri Cosmetics
    • Green Joy App
  • Graphic Design
    • GD Overview
    • CFAL Magazine
  • About
  • Contact
  • More
    • Home
    • UX Design
      • UX Overview
      • KC Vet App
      • Parystri Cosmetics
      • Green Joy App
    • Graphic Design
      • GD Overview
      • CFAL Magazine
    • About
    • Contact
  • Home
  • UX Design
    • UX Overview
    • KC Vet App
    • Parystri Cosmetics
    • Green Joy App
  • Graphic Design
    • GD Overview
    • CFAL Magazine
  • About
  • Contact

VETERINARY MOBILE APP

Paper Wireframes

The quick and easy way to sketch with the paper wireframes, gave me the confidence to create new solutions to address the users pain points and to have the right solution to start the digital versions.


* Stars were used to mark the elements of each sketch that would be used in the inicial digital wireframes.

digital wireframes

The feedback and findings from user research, where used to solve the users problems on the screen designs.

low-fidelity prototype

Set of digital wireframes used to create a low-fidelity prototype. The main user flow connected was Schedule a Veterinary Visit and this way the prototype could be tested in the usability study.

Figma Interactive Prototype

Usability Study: Findings

Two rounds of usability studies were conducted. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.


Findings from Round 1

  • Users want to have 2 ways of payment: online and in-person.
  • Users want to type the reasons for the visit instead of selecting them.
  • Users want to add the scheduled appointment to their digital calendar.


Findings from Round 2

  • The Schedule Preview window was confusing.
  • Continue buttons were in places where fill out forms process was incomplete.
  • Users need to have access to the Schedule option from more than one place. 

refining the design

Mockups

The first digital versions were useful to perform the usability study, after which I was able to reorganize the information and hierarchy of the homepage. I created the Appointment Notice section in a prominent position with the call-to-action Schedule button, that was exchanged with the Emergency button, now in the bottom navigation bar.

After the 2nd usability study I realized that users were trying to edit the text, taping over the rectangles instead of using the Edit button. Then I unified all the text in a gray area, changed the outline color of the pictures from orange to gray and I renamed the button Edit for Back.

Mockups from the Schedule User Flow

High-Fidelity Prototype

The final high-fidelity prototype shows 2 possible flows to Schedule a visit: from the Homepage and from the Pet Profile

Figma Interactive Prototype

Accessibility considerations

UX Accessibility is a measurement of a user's ability to use products/services, the extent to and ease with which they can meet their goals.

  • The color scheme was tested to make sure will be accessible for color blind impairments. The online tools used were: color.adobe.com and coolors.co.
  • The app was offered in 2 languages: Spanish and English to start.
  • Pictures were used to identify pets and doctors beside their names, making easier the selection process.
  • Icons helped to navigate easily and quick through the app.

Takeaways

IMPACT

The KC Vet app is focused in meet the users needs and that's the feeling you get at the time to interact with it. "The app is very easy to use. It has a smooth and appealing way to book a veterinary visit.", quote from peer feedback.


WHAT I LEARNED

"While designing the KC Vet app, I learned that users interviews are the main source of truly user need finding. Accessibility is crucial in order to facilitate the experience to more diverse user spectrum. After running two usability studies the feedback obtained is precious to enhance the app's design."

Next steps

One

Three

One

Conduct another usability study to check if the pain points were correctly addressed.

Two

Three

One

Keep doing user research to find in the way new user needs.

Three

Three

Three

Perform small survey within the app to have real time feedback of user experience satisfaction.

other UX case studies

Parystri Cosmetics

Parystri Cosmetics

Parystri Cosmetics

read details

Green Joy App

Parystri Cosmetics

Parystri Cosmetics

Read Details

Copyright © 2024 Sulien Designs

All Rights Reserved.

Your cookies can help us!

We use cookies to analyze our website traffic and optimize your experience.

No, thanksYes, sure!