SHORT DESCRIPTION
Web app for pharmacies in Kazan with two main functionality: first, accounting for customer orders made through external applications; second, search and view customer prescriptions.
This is a web app that pharmacists use. Customers can come to the pharmacy and pick up their prescription medications. And pharmacists can also track orders placed through the VITAKIT mobile app, which I designed earlier.
About the project
The portrait of the user was outlined from the very beginning: pharmacists.
The basic functionality has also been defined in advance, as the app has become part of the overall ordering and delivery scheme:
The design goals for this application, specifically the functionality for the pharmacist, are derived from the points above:
Let's go over it in order, after the UI Kit.
The basic functionality has also been defined in advance, as the app has become part of the overall ordering and delivery scheme:
- Consumer orders via the VitaKit app (and selects "pick up myself")
- Pharmacist collects the order
- Consumer goes to pharmacy, shows order number/QR or shows prescription number/QR
- Pharmacist dispenses items as per order/prescription
The design goals for this application, specifically the functionality for the pharmacist, are derived from the points above:
- Make functionality for viewing and interacting with orders (made in the VitaKit mobile app);
- Make the functionality for quick and easy search, dispensing drugs from prescriptions;
Let's go over it in order, after the UI Kit.
UX Research
Paper wireframes
By making paper wireframes of each application screen, I made sure that the elements that would go into the digital diagrams would be well suited to address the users' pain points.
The task was to make this application in the shortest possible time. Fortunately, I had a chance to talk to the development team before we started the design, and we decided that we would use the components from the ant design as a base. Therefore, when creating the UI Kit, I took components from the ant design for most of the components. But a few key components were made separately. About them below.
UI Kit and Components System
The main elements used in a recipe search are the search input and the output of the results.
Explanation of some design solutions
Prescription search bar
The search can be performed either by prescription number or by customer name. In the search results output it is important for us to display the following information: prescription status (whether it is still active), full name and date of birth of the customer (the date of birth can be quickly identified, since the names can be the same), the prescription medications themselves.
Since our timeline was very tight, when discussing the search function with the backend development team, we came to the conclusion that it would be difficult to distinguish programmatically what the user entered into the search input, prescription number or SNILS number, so we have allocated a separate input for the search by SNILS.
Since our timeline was very tight, when discussing the search function with the backend development team, we came to the conclusion that it would be difficult to distinguish programmatically what the user entered into the search input, prescription number or SNILS number, so we have allocated a separate input for the search by SNILS.
Search bar:
Prescription search results
In discussions with pharmacists (and people who have had experience as pharmacists), I have learned the following:
Keeping in mind the initial goal (quick search for prescriptions), and considering the information obtained in communication with pharmacists, I came to the conclusion that the ideal solution would be to use the collapse component in the dispensing results. This solution also reduces development time, as the collapse is an existing ready-made component.
- One prescription may contain several medications, and they may be dispensed separately from each other (that is, the pharmacist may not dispense all medications from one prescription together, but only some of them)
- Usually the prescription contains no more than 4-5 medications
Keeping in mind the initial goal (quick search for prescriptions), and considering the information obtained in communication with pharmacists, I came to the conclusion that the ideal solution would be to use the collapse component in the dispensing results. This solution also reduces development time, as the collapse is an existing ready-made component.
Search results using the Collapse component:
Human icon button
There are also cases where one person may have several active prescriptions and want to get medications for each of them. For such cases, it would be inconvenient for the pharmacist to search for these prescriptions separately from each other (for example, when searching by prescription number - and re-entering the second prescription number is extremely inconvenient). In addition, it is important to be able to see all the prescriptions of one particular person. For this purpose, a button in the form of an icon of a person has been added.
This solution was perfect, because in addition to being able to go to the patient page with this button, it also visually shows where in the prescription block we have information about the person.
This solution was perfect, because in addition to being able to go to the patient page with this button, it also visually shows where in the prescription block we have information about the person.
A button that directs to a page to view all the recipes of a particular user
UI Wireframes
As pharmacists' work involves the use of different devices with different screen resolutions, I have made the design of the app in several variants:
- Desktop: 1920x1080, 1366x768 and 1600x1200 versions
- Tablet: Vertical (834x1194) and horizontal (1194x834) versions.
Design version for tablets:
Design version for desktops:
Let’s connect!
Thanks for taking the time to review my work! If you'd like to see more or get in touch, write me on telegram: @kvinn
get in touch
CONTACT
Telegram:
https://t.me/AirDsgn
All my links:
https://airat.design
https://t.me/AirDsgn
All my links:
https://airat.design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
Design
