top of page
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.
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.
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.
Problem Statement
Defining the problem statement from a core place; allows for a more fulfilling
solution for the user.
Solution
This hypothesized solution becomes the north star for the app, providing a direction for the UX process.
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.
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.
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.
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.
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.
Top row is low-mid fidelity
Bottom row is high- fidelity
4.VISUAL DESIGN
Brand Voice
Moodboard
Color Palatte
Style Guide
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.
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.
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.
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.
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.
bottom of page