Project overview: For this five-week project, I served as a UX designer, creating a mobile app and responsive website for Social Good, from concept to delivery.
Embedded Files
Challenge: Design a solution to decrease fatalities from chronic respiratory disease.
Solution: B-Care is an application consisting of two modules: a desktop module for managing chronic respiratory diseases from patients tested using the mobile module at a specific facility.
RESEARCH
We found that qualitative research, including interviews, competitive analysis, literature review and persona hypothesis construction, was the most useful approach. We began by asking ourselves some initial key questions.
"Which user segment is the most critical for the business?"
"Who are our main competitors?"
"What are the most pressing needs of our primary users?"
“Which literature should we review to familiarize ourselves?”
"What potential challenges may we encounter in the future?"
"What is the product, and who is the target audience?"
PERSONAS
By constructing personas, we were able to tailor our marketing and product development strategies to better meet the needs of our target audience and design more user-friendly applications.
COMPETITIVE ANALYSIS
After evaluating several competing companies, we found that MIR™ is a direct rival to B-Care and may potentially impact B-Care's popularity. B-Care has the potential to take advantage of the offline-first feature, which allows it to be used in locations with limited internet connectivity.
Although the majority of features between competitors were very similar, the main differences we noticed were:
Improved Patient Care vs Worse Patient Care
Better Data Collection and Analysis vs Worse Data Collection and Analysis
SITEMAP
We created user flows to visualize the start-to-finish journey of a user using both the mobile and desktop modules. This helped us understand how users interact with the application and navigate towards their goals.
PAPER WIREFRAMES
Creating paper wireframes for each screen ensured that the elements that transitioned to digital wireframes effectively addressed user pain points. We prioritized a user-friendly navigation on the home screen to save time.
DIGITAL WIREFRAMES
During the initial design phase, We ensured that screen designs were based on feedback and findings from user research, with a focus on easy navigation and compatibility with assistive technologies to address key user needs.
DIGITAL WIREFRAMES SCREEN SIZE VARIATION(S)
MAIN USER FLOW
LO-FI PROTOTYPE
We created a low-fidelity prototypes using the completed set of digital wireframes, with the primary user flow being the selection of the Services Menu.
ITERATION
After creating our prototypes from low-fidelity wireframes, we conducted a usability test. We asked 5 different participants to run through different scenarios in our prototypes in hopes of garnering enough feedback to use for our next set of design iterations.
Findings:
1) Users want clear labels or descriptions for each page, as well as visual cues such as icons or color-coding to help them more easily distinguish between different pages.
2) Users want access to a comprehensive menu or navigation bar that allows them to easily browse and switch between pages.
3) Users want to easily search for and locate specific patient records can help them more efficiently update and modify information.
AFFINITY DIAGRAM
We used an affinity diagram to group together similar ideas or pieces of information, so that they could be more easily understood and acted upon.
MOCKUPS
Participants in the usability study expressed confusion with the page descriptions, making it difficult to distinguish between pages.
STYLE GUIDE
We give priority to the pink color (Hex: #D4AAAB), which represents the lungs of healthy individuals. The welcome screen exudes a warm and inviting atmosphere that draws the user further in.
FINAL SOLUTION
Mobile module
Home Screen
The main page of a website that serves as an entry point for users.
Here users can access all relevant contents.
Authentication Page
This page is used to verify the identity of a user before allowing them access to certain resources or information.
Health Test Page
The health test page provides a summary of the user's test results.
Confirmation Text Page
The purpose of a confirmation text page is to confirm to the user that their action has been successfully completed, and to provide them with any relevant information or next steps.
Desktop module
Home Screen
The main page of a website that serves as an entry point for users.
Here clinicians can access all relevant contents.
Clinicians Page
It is used to view and manage information about patients, specialists, facilities and overdue patient list.
EHR Page
Page on a website that allows clinicians to access and manage patient health information electronically. It includes personal health information such as patient demographics, medications, allergies, immunizations, laboratory results, blood pressure and notes from health care facilities.
HI-FI PROTOTYPE
We prioritize a smooth and intuitive experience for the user.
COMPLETE USER FLOW
A complete user flow refers to the series of steps and interactions a user goes through when using a product, from beginning to end, to accomplish a specific task or goal.
ACESSIBILITY CONSIDERATIONS
1) We used headings with different sized text for clear visual hierarchy.
2) We used landmarks to help users navigate the site, including users who rely on assistive technologies.
3) We designed the site with alt text available on each page for smooth screen reader access.
TAKEAWAYS
B-Care solution is the result of many hours of work and effort, lot of network and interchanged relationships, with a user-centered design conveying simplicity, effectiveness and ease of use.
WHAT WE HAVE LEARNED
It became clear to us that users expect the experience to be as easy and pleasant as possible
NEXT STEP
Hand off design for production.
Page updated
Google Sites
Report abuse