Project description

A veterinary application for a private, small and local veterinary clinic - "Djurdoktorn" (fictitious). An informative, simple and easy-to-navigate veterinary application that makes life a little easier for the small animal owner by collecting and managing all information (insurance information, medical records, previous treatments, medicines, etc.) about their animal as well as contacting a veterinarian or easily booking a clinic visit. Everything easily accessible on mobile.

Example views from the application

Purpose and soft goals

The veterinary application should help a small local clinic to provide increased digital service and to become stronger in the competition with the large veterinary companies. Through better service, the app helps to increase the number of loyal customers to the veterinary clinic. The app saves time, provides increased accessibility and security.

Research

I analyzed and compared several veterinary applications (Agria care guide, Agria animals, Evidensia, Fass, Anicura). How does this type of application work and look, what are the building blocks throughout? What is good and what could be better from a user perspective?

Also on closely related apps that also have in common the provision of security and care assistance: Knodd, DoktorOnLine, Apoteket.

By documenting by noting pros and cons, how are the interfaces and services experienced? Saved screenshots of feeds that I found user-friendly and visually appealing.

I compared the websites of smaller animal clinics and consistently they were of lower user quality both in terms of function, appearance and service compared to the larger clinics. Started from the question of whether the applications corresponded to the pet owner's (my personas) needs, which are summarized with the following keywords: Safe, simple, accessible and compared, among other things, functions and UX solutions, UI/Visual interface, personal experience and service.

Insight about the veterinary industry

As a dog owner, you are often in contact with a veterinarian both at the local smaller clinic in the immediate area and with the larger players such as Evidensia, Blå stjärnan and others. The large clinics have significantly greater resources to spend on, for example, their own veterinary applications, while the local vets often have consistently less good websites, often without a digital online booking system. The pet owner/customer is advised to contact the local by telephone during limited telephone hours. This can be a decisive factor that contributes to out-competing the private, smaller and local actors, which is a shame as they often provide a more personal and emotionally rich service on the spot. See the stakeholder mapping below.

Stakeholder mapping

Persona

Customer journeys

For the persona before and after the solution and the journeys for the local veterinary clinic before and after the solution with the mobile application.

UI/UX design

Site map

The site map includes more pages and functions than the prototype had as for the first test section. The gray colour in the site map are not yet developed.

Wireframes

created my wireframes as quick and general sketches of roughly how I wanted to make my application. Basically, they agree quite well with the end result. I decided during the course of the work not to have a hidden menu in the head, but the buttons/functions are in the footer and the information and personal data as small icons in the header.

Wireframes gave me a good start to make the mockup and the prototype. A few pages were added later when I worked out/visualized the entire booking process as well as pop-ups.

Style guide

Logotype, graphic elements, primary and secondary colours, icons, text formating and components with variations.

I created the style guide while testing the design on one frame/page. I wanted a clean and bright overall feeling to the app and chosed a turquoise color as Highlight along with neutral off-white (not chalk white for a softer result) and light gray.

The gray was adjusted to a lighter tone after feedback for increased contrast. The choice of color was deliberate as I wanted to visually signal that the app is trustworthy, safe, etc. I also wanted to capture the tone of other health-related apps that are often associated with a green (hygienic) color scheme.

Photos of animals contribute in a contrasting warm sepia tone. The black text color is not completely black to avoid too "strong" contrasts. Buttons and form surfaces are rounded for a more inviting feel.

The font Marmalade was chosen for a slightly more personal expression, it is strict but has a softer shape than, for example, standard sans serifs. Softens the overall impression but still conveys credibility with good readability. Also matched the logo font Gugi.

For the bodytext and the icon texts, I chosed Martel, which gives a better readability in small sizes with a slightly discreet serif. First I made all button texts white but changed to black for a better readability.

Mock-up and prototype

Letting users test and give feedback was highly valuable and helped me make a lot of tweaks for the better. Below is shown the three flows and result from the booking.

Flow one - Login

Flow two - Register pet

Flow three - calender booking

Result after booked a visit in the calander

Insights and adjustments

After the user tests, thorough adjustments were made to all pages:

• Reduce and move the logo to the left in the header.

• Minimize mobile icons (battery, Wifi)

• Center login page. Consistently careful to adjust all graphic elements according to grids.

• Resized from iPhone 8 to iPhone 11. (even though it worked on the phone, the pages looked very empty and they didn't fill the pages even though they were responsive)

In addition to the points above, I have consistently added/adjusted the following:

• Added icon for "user's account information"

• Aligned all graphic elements with the grid (buttons, headings, surfaces, etc.)

• Added help and info pop-ups at buttons that involve different decisions, e.g. Do you really want to…, Are you sure…, Thank you for booking…etc.

Flows and handoff with Zepplin

Zeplin is a great tool for handing over designs to developers in projects.

Example of one flow - register your pet

Example of the style guide in Zepplin

Summary

Personal development

All the routines and structures we learned in the project have helped me to develop a deeper knowledge in application design and make my work so much easier. My designs are often compact and rich in detail with a lot of color. In this vet app design I wanted to keep it simple and minimalistic which was a bit of a challenge for me. I have also learned more about responsive design.

The choice of project area was easy because, as a pet owner, I could familiarize myself with the needs of the target group and persona. I wish that my local vet had a wider digital service and the service of being able to book clinic visits directly via an mobile application. The idea prototyp is based on interviews with pet owners who have the same problems and needs as my persona.

Conclusions

My conclusions are based on assumptions gathering throug insights in this project.

It is common for smaller and local veterinary clinics to have fewer resources than their larger competitors. For example, you often see that their digital service extends to announcing which telephone and opening hours are offered.

When it comes to care, a more personal service is often offered at the local clinic, which is a security for both the pet owner and the pet, but they can rarely afford to hire specialists. And with the tougher competition, loyal customers also become fewer which is a downward spiral or trend. Through interviews and research, I have been able to establish that if the pet owner gets their needs satisfied, the smaller local veterinary clinic is always chosen first. Because the personal and safe are highly valued. Therefore, I have made assumptions and highlight in the project some of the services that could strengthen the small veterinary clinic.

By offering pet owners a tool where they can manage all important information about the animal in their phone. And if an accident happens, the app must feel safe and meet all the requirements necessary for the pet owner to be able to quickly get the right care for their animal. At the same time, the veterinarian receives all the necessary information to be able to treat the animal based on previous records. This saves time, increases accessibility and security, and will increases the number of loyal customers to the veterinary clinic - Djurdoktorn.

Execution: The task was performed individually

Schedule: 3 weeks

Deliverables: Written submission containing a detailed brief, concept idea, a style guide, wirefram, prototype and mockup design made in Figma, documentation of all used tests and insights, an mobile application, a written report and a presentation.

Tools: Figma and Illustrator