Phone_edited.jpg

BETTER TOGETHER
 

Project: Personalized app
Role: UX/UI Designer and researcher
Team: Solo

Platform: Mobile app

Tools: Sketch, InVision, Photoshop, Illustrator, Keynote

PROJECT OVERVIEW
 

Better Together is a personalized app, built entirely for one user.


The Challenge: The task was to create an entirely personalized app for one user. The objective was to strengthen our empathy tools, to discover, via user interviews, what app would most assist our user in their daily lives. My client (M) was looking to strengthen her connection with her husband as well as herself, instead of turning to social media to calm/distract herself. M was very clear that she didn't want any sort of hook method folded into the app. 

The Solution: I created a social wellness app that would support her during times of stress. It would serve to build her wellness reserves and it would be a tool that her and her partner used together, building their connection simultaneously. 

 

"I'd hire you because you're empathetic and careful with sensitive information. I deeply appreciate the way you handled and presented what I shared with you. You made me feel safe when otherwise I'd worry that I said too much". — Client.  

1. RESEARCH
 

Brief overview
User Interviews

Brief Overview
 

The drive behind this project was to truly connect with the user and via qualitative research, discover what the client's (M) primary concern was. From that, to create a solution via a mobile app. It would be completely personalized to M and the UI would align with her style too. 

User Interview

After a series of interviews with my user, M shared that she needed to spend more quality time with herself and her husband. She found herself, in free time, turning towards apps that didn't leave her feeling uplifted. Each time she took a moment to be creative, meditate, eat well or be outside, any sense of overwhelm evaporated and she had more energy to continue with life's tasks. She also shared that her husband (A) often received her stress calls. When A wasn't available in that moment it would leave her feeling disconnected from herself and him. I learned the value of trust and really taking time to sit and empathize with my user. Had she in any way felt uncomfortable with me, I might have created an entirely different app, not meeting her need for connection and well-being. It was a privilege to interview M, to discover my love of user-research that could easily have been passed off as a mere modality. This project marked the birth of my true understanding of User-Centered Design.   

Show More
Show More
Show More
Show More

Personalization 

M shares that both her and her husband, love illustration and being creative together. This informs concepts for potential features, as well as inspiration for the style guide and branding.  

Show More

User flow
 

Walking through the user flow, it assists us in understanding M's emotional journey. It's clear that her pain point is the moment her stress rises and she's unable to reach A in that moment. The app could serve as a means to assist in calming her stress until A becomes available again. 

Show More

Problem Statement
 

Defining the problem statement from a core place; allows for a more fulfilling 
solution for the user.  

Show More

Solution
 

This hypothesized solution becomes the north star for the app, providing a direction for the UX process. 

Show More

2. SYNTHESIS
 

Experience Flow 
Story board & sketches 
Paper Prototype

Experience flow
 

This methodology allows us to envision  the emotional journey alongside the action steps with the app. It starts to flush out the flow to discern any pain points that may affect the user's experience of the app. 

Show More

Story board & sketches
 

Visualizing the flow provided further iterations and features. Wellness options were added at this point as well as a wellness points system. This feature was ousted upon the next iteration as my primary user was against any hook systems. She felt prone towards them and noticed her anxiety levels increase in this frame.  

Show More

Xremove pain-point

Paper Prototype
 

This flushed out some of the previous pain-points and the app's visual hierarchy began to take shape. Headers for each page assisted with site navigation, as did the footer icons. This stage allowed me to begin user testing with other users, for a wider perspective on the app. 

Show More

3. IDEATION
 

Onboarding 
User testing
Wireframes

 

Onboarding

4 Onboarding pages were added to help users understand the function of the app. These were also built with the key feature of personalization, as the photos  converted to illustrations and became the icons then featured throughout. This was a deeply meaningful addition for the client. 


 

User testing
 

This stage allowed me to begin user testing with other users, for a wider perspective on the app. 

Show More
Show More
Show More

Ideation
 

The green arrows note pages and features that were updated post user-testing. Visual elements were arranged for an optimized flow, as well as navigational copy to guide users on where they were headed to, next. 

Show More

Top row is low-mid fidelity

Bottom row is high- fidelity

4.VISUAL DESIGN

Brand Voice

Moodboard 
Color Palatte
Style Guide

Show More

Brand voice and objective
 

The brand voice echos the user's personality and possibly even objective. It allows me to keep these these as a core foundation that when moving from mid-fi to the high-fidelity prototype. It also influences the voice of the copy and the atmosphere of the app. 

Show More

Moodboard
 

During the interviews, M spoke of her favorite illustrator. This, plus the brand-voice offered me a framework to build visual imagery around. I also pulled in some prototypes that might further inspire the layout for the MVP. 

Color Palatte
 

When I initially designed the color palette, I pulled some colors from one of M's shirt. I tested these with her, and she steered me towards an entirely different color range. For a creative (client and primary user) a cohesive color palatte will immediately create further connection with the user. The converse is true too. 
The image below features the iterations of color. 

Before

After

Style Guide
 

The style guide aids as a visual reference throughout the design process. 

Show More

Prototype
 

In this MVP, user journey, M is lead through the process of onboarding and the experience of lowering her stress-levels. she then has the capacity to share this achievement with her husband, A, and it fosters further connection between the two of them when they're unable to be in the same physical location. 

Phone_edited.jpg

5. ACCOMPLISHMENTS, Etc. 
Accomplishments
Next Steps

Accomplishments
 

We were able to reach our stretch goal of user-testing and improving the Marketing Site. The updates mostly rested within the realm of visual hierarchy and Heuristics. I would suggest a 2-week sprint dedicated solely to the Marketing site as it's a key income generator, and I see major growth potential here. 

We simplified visuals, offered more space and guided users towards booking a meeting as this was the key function of the site.

Show More

Next Steps
 

I would like to build out the other wellness features within the app, possibly taking  a 2-week sprint for each. Thereafter, exploring the option of the user being able to draw their own icons, a feature that M expressed interest in. 
This would continue the personalization aspect as well as fulfill her need to be creative, together with her husband, A. I would also add a share feature to build on their social wellness circle, as desired. 

  • Instagram - Black Circle
  • Facebook - Black Circle