Student Project
Brumed- Telehealth Application
Brumed is a virtual healthcare application that allows patients to connect with a medical expert from the comfort of their homes.
Project Overview
I had the opportunity to work on this project as an assignment for the Human-Computer Interaction (HCI) and Visual Interface Design module led by Dr. Chris Creed and Robert Sharl. It was an invaluable learning experience that allowed me to delve into the principles and practices of HCI while honing my skills in visual interface design.
Role: End-to-End UX/UI Design (sole designer)
Timeline: October 2021 - January 2022 (4 Months)
Tools: Figma | Illustrator | Photoshop | Balsamiq | StoryboardThat
Research
In this phase, I conducted thorough research to identify the pain points experienced by users in existing apps and to determine their expectations for a Medical App. The research was carried out through two distinct methods: user research and market research. Through user research, I gained insights directly from users, understanding their challenges and requirements. Market research, on the other hand, provided a broader perspective on industry trends and user expectations.
Competitive Analysis
I evaluated two popular telehealth applications, examining their strengths, weaknesses, and industry trends. This analysis helped me understand why users may choose one service over another.
User Interviews
Storyboard
I have created a storyboard that emphasizes problems and situations rather than specific features, similar to how personas or journeys are designed. The visual format of the storyboard allows people to emotionally connect with the story more easily. Below is a pictorial representation of a situation where a dad utilized the Brumed app and discovered it to be beneficial.
User Personas
User Flows
Sitemap
Initial sketches
Once I completed the process of creating the sitemap and determining the user flow for my app, I started sketching my app's layout using pen and paper. The primary goal was to visualize my ideas and understand how the various features would interconnect within the app.
Wireframes
Once the initial sketches were finished, I began working on mid-fidelity wireframes. This step enabled me to obtain a more comprehensive understanding of the flow and navigation within the app. By creating these mid-fidelity wireframes, i could explore and refine the user experience, gaining a better sense of how users would interact with the app and navigate through its various screens and functionalities.
High Fidelity Prototype
After finalizing the wireframes, I utilized Figma to develop an interactive high-fidelity prototype. This prototype included limited functionality but aimed to provide a realistic representation of the app's design and user interface. The purpose of this prototype was to conduct usability testing and gather valuable feedback from users.
Additionally, my intention is to ensure that this application can seamlessly work with smartwatches, allowing users to receive reminders and notifications conveniently.
Making the App Accessible for Colorblind People
In general, around 8% of males and 0.5% of females experience some degree of color blindness. As a Healthcare app, it is imperative to ensure accessibility for individuals with color blindness.
Usability Testing
The high-fidelity prototype underwent testing using two distinct methods: one method utilized the System Usability Scale, while the other involved a moderated remote test (Think Aloud) conducted through zoom. A group of 5 participants were assigned various tasks within the application. The feedback obtained from this process proved to be exceptionally valuable and was incorporated into enhancing the final version of the prototype.
Affinity Map
Following the usability testing, I generated an affinity map using the test results. The map categorizes the users' errors, observations, and overall impressions of the app, which were gathered during the usability test conducted on a high-fidelity prototype.
System Usability Score
In order to evaluate the usability of the system, I also conducted a comprehensive assessment using the System Usability Scale (SUS) with a group of participants. The results of the evaluation indicated a favorable score of 77, reflecting the overall usability of the system.
Final Iterations
Upon receiving the results from the initial usability test, I carefully analyzed the feedback and identified areas where improvements were needed to enhance the app's usability. I created revisions to address the identified issues. These revisions aimed to incorporate user feedback and ensure a more seamless and intuitive user experience within the app.
Design Style Guide
When considering the visual aspects of this project, I made the decision to use a dark blue shade as the primary color. Initially, I had chosen a lighter blue color, but when I conducted usability tests, I discovered that this color caused issues with text legibility and did not meet WCAG accessibility standards. As a result, I started over and looked for a different color. During my research phase, I noticed that many similar applications used the same color scheme, so I aimed to create a design that would stand out. The final color choice conveys a sense of security and trustworthiness that is desirable in a medical app, while also adding a touch of liveliness to prevent it from becoming dull or uninteresting.
Reflection & Next Steps
Taking user feedback into consideration, I adjusted my perspective and improved the app's user-friendliness. User testing helped identify challenges, such as technical errors and navigation difficulties. I addressed these issues by fixing the error and simplifying the design. Being open to feedback and making necessary adjustments was crucial for the final outcome.
Accessibility is key: In previous iterations, I hadn't considered some WCAG-compliant details and once I was made aware of these challenges, I decided it would be best to change the coloring and size of most of the design so that it would be better received by a wider audience.
User Feedback: During the design process, I consistently gathered user feedback and implemented necessary app adjustments. This iterative approach ensured the app met user expectations, addressed their needs, and enhanced the overall user experience.
Importance of Simplicity: I understood the need to maintain a straightforward and intuitive user interface during the app's design process. I acknowledged that a complex and cluttered design had the potential to confuse and frustrate users, particularly older individuals who might not possess extensive technological expertise.