UX Researcher
UI/UX Designer
Figma
Miro
Google Sheets
2 weeks
For the personal project in my UX design bootcamp, we were tasked to create a project that would solve a problem that we or other people encounter on a regular basis.
In Austria, there is no official digital mobile solution for vaccination certificates. All your vaccinations are recorded in a physical yellow vaccination booklet by default.
In October 2020, driven by the breakout of the COVID-19 pandemic, the Austrian government released eImpfpass, a long sought-after basic digitized version of the yellow vaccination certificate to track the COVID-19 vaccinations nationally. However, this solution is solely web-based and only covers new vaccination entries by default.
When it comes to digitizing medical affairs, people seem to be hesitant. But why is it important?
- If you loose your paper certificate, you have no chance of retrieving the information unless you had a photocopy of all the vaccination entries.
- Having a complete health record is important for holistic treatment, especially in cases of changing doctors.
- If vaccination and other medical certificates are not easily accessible, people tend to put less effort into taking care of it, e.g. getting regular boosters and check-ups, which might have a negative long-term impact.
SUCCES METRICS
The timeframe for this project was 2 weeks starting from conception and research to the end presentation and the delivery of high fidelity mockups. Given this time constraint, I had to cut back on time consuming tasks, such as one-on-one interviews and user tests.
Since this app would handle sensitive medical information about individuals, there is a potential risk for data protection and privacy. Regulatory compliance with stringent healthcare laws demands meticulous adherence to privacy standards, adding complexity and constraints to the development of this app if it were to be realized.
SUCCESS METRICS
Note: These success metrics were added after the project ended and are additions that I would do in similar future projects.
Overall usability
- How: System Usability Score (SUS)
Efficiency in usage
- How: Task Time
Satisfaction & enthusiasm
- How: Net Promoter Score (NPS)
1. Most users don't have a medical organization system.
After interviewing 8 users from the primary target group healthcare consumers, it was clear that most of the users don't have a proper medical organization system in place, not even a physical paper based one (75% of respondents). This lead to multiple cases of missing key documents at important medical appointments (63% of respondents). Additionally, a lack of medical document management leads to irregular health check-ups and missing crucial vaccination boosters.
2. The majority of users are not aware of digital solutions.
The majority of users that were interviewed are not aware of existing applications that support them in managing their medical documents. Even users that consider themselves as health conscious are not aware of such mobile apps.
3. There is no central solution that covers everything.
Online research and a competitor analysis show that there are existing applications in the Austrian market. Some of them are advanced, like Vivellio or Digitaler Impfpass+. However, none of them offer a comprehensive solution that also cover an appointment booking system or an integration of the GrünerPass that is heavily in use at this time.
How might we help individuals to manage their medical documents in a more efficient way?
After collecting all the insights from the research and the interviews, they needed to be prioritized to form a strategy. I needed to understand what those pain points, wants, and needs mean in context.
Therefore, I jumped into secondary research and classified the insights. I created affinity maps to understand better the users and defined 2 personas based on the data. Neither of the personas enjoy spending time on dealing with paperwork. Both, but more so Michelle, struggle with getting regular check-ups and vaccination boosters.
Based on the pain points and goals of the personas, I defined features and functionalities that my solution should have, and organized them in a sitemap as seen below. Special features, such as the integrated Green Pass (Grüner Pass) and digital eCard are highlights that would additionally enhance the experience. (Note: The technical feasibility of a digital eCard must be checked by the responsible organization that issues the eCard.)
Before jumping right into wireframing, I worked on the information architecture and user flows. After that, I moved forward with building a design system. The colors and style of the user interfaces are designed playfully so that users associate the otherwise rather dry and serious topic with positive impressions.
🌟 Specific features 🌟
- Document management system for reports and vaccination certificates
- Medication overview and reminders
- Appointment booking system
✨ Overall Design Highlights ✨
- Interactive prototype
- Digital Green Pass and eCard
- Fully digital vaccination pass
As there was not a lot of time left to recruit user test participants, I conducted 5 user tests with friends and family members testing task success. Even though friends and family may not be the optimal participants as they could be biased, it was good enough for this project because they are part of the target group. With the insights from the user tests, I managed to fix errors and improve the design.
🗝️ User Tests Key Takeaways 🗝️
- Too much effort typing - Users don’t want to put a lot of manual effort in adding documents or vaccinations.
- Unclear information hierarchy in cards- The cards on the home screen could be better scannable.
- Need for clear click-signifiers - Users need clearer signifiers that show whether an element is clickable or not.
🪄 Implications for Design Changes 🪄
- Added scan feature: option to scan information on vaccines, medication, and medical reports, that gets auto-filled, e.g. vaccine label, medication label
- Improved UI cards: added lines to truncate information & highlight important information with bold text, and added a checkbox feature to keep track of taken medication
- Added clear signifiers: added arrow and chevron buttons to clickable cards and clickable list elements, e.g. addresses, telephone numbers, for clear click indication
Additional features, such as the medical appointment booking system and medication tracker, provide a comprehensive experience for your personal health care.
- The digitized version of the traditional vaccination certificate and medical reports allow for easy access whenever and wherever in need.
- Having a complete medical history also enables individuals to visit different doctors without the need for additional explanation.
- Recommended vaccinations and check-ups with reminders in the app ensure that the users are taking care of themselves which will have a positive long-term impact on their wellbeing and health.
UX success metrics are a must to quantify how successful users are using your product and what their attitude towards it is. It also makes it easier to communicate the results and benefits of UX design to stakeholders.
UPDATE
After one and a half years working as a UI/UX designer and learning a lot about UX practices and user interface design, I came back to one of my earliest projects, mediPass, and decided to give the home screen a “face lift”. I applied principles that I learned throughout my journey, and changed up some things that I would do differently today.
💎 Revision 💎
- Added scrollable horizontal date picker in medication section to check medication intake throughout time
- Added medication intake count per day
- Added notifications to review reminders for medication intake, checkups, etc. in one place
- Added recommended checkups
- Removed quick access because in 2023 the Green Pass is not in use anymore, move eCard to profile section
- Changed the card designs to be more minimalist and clean
- Refined the information hierarchy
- Softened the drop shadows and icon color contrast
- Changed from full colored cards to white cards with colored icons for a cleaner look
