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.
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.
Demographics
Gender
Age
Education
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 Journey Map
Persona: Dr. Mohammed
Ordering Process for the Pharmacy via App
Main User Flow
Ordering Process
Information Architecture
Wireframes
UX | PRODUCT DESIGN | VISUAL DESIGN
B2B Medical Mobile
App Design Case Study
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
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
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
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
