Project Overview

Timeline

April - October 2021

My Role

UI UX Designer,

Product Designer

Tools Used

Figma, Miro, UsabilityHub

Vita Care is a B2B mobile app providing medical and personal care products to pharmacies, clinics, and hospitals around Saudi Arabia as a part of Tamer Group. The ultimate vision for this project was to automate and digitalize the purchasing process allowing 24/7 access to products and reducing human interaction.

Project Timeline

The project was divided into three main parts for a better visual representation of the events overview. Starting with the discovery stage all the way to the final product.

Frame 1115.png

Problem

The current industry practice depends on telesales, WhatsApp orders, or sales representatives physically visiting customers to take orders.

Goal

Our goal was to create a fully digital and automated purchasing experience allowing to order 24/7 saving customer's time.

My role

​My role in this project as a UI/UX designer was to take ownership of the app design, from concept to delivery. My responsibilities included: user research, wireframing, prototyping, usability testing, iteration, and collaboration with the development team.

Design Process

Design thinking is a human-centered approach to innovation—anchored in understanding customer’s needs, rapid prototyping, and generating creative ideas—that will transform the way you develop products, services, processes, and organizations. 

Design Process.png

Demographics

Gender

Gender.png

Age

Gender.png

Education

Education.png

User Personas

Personas are fictional characters that we created based on market research in order to represent our target audience. Creating personas helps us to understand our users' needs, behavior patterns, goals, and frustrations.

User Persona 1.png
User Persona 2.png
User Persona 3.png

User Journey Map

Persona: Dr. Mohammed

Ordering Process for the Pharmacy via App

Journey Map.png

Main User Flow

Ordering Process

Ordering Process User Flow.png

Information Architecture

App Map.png

Wireframes

Frame 9410.png
Vita Logo-01 1.png

UX | PRODUCT DESIGN | VISUAL DESIGN

B2B Medical Mobile

App Design Case Study

Wireframes.png

Usability Study

After completing low-fidelity prototyping, we conducted a usability study with real life users to see how well the app performs and identify any issues of the current design.

Method: Unmoderated usability study (usabilityhub.com)

 

Location: Saudi Arabia, remote (participants will go through the usability study in their own homes)

 

Date: Sessions take place on May 1-2

 

Participants: 10 people test the registration and ordering process. Each participant then completes a questionnaire

 

Length: Each session will last for 10-15 minutes - the expected length of time it will take to register and order products.

Research Questions

  • How easy/difficult was the registration process?

  • How long does it take for the user to select and order a product on the app?

  • What can we learn from the steps users took?

  • Are there any parts of the ordering process where users are getting stuck?

  • Is the payment process easy for the user?

Key Permormance Indicators (KPIs)

  • Time on task: How much time users spend ordering products 

  • Time on task: How much time users spend on the registration process

  • System Usability Scale: A questionnaire to evaluate customer feedback

Pattern Identification

  • 7 out of 10 participants know how to get started. This means that the interface is clear.

  • 8 out of 10 participants didn’t want to change anything. This means that the process is easy to navigate.

  • 1 out of 10 participants had pointed out the need for a finger scan. This means that some of the users will use the app through the older phone models.

  • 1 out of 10 participants thought that the home page is too long. This means that some of the users don’t want to scroll too far.

Design System

Based on the existing brand guidelines I have created a design system for this app to make the design and future iterations consistent and aligned

Frame 503136447.png
Frame 503136448.png

Log In & Registration

The login and registration process takes up some time for verification purposes. The user has to provide all the business information as well as the National Information Center information in order to get access to the products

Home

On the home page, users can easily find and choose products, categories, and vendors available. The app allows users to search by category, vendor, product, as well as by voice recognition and barcode scan

Frame 5031888.png
Frame 5031890.png

Profile

The profile holds important information about the user's account. There you can add/delete your addresses, contact information, bank cards as well as see your previous orders

Frame 503136449.png

Ordering Process

You can easily check your cart, manage the quantity, date, and time of the delivery, and choose multiple addresses in the bulk order

Other Screens

Frame 9407.png