top of page
Social Good Strip Image.png

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

Social Good Example Image.png
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.

Social Good Persona Skylar.png
Social Good Persona Desirae.png
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.

Social Good User Journey Map.png
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.

Social Good Site Map.png
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.

IMG_6706 1.png
IMG_6705 1.png
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.

Social Good Mobile Wireframe.png
Social Good Website Wireframe.png
Low-Fidelity Prototype

The low-fidelity prototype connects primary users to different screen size flows:

  • Desktop

  • Mobile

Screen Shot 2022-05-07 at 9.56.33 PM.png
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
Social Good Mobile Wireframe to Mockup.png

The listing page will only show nearby hospitals with mobile clinics vs. listing where those mobile clinics are currently.

Social Good Mobile Wireframe to Mockup 2.png

Show and detailing more about how to help out the cause.

Social Good Mobile Wireframe to Mockup 3.png

Here is where users can find out more information on the clinic, such as how payments will be made or taken.

Key Mobile Mockups
Social Good Key Mobile Mockups.png
Key Desktop Mockups
Social Good Desktop Key Mockups.png
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.

Screen Shot 2022-05-08 at 6.53.36 PM.png
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.

bottom of page