MyHealthNB App
UI/UX Design
Embedded Files
Overview
Created a health portal to empower citizens of New Brunswick with their health data. This allowed users to access their Lab results, Medications, Immunizations, and Diagnostic imaging at anytime and anywhere.
This app was created by VeroSource in collaboration with the government of New Brunswick to build the app to their needs.
My Contributions
Led the design phase of the project from research to conception, ultimately bringing the project to life through the development of a clear design system that adheres to user-centred design principles and undergoes quality assurance testing.
Tools used: Adobe XD, Adobe Illustrator, Figma
Timeline: 1 year
Purpose
"Improve New Brunswick's health portal and make it more accessible in a secure manner"
The Problem
Citizens have difficulty accessing and organizing their personal health information.
The current online website portal is not fully operational and confusing.
Citizens have difficulty tracking their health metrics and are sometimes confused.
Traditional communication methods can pose security risks, as physical documents are susceptible to loss, theft, or unauthorized access.
Potential Solution
Design and build an app so citizens can access all their health records anywhere and anytime.
A clear understanding of their health records and easy navigation through the mobile app.
Secured access to their health records.
Research
Started the research with a competitive analysis to gain insights into the strategies employed by various health portals. During this process, we pinpointed functional and usability shortcomings. Additionally, informal interviews were conducted to delve into users' experiences, mapping out their journeys and uncovering the challenges they face while searching for their health records.
Findings
A deliverable contains all health records and can be accessed anywhere and anytime.
The ability to filter through the list of health records is important.
A clear understanding of how to navigate through the app with good contrasts.
Incorporating features for enhanced accessibility, ensuring a broad user base can access the app.
Ensuring the data is accurate and easy to understand.
A platform that contains all types of health records in one platform.
A secure and user-friendly mobile app to help people of New Brunswick access their health records
Personas
Since the audience for this project was so wide (New Brunswickers), I felt it was important to try and represent as many people as possible through two personas. These were designed by cross-referencing data from the interviews with the demographic data. They would serve as a guideline for design decisions especially that I was the sole designer in for this project, but working closely with devs. This would help the team to put ourselves in others' shoes when moving forward in the project.
Understanding these frustrations will help in designing a health record app that addresses the user's specific needs.
As a user I want to....
Access my health records at any time in a convenient way.
Have all my health records stored in one platform.
Navigate through the app with ease.
Easily read my health results.
Ideation
During our collaboration with the client, they expressed their eagerness to review the mock-ups at the earliest convenience. Hence, we promptly began defining the information architecture first - gathering the requirements from both the research and the client, I established a site map to allow me to visualize the overall architecture and organization of information.
Information Architecture
User Flows
With the content of information laid out in the diagram, it was much better to visualise the user flow and where we could optimise the experience.
Design round #1
Wireframes
The design stage began by transforming the sketches into mid-fidelity wireframes using Figma. The primary objective here was to ensure the interface is well-organized, easy, accessible and enjoyable. As a result, it gave me a better understanding of the UI elements and layout, such as visual hierarchy and the placement of various functions on the screen
Mock-up v1
From the wireframes, I build a hi-fidelity mock-up to showcase it to the client. This was done to give the overall concept and what is possible to deliver to the client with the bare minimum requirements.
The chosen colour theme was to go with a green and blue combination to represent health, vitality, and calmness.
Design round #2
After presenting the initial mock-up concept to the client, they expressed their satisfaction and provided additional requirements and data samples for us to work with. Furthermore, some internal testing was conducted within the company, outside of the MyHealth team, to ensure unbiased feedback.
At this stage, I also began developing a design system. Since we would be reusing more design components and styles, establishing a system was essential for maintaining consistency.
Client requirements
Now, taking the client's requirements, I had to incorporate their colour theme, regulations and sample data into consideration when improving the 1st mock-up. I also took this opportunity to seek more feedback on the flow and design layout of the app.
Design System
Creating the first part of the design system, we had to define the style guide, this was given to us from the client's branding which consists of 4 different colours. I had to incorporate that into the current designs and improve on them. This is where the style guide helped to keep the designs consistent when creating components.
Also, adding more to the design system, I defined more design features such as the spacing and typography.
Mock-up v2
Once I had established the design system, creating the second mock-up was a smoother process. My primary objective was to integrate the client's specifications while also improving the user interface based on input from the feedback gathered across teams. With the assistance of Figma, I was able to produce a high-fidelity mock-up for every page ready to show the visual and flow of the app.
After receiving positive feedback from the client, they conducted a soft launch to gauge internal and citizens' reactions.
Testing
Using the paper prototype model, we wanted to simulate the functionality and usability with 3 participants to test the users' flow and intuitive navigation in the app.
Test objective task questions
To identify first impressions on all screens
To reveal any difficulties or roadblocks during navigation or interactions
To explore any potential usability issues
Issue #1
The button to filter results is not intuitive, and the action header is overwhelming with multiple button types in one place.
Issue #2
The red buttons look like an error at first glance, causing confusion in the Medications page. Additionally, having different coloured buttons in each health module can be disorienting.
Client's new requirements
During the presentation of the initial mock-ups to the client, they expressed additional requirements that needed to be added to meet their needs. One of their requests was to include more data information on certain pages and components.
Therefore, taking into consideration the feedback from both the client and the end user, I revisited the drawing board on figma and made necessary improvements to ensure that the final product was satisfactory for all parties involved.
Design round #3
After presenting the second mock-up concept to the client, they were satisfied and moved forward by providing more requirements and data samples to work with. There was also some internal testing made within the company (outside of the MyHealth team) so that we are not too biased with giving feedback.
Updated Design System
After realizing the need for better design consistency throughout the app, I went back to the drawing board. The first step I took was to improve the design system by adding more detailed design information. This included design assets such as component states of buttons, custom boxes, icon libraries and more.
I also took advantage of Figma's new features such as by creating local variables for the themes and global design components library. These new features will help keep the design consistent and changes will be made easier when the client wants to tweak a few things.
Design Process
When reworking on the design system, I also addressed issues brought forward as well as the client's changes:
Addressing Issue #1
The action header has been restructured to have a simpler and more consistent design to not overwhelm the user. With the extra spacing, it will also help to make the buttons more distinguishable and accessible.
The following changes were also implemented to enhance the user experience:
The buttons have been made more prominent to indicate that they are clickable. A grey background was added to provide better contrast and highlight the button element.
Additionally, the client requested a restructuring of the row buttons. As a result, the layout of the row buttons has been redesigned to give more focus to the name of the lab result, as opposed to the category name which can be confusing.
Addressing Issue #2
Initially, I had planned to use different colours for each health module to help users identify which module they were in. However, after receiving feedback from the client and user tests, we decided to opt for a more consistent design throughout the app. Therefore, I increased the size of the header and title page to provide a better page indication and added more space between each design component to improve the overall flow.
Additional changes from the client's feedback
Removed the side menu to have a navigation bar.
Direct access to settings and information pages.
Redesigned Datepicker to a Monthpicker (this also helped the developers with the backend).
The information "Need to know" button that appears in each health module has changed to "About your results" and is now more prominent with the secondary blue colour.
Redesign of Lab Results reference graphs to optimize the interaction.
Overall redesign to give more contrast and spacing between components and texts for better accessibility and affordance for french translations.
Mock-up v3
After addressing the issues and feedback, I reorganized the screen and design assets to see the overall structure of the app.
This is the latest design currently in production that is available on the AppStore and PlayStore.
Final Version
Reflection
Through this project, I was able to put my fundamental principles and design practices in a real-life situation again. Although there was not a significant amount of user experience, I particularly enjoyed hearing some users' thoughts and motives for their actions.
One of the significant lessons I learned from this project is that design is a way of communicating and understanding the needs of users, developers, and clients. Design is meaningful when it can serve the user's needs. However, that is only possible if developers can understand the design from the very beginning, while the client must approve the designs that follow their regulations and requirements.
Most importantly, I enjoyed every step of this project, and I am thrilled to see my designs helping people and making a positive impact on the citizens of New Brunswick.
Google Sites
Report abuse