UpLift
Redesigning the onboarding and general UI of an iOS mental health app.
How we started
Our client, UpLift Health Inc. brought their iOS mental health app, UpLift, to our team. They asked us to address the onboarding UI. The client hoped that by having us look into the look of the onboarding, users would complete their twelve therapy sessions.
Drawing upon our research, our team did more than simply refresh the UI of the onboarding. We completely redesigned the onboarding experience in addition to the general look and "feel" of the app. By doing so, we hoped to increase user retention and provide a delightful, helpful experience.
DURATION
3 week sprint
METHODS
Heuristics
Competitive research
Prototyping
Rapid usability testing
TEAM TOAST
Annie Im
Kat Pham
TOOLS
Figma
Zoom
Slack
At a glance
PROBLEM
Users need a more intuitive and cost-effective way to navigate the UpLift app because currently, the app feels confusing, unfinished, busy, and therefore not worth the money.
INSIGHTS
The product's visual design and the copy makes users distrust the app.
SOLUTION
An app that has consistent branding, a modern and fresh UI, and a comprehensive onboarding experience.
Let's get into the nitty gritty
Our methodology
We started by analyzing the product ourselves to understand what problems we might encounter in user research. Once we understood potential issues, we asked new users to navigate the current product. From this data, we were able to define pain points within the current app and possible solutions. Having identified these things, we jumped into fleshing out the solution—ideating, prototyping, and testing.
USER INTERVIEWS
Tell me about your friendships
I interviewed three people on their experiences making friends. My intention was to identify three different types of people who, although at different stages in life, would represent a wide base of users looking for friends.
I gathered all of this data on an affinity map, sorting by their habits, their frustrations, and their desires.
What I learned
- Users typically don’t go out of their way to make friends.
- Users have specific preferences for activities and locations when spending time with new people.
- Users want to meet people who have similar interests and lifestyles to them.
- Users want friendships to be convenient.
PERSONA & USER JOURNEY
Have you met Alex?
Alex Kone is a persona made up from the data I collected. She represents the very real needs, desires, and frustrations of our user base.
The Scenario
Alex, a young professional, recently moved to Philly. She doesn’t know anybody outside of work and doesn’t know what to do with all of her free time. She’d like to meet some people, but she really isn’t the type to go up to anybody on the street.
One night, bored of browsing Netflix, Alex summons the courage to go out to a bar in the hopes of meeting some friends. Let’s follow along on her journey.
Alex's journey. Click to see more details.
As you can see, the outing unfortunately doesn’t go so well for Alex. Her confidence wavers, and she’s left wondering how to continue her conversation, and ends up going home, resigned. Her journey, however, reveals to us opportunities for improvement—what we can solve.
What I learned
Based on these opportunities, we learn that Alex needs something that can…
- Provide Alex options for activities/places where she can meet new people where she feels comfortable and safe.
- Help Alex identify who would also like to make new friends.
- Match Alex to people who have similar interests as hers.
- Provide follow up activities for them to do.
- Find a way for Alex to communicate to potential friends before meeting in person.
PROBLEM & SOLUTION
Let’s distill Alex’s problem:
Alex is a young professional who just moved to a new city. She needs a different and easy way to meet and make friends because she is uncomfortable approaching people in real life.
And, we have to ask ourselves:
How might we create safe and comfortable ways for Alex to meet people so that making friends is less daunting of a task?
IDEATION
Finding inspiration
When I think of meeting people through the internet, my first thought is Tinder. Tinder is the most iconic dating app of our generation. They perfected the game-ification of meeting people. So I thought to myself, can I utilize user’s familiarity with Tinder for my app? Perhaps, that is how users can view other’s profiles.
But, for someone as shy as Alex, would she have the courage to cold message a stranger? I wanted a way for Alex to find friends without her having to leave her comfort zone. My mind went to Craigslist.
Baltimore's Craigslist community page. Click to see more details.
Craigslist is an incredible resource where you can post and browse ads. You can participate actively, by posting ads declaring what you’re looking for or what you’re selling. And, you can participate passively, by perusing the ads without the pressure of having to respond to any of them. Unfortunately, as the years have progressed, Craigslist has fallen out of vogue. Now, it isn’t uncommon to find the community page littered with posts looking for hookups.
But, I wanted to bring this community board aspect of Craigslist to the app. I wanted a space where users could post and respond to ads about looking for a friend who has this new hobby I just picked up!, for example.
There is also the problem of Alex becoming frustrated over choosing an activity she wants to invite her new friend to. I thought that a way to mediate this problem was to provide Alex with options of activities to choose from.
Thus, I created Touchpoint.
Executing my objectives
Touchpoint is an app that…
- Allows Alex to find people with interests similar to her own.
- Generates options for activities that Alex can invite other users to participate in.
- Provides a community space for inviting and joining activities.
These intentions are brought to fruition by its features.
- Meet Friends: Connecting to profiles with interests similar to Alex’s.
- Ask to Hang: Providing options for activities that Alex can invite other users to participate in.
- Flyers: A space for users to post events on a bulletin where users can respond.
ITERATIVE PROTOTYPING
Sketching & Prototyping
Through an iterative process, I brought these ideas into fruition, working from paper sketches, to paper prototypes, to low-fidelity, digital wireframes, to mid-fidelity wireframes.
The iterative process. Click to see more.
USABILITY TESTING
How enjoyable is the experience?
Unfortunately, due to time constraints I was not able to conduct usability testing for the paper prototype.
I conducted three tests to gauge the usability—the intuitiveness and enjoyability—of the initial mid-fidelity digital prototype. Because Alex is a fictional person, I took special care to identify users who broadly resembled Alex.
Then, I tasked these real-life Alexes with:
- Locating and selecting a different user’s profile.
- Contacting the user.
Through these tasks, I hoped to observe their understanding of the multiple ways to discover and contact other users as well as an innate understanding of the features themselves.
What I learned
I uncovered some key findings.
- Although the Flyers feature was ambiguous because of its name and unfamiliarity, users found it to be their favorite feature of the app once on the page.
- Users also observed a lack of sorting and filtering for Flyers and Profiles, wanting a way to find specific flyers and people.
- Users liked the familiarity of the Meet Friends function, but wondered if the similarity to Tinder and other dating apps made finding friends less platonic.
Moving flyers to be the main page. Click to see more details.
Immediate Solutions
I made these immediate fixes:
- Change the first page users see from Meet Friends to Flyers.
- Add tags to flyers.
- Allow users to search through flyers by tags.
PRELIMINARY RESEARCH
How are we voting now?
When thinking of voting, most people think of in-person voting and mail-in voting. For the majority of the population, these methods work. But, there are problems in the system.
This isn't working.
In-person voting
- Long waiting lines.
- No rest areas.
- Large crowds.
- No time off of work.
Mail-in voting
- In many states, you have to apply/need an excuse.
- You need a secure mailing address.
- No assistance for voters with disabilities/language barriers.
- The postal service is sometimes unreliable and hard to time.
What are the other solutions out there?
Democracy Live is the online voting platform currently used in West Virginia. It's a slightly complicated system, however, with some of the same issues as before.
- Voters must apply by going in person to the county clerk.
- Voters may submit online, by email, mail, or fax.
- No assistance provided.
- A long process that can get confusing.
View Democracy Live task analysis
USER INTERVIEWS
Defining our user
The problems in the current voting systems disproportionately leave behind:
- The elderly
- The disabled
- Citizens abroad
What we wanted to learn
- Users' comfortability with completing tasks with sensitive information, such as government related tasks, online.
- Users' feelings on security and privacy online.
- Users' current voting habits.
What we did learn
We interviewed six people who fit within our defined user base. What we found was this:
- Most users have had accessibility issues with voting in person.
- Users' digital privacy is incredibly important to them. Most users take proactive steps to protect themselves online.
- Users are comfortable completing government tasks and providing personal data online. (So long as that information is for the government)
Focus Pocus
These findings tell us that we need to prioritize:
- Security
- Accessibility
- Simplicity
PERSONA & USER JOURNEY
Gayatri is sick of voting in person!
Gayatri is a fictional persona based off of the data we collected. She represents the very real needs, desires, and frustrations of our user base.
Gayatri is in her mid 50s and has fibromyalgia. In the past she has had to bring her own shade and seating, and asking for accessibility aids hasn't been met with success.
The Scenario
Gayatri is voting in this year’s local elections. Due to her physical limitations, she has chosen to vote via Mail-In Ballot in lieu of voting in-person. She is hoping she can register & submit her ballot in time to be counted in the upcoming elections, while also feeling confident that her ballot was actually received.
Gayatri's journey. Click to see more details.
What we learn
Having identified Gayatri's pain points, we discover these opportunities:
- An online voting process that would eliminate the need for physical documents to be scanned.
- An option to input votes directly into systems online for submission.
- Online confirmation of ballot being submitted.
PROBLEM & SOLUTION
Let’s distill the problem:
Gayatri needs a better way to exercise her right to vote because her physical limitations have made it difficult to vote in person without compromising her personal health & safety.
Defining a solution:
If we create a mobile app that allows all users to easily and securely place votes, Gayatri will feel safe, capable, and confident in her voting activities.
DESIGN STUDIO
Gimme all your ideas
We conducted a fast sketching exercise wherein we drew as up as many ideas as we could within 6 minutes.
Then, we presented our ideas to each other, critiqued, and fused our ideas together.
Our design studio sketches. Click to see more.
PROTOTYPING
Where we went first
Through our low-fidelity prototype, we were able to flesh out our principles of security, accessibility, and simplicity.
Screens from our low-fidelity prototype. Click to see more.
USABILITY TESTING
How enjoyable is the experience?
We tasked these real-life Gayatris with:
- Verifying their identity using a document.
- Voting in the 2020 general election.
Through these tasks, we hoped to observe their understanding of the multiple ways to discover and contact other users as well as an innate understanding of our features themselves.
What we learned
We interviewed 10 people who fit within our defined user base. What we found was this:
- Users found the app straightforward and easy to understand.
- Users weren't sure how safe they felt with biometrics.
- A few users wanted more feedback from the app.
Immediate solutions
We implemented these changes:
- Removing mandatory biometrics.
- Adding more feedback from the app confirming identity security measures and ballot casting took place.
Our solution
Helping users understand how to improve themselves
THE ORIGINAL LOOK
THE NEW AND IMPROVED