View Final Prototype →
View Final Prototype
4 Weeks
Timeline
Product Designer, User Researcher, UI Designer, Visual Designer
Role
Overview
Figma, Adobe Illustrator, Typeform, Maze
Tools Used
Due to an expansion, numerous bus routes were recently added to Ann Arbor's bus transportation system. Many of those routes stop at the same bus stop, Washington & State.
Problem & Project Goals
I was the sole Product Designer for this project, and all research was conducted both remotely and in-person.
Background
View Final Prototype →
View Final Prototype
Figma, Adobe Illustrator, Typeform, Maze
Tools Used
6 Weeks
Timeline
Product Designer, User Researcher, UI Designer, Visual Designer
Role
Overview
Ann Arbor’s transportation agency is a fictitious business inspired by the real city of Ann Arbor. Ann Arbor But Transit is an app seeking to streamline how our users, the commuters of Ann Arbor, discover their bus routes.
I needed to discover a way to effectively communicate:
- When the next bus will arrive at each stop.
- How much time the commuters have to get to the bus stop.
- The future arrival times of each bus line at each stop.
Discover
Background
LiNK is an organizational app for cancer patients & caregivers.
Going through cancer treatment is confusing and stressful, LiNK wants to help.
I developed a user research plan to determine clear objectives and identify the potential challenges. My focus was to identify how patients and caregivers currently keep track of treatment information, what their overall experience has been with that system. I also wanted to know if and how they currently share that treatment information with their loved ones.
Research Approach
Cancer patients & caregivers are given an overwhelming amount of treatment information to keep track of.
Problem & Project Goals
Patients & caregivers want to:
- Keep track of their medications, appointments & doctor’s information
- Feel like their information is safe & secure
- Share this information with trusted loved ones
THREAT: This lies in their strength – they’re credible which communicates trust.
OPPORTUNITY: Our opportunity is to create an MVP with the most important and useful features. Remove some of the stress already on their plate.
WEAKNESS: It has an overwhelming amount of information, which can add to our users already full plate.
This means that learnability of the app would take time and effort.
STRENGTH: They're supported by reputable cancer associations, and have a clean and clear approach to design.
COMPETITOR SWOT ANALYSIS
Pain Points
Struggles remembering all the treatment information, Doesn’t want to add more stress to her mom’s plate
Needs
- To be informed on the treatment
- Prepared for an emergency
- Wants to help in any way she can
VALUES
- Family
- Taking care of her mom
- Knowledge of the treatment plan
Daughter & Caregiver | Female | 31 | Live in Suburbia
Kristen Miner
Journey Map
Pain Points
Not always feeling 100% themselves, feeling unheard from the medical community, and having to know & remember a lot of information
Needs
- A support system
- Making the treatment less stressful
- More time with family & friends
VALUES
- Family & health
- Attending doctor’s appointments
- Knowledge of the treatment plan
Cancer Patient | Female | 51 | Medical Leave | Live in Suburbia
LEAH Miner
Persona
Define
As a patient, I want to share my medical information with loved ones,
so that they’re informed about my treatment in case of an emergency.
User Story
The actions needed to complete this task:
2. Create a process feel secure (HIGH PRIORITY).
3. Ability to invite/share (HIGH PRIORITY).
- Ability to track treatment information
(HIGH PRIORITY)
- Ability to track treatment information (HIGH PRIORITY)
- Create a process feel secure (HIGH PRIORITY).
- Ability to invite/share
(HIGH PRIORITY).
User Flow
My priority is to make sure the process feels safe and secure.
Once Leah fills in her treatment information, she'll access their account settings. Here Leah will be able share her medical information her daughter.
Bring patients & caregivers together by making it easier to track & share treatment information.
1. Features that help them track their medications, appointments and doctor’s information.
2. Provide a sense of security by clearly communicating HIPPA standards are being followed.
3. Giving them the ability to share the information they provide with their loved ones.
Solution
View Lo-Fi Prototype →
The results from the user survey helped inform some design decisions. Users communicated that they wanted to be able to view their information in one space. The homepage accomplishes this by having a summary of what is happening that day. Then the user can choose to find more details about each item.
Based on the competitive analysis, I including a bottom navigation to add more user control. This will help with recognition rather than recall. Making the most important actions visible.
Low Fidelity Prototype
My priority is to make sure the process feels safe and secure.
Once Leah fills in her treatment information, she'll access their account settings. Here Leah will be able share her medical information her daughter.
User Flow
User Flow # 2
This second flow has a similar start, but diverges at the homepage where they search for a destination. They’ll type in their destination on the homepage, then be shown a variety of options. It’s here that they’ll choose their preferred route. If the bus is delayed they’ll be asked if they would like to be re-routed. If not, they’ll be sent back to the homepage where they can find the bus schedules and nearest bus stops.
- Features that help them track their medications, appointments and doctor’s information.
- Provide a sense of security by clearly communicating HIPPA standards are being followed.
- Giving them the ability to share the information they provide with their loved ones.
Solution
Lo-fi Wireframes | Iteration
View Lo-Fi Prototype
The results from the user survey helped inform some design decisions. Users communicated that they wanted to be able to view their information in one space. The homepage accomplishes this by having a summary of what is happening that day. Then the user can choose to find more details about each item.
Based on the competitive analysis, I including a bottom navigation to add more user control. This will help with recognition rather than recall. Making the most important actions visible.
Low Fidelity Prototype
Bring patients & caregivers together by making it easier to track & share treatment information.
My goal with LiNK's branding was to feel approachable, trustworthy and imply connection.
BRanding & Logo Design
Develop
Important information stands out with an eye catching color, and hierarchy is used through the app to clearly communicate information. The bottom navigation helps with the user’s memory load – keeping the most important pages and features in reach.
With the application of the LiNK's branding, the user interface starts to take form. The interface is minimal and straightforward, and it provides the information that the user needs in the clearest way possible.
High Fidelity Prototype
Hi-fi Wireframes | Iteration
Hi-Fi Prototype Iteration
In the in-person usability test, the most significant value add was the behavioral feedback. I was able to see how and specifically where the users struggled with completing each task. I ask participants to talk out loud while completing tasks, and this provided me with useful qualitative data that informed the follow iterative design.
From the maze usability test with 11 participants, most tasks were completed successfully except for sending an invite to a loved one as you can see by the results below.
I conducted two types of usability testing: Remote via Maze and in-person tests. I tested 5 different tasks: create an account, view today's appointment, add a medication, add a doctor, and send an invite to a loved one.
Usability Testing
Deliver
A user in the in-person usability test communicated that they wanted to sign-in with google, and they didn't see that that was an option already available. So we moved that up so it could be seen.
Added icons to clearly communicate account Setting options
Users went to multiple screens before coming back to the homepage, clicking multiple places before realizing the profile icon at the top took them to account settings. This was the same experience users had in the in-person usability tests.
Moved up Create an account with other established accounts
Moved the Account Settings Icon onto Bottom Navigation
This research from the usability tests informed the next iteration.
During the in-person usability test, when asked to communicate their process out loud, a participant communicated during the invite a loved one task that they were looking for an icon that communicated "share."
A user in the in-person usability test communicated that they wanted to sign-in with google, and they didn't see that that was an option already available. So we moved that up so it could be seen.
This is a result of users not being able to discover the profile icon on the homepage in both the Maze usability test and the in-person tests.
View Final Prototype →
From the maze usability test with 11 participants, most tasks were completed successfully except for sending an invite to a loved one.
Adjusted form field to be responsive
User didn't know to scroll down to complete the invite task, so I designed a responsive “personalize note” form that we’ll late communicate with the developer’s team.
Added An extra "Add a Medication" Call to Action
When completing the "add a medication" task, participants didn't understand that the "plus" icon at the top of the screen was where they could complete this task. To solve this, I added an extra option with descriptive copy added in the medication list.
This research from the usability tests informed the next iteration.
View Final Prototype
Hi-Fi Prototype Iteration
- Reassess color palette, to AA Standards, to be more accessible
- Incorporate more error prevention, specifically on the form screens
- Review that all medical terms used & HIPPA standards are correct. I'll be reaching out to a UX Designer mentor in the healthcare field for some clarity on this.
- Expand on features – In the user survey, many patients communicated that they didn't feel seen by the medical care system. I'd like to create a feature that could pair patients with medical professionals they can be candid with throughout their treatment.
Next Steps
PARTICIPANTS: Finding well-suited participants was difficult.
UX COPY: Making sure that all medical terms were correct. I also wanted the copy to feel approachable while still feeling approachable. Cancer diagnosis and treatment can feel lonely and I wanted users to feel respected and seen.
HIPPA STANDARDS: Making sure that I design within the standards, so that I designed a process that made users fell secure.
Challenges
Reflect
PARTICIPANTS:
HIPPA STANDARDS:
UX COPY:
Helps commuters discover their bus routes in a variety of ways after a bus route expansion.
View here →
