Alodokter Revamp: Alodonor — Blood Donor Platform
This project is to fulfill a challenge in Binar Academy’s UI/UX Bootcamp and not affiliated with Alodokter. This case study will explain my role and responsibility in this project and the process my partner and I went through during this project. Special thanks to Mas Bagas as our mentor, my supportive team, and all of the parties involved in this project so we can complete this right on time.
Platform
Mobile
Role
UI/UX Designer
Date
Feb, 2022
Duration
2 Weeks
Type
Personal Project
Tools Used
Personal Project
Challenge
For Chapter 6 of our learning session in Binar Academy’s UI/UX Bootcamp, we are challenged to collaborate with PM Bootcamp’s students to revamp any application/digital products (or make it our own). In my team, I teamed up with Mella Aulia (as UX Researcher), Johan Eric (as Product Manager), and Ahmad Rifaldy (as Product Manager). So, our team consists of 2 UI/UX students and 2 PM students. We’re given about 2 weeks to complete the challenge. After a long discussion, we decided to revamp Alodokter app and add a feature where user can be provided with blood donor related informations.
Role & Responsibilities
In this project, I acted as UX Designer and UI Designer, which developed ideas based on the research done by Mella Aulia (as UX Researcher) into wireframes (Lo-Fi and Hi-Fi) and make it into a prototype that can be tested to user in usability testing. Although we have our own role and responsibilities, in the process we always help each other. I helped Mella during the research and vice versa.
Results
The additional features offered a clean and straightforward features, making it easier for users to navigate and access essential functions in the feature.
We did a usability testing to 4 participants using Maze and received 86,88 S.U.S Score (out of 100).
At our graduation session, we're honored as the Best Showcase in the class!
86.88
S.U.S Score
The Best Showcase
In the class
Process
Ideation
From our research, we know that user needs the availability of blood donors feature with information, knowledge, and communication centralized on a single platform that is widely known by the public, and we decided to put the feature in Alodokter because of its huge amount of users and have an official partnership with Indonesian Minister of Health.
Adapted the name “Alodokter” and fused it with its feature: donor, we came up with the name Alodonor for the feature. The plan is that Alodonor can be the platform that can give you any blood donor-related information: where you can do it, to whom you can give your blood to, asking for donor, and looking for any blood stock information.
Before I drafted the wireframes, I planned the new feature’s userflow and developed it into Information Architecture:
“Sekitar” feature User Flow
“Info Stok” feature User Flow
“Donor” feature User Flow
Alodonor’s Information Architecture
Once the information architecture was established, I transitioned to developing a wireframe outline for the functionality. Initially, I doodled some plans in my notebook, and subsequently, I transformed the notions into digital format utilizing Figma.
First sketch of Alodonor
Low-Fidelity Wireframe
And then I developed the Lo-Fi design into a High Fidelity Mockup.
High Fidelity MockUp
The first challenge in this project is: where can we put the access to Alodonor screen? Meanwhile, the navigation bar looked full with all existing menu icons. After brainstormed for a while, I decided to move the “Aloproteksi” navigation button to the side of “Chat Bersama Dokter” button, move the “Aloshop” to the left, and put the Alodonor button in the right side. This action was taken to highlight the Alodonor feature and make it close to the right thumb’s area so it can be accessed easily.
Alodokter’s Home Screen
Alodokter’s Home Screen after Revamp. Alodonor’s button replaced the Aloproteksi button, and moved Aloshop’s button to the left.
For another screen, I referred to the Alodokter’s original Design system and adapted the screen layout to maintain the design’s consistency.
Alodonor’s full Mock Ups
Prototyping
Upon completing the high-fidelity wireframe, I transformed it into a working model. We developed two paths within this model - one for existing users and another for newcomers. This newly constructed prototype was then transitioned over to Maze, enabling its use in usability testing. You can access the prototypes via this link:
Testing
We conducted usability testing on four participants employing Maze and requested them to provide their feedback via follow-up queries post-testing and a questionnaire via Google Form. The outcomes of the SUS can be viewed as follows:
Feedbacks gathered from users after usability testing conducted
Iteration
After Usability Testing to users and presentation to our mentor and classmates, we gathered some feedbacks that can be used to improve the design:
Related to The Feature
Applying a point system for user and give appreciation (in form of merchs, etc) for users whose done blood donation the most.
Related to The Design
Can be seen as picture below:
“Donor” feature User Flow
So, I revised the design based on the feedback:
“Donor” feature User Flow
And add a point system to the Alodonor feature:
“Donor” feature User Flow
“Donor” feature User Flow
Conclusion
The restlessness felt by the society for the need of blood donation but have a minimum knowledge about related topics, not enough networkings, and uncentralised information.
Through Usability Testing, we hope that Alodonor feature in Alodokter can be the solution of the current concerns.
Lessons Learnt
Aside from making a good and usable UI design, this project also challenged me to work in a team, both did a collaboration within a team in a same division, and collaborated with other division (project manager) to construct a good product. Also, I learnt how to adapt an existing design system to construct new feature’s designs.
The main lesson is: this chapter of Bootcamp taught me how to manage my time to finish all the works I was responsible for, how to present the project’s progress to the stakeholders, and practicing my capabilities to speak in front of audience.
Though I am very proud of the results we have, there’re things that can be improved:
The prototype needs more work to make the transition smoother.
Some screens need to be simplified (because too many whitespace or too many texts).
The feature needs further research and development.
Last but not least,
At our graduation session, we honored as the Best Showcase in the class! I’m so proud of myself, my team, and our project result. We really hope that it can be insight for Alodokter’s product development team to considering to really add the feature to the App.
