Social Good
App & Responsive Website
Project Background
This was my third and final project while working towards my Google certificate. I designed, prototyped, and tested this app and responsive website idea I had for those who are in need of finding a mobile breast cancer clinic. From January 2022 to April 2022, I sketched out paper wireframes, created digital wireframes, did testing and re-iterated on my designs based on the results. My target audience were those who were looking for free or low-cost breast cancer screenings.
Role
UX Designer
Date
January 2022 - April 2022
Methods & Tools
Survey, Secondary Research, Competitive Analysis, Figma & FigJam
Practices
User Research, UX & UI Design, Prototyping
Concept
This is app and responsive website that is dedicated to those in need of finding a mobile breast cancer screening clinic.
The Problem
Currently there is not a way for people to search for a mobile clinic in their area. Users need to know which hospitals have mobile clinics available, and then through that website find them.
The Goal
To create a responsive website and mobile app that will allow users to search for multiple mobile clinics at once.
User Research: Summary & Pain Points
I conducted user research and interviewed potential users. With those notes in hand I was able to create persona and user journey map. Through that I then could identified who the primary users would be: adult women between the ages of 30 to 65 years old. A 30 year old woman would typically not need a breast cancer screen that young, unless there is a genetic component.
While this did confirm some of my assumptions, I also learned a bit more from this user research. Which I will share with you coming up.
1
Locating
Users can’t easily find multiple locations of mobile clinics
2
Payment
Users are unsure if these clinics are free or require insurance or payment
3
Donate
It is unclear how others can help these mobile clinics
Persona 1: Skylar
Persona 2: Desirae
Problem Statement: Skylar is a mother who needs a quick and easy way to get screened for breast cancer because her schedule changes a lot and would like to schedule and re-schedule appointments if needed.
Problem Statement: Diserae is an on-air reporter who needs a mobile breast cancer screening for free or cheap because they are busy and have family history of breast cancer.
User Journey Map
Currently, if someone wanted to find a mobile clinic they would need to know the hospital that the clinic is associated with. However, most women who are searching are already anxious about the screening. The goal was to make the finding, and making an appointment for a screening easier.
Sitemap
Users that would be reaching this website are those from all walks of life. Some have access to high speed internet and some don’t. I wanted the website to light and have fast speed.
Paper Wireframes
My goals for the paper wireframes was to try and work out some different layouts that could possible work. Feeling out how information should be displayed.
Digital Wireframes
Right off the bat, users should be able to search for a clinic near them. That is their number 1 goal in this journey.
The next most important task to the user to be able to schedule appointments easily.
Low-Fidelity Prototype
The low-fidelity prototype connects primary users to different screen size flows:
-
Desktop
-
Mobile
Usability Study: Findings
I conducted one rounds of usability studies. I used my wireframes and low-fidelity prototype in the study and found the following results according to my group of test users.
Findings
1
For most users it is not clear if the listing page for mobile clinic is accurate. Meaning are locations based on hospital location or current location of mobile clinic.
2
It was unclear to most users if these mobile clinics are free or need insurance/pay out of pocket.
3
Many users didn’t understand how donations could be made online or offline. Also many mentions wanted a receipt for tax purposes.
Mockups
The listing page will only show nearby hospitals with mobile clinics vs. listing where those mobile clinics are currently.
Show and detailing more about how to help out the cause.
Here is where users can find out more information on the clinic, such as how payments will be made or taken.
Key Mobile Mockups
Key Desktop Mockups
High-fidelity Prototype
The final high-fidelity prototype has now cleaner user flows for searching for hospitals with mobile clinics, schedule appointments, and ways to donate.
Accessibility Considerations
1
I learned this week that text sizing shouldn’t be smaller than 16px according to the W3C. So that was the first thing I wanted to make sure I did.
2
I then made sure that the colors were different enough to have a high enough contrast between the foreground and background.
3
Next steps would be to ensure full keyboard control, alt text for imagery, and more that would be on the backend of the website and app.
Takeaways
Impact: I believe that with is design, women will be able to learn about their health, take control of their health, without
What I learned: I learn that there isn’t anything like this available for women to search for multiple clinics.
Next Steps
1
Create handoff notes for development to reference.
2
Help development learn how to make this website and app more accessible.
3
Once that is done, will do more user testing to ensure accessibilityity is working properly.