Nitro
Maintaining connection despite distance.
Overview
Nitro helps with growing pains.
By growing pains, I mean the feeling of loneliness and lack of belongingness that happens when one grows physical and emotional distance from their closest friends. Nitro aims to remedy this and influence more connection by syncing to social media apps in order to automatically track interaction between friends. Users can also log tasks as reminders and redirect to other apps for interaction.
I implemented the UX Design Thinking Process in order to research and define the problem statement, ideate solutions, and iterate on prototypes.
MY ROLE
This project was accomplished individually under the guidance of a professional UX Designer.
The Problem
I knew that I wanted to tackle struggles in friendship but didn’t have a clear definition on what that struggle meant. In order to narrow down the scope of my mission and better understand the problem, I performed one round of five user interviews, supplemented by desk research.
I selected interviewees that reported low social satisfaction through a screener survey.
DEFINING “STRUGGLE”
Hypothesis
Interviewees lack social opportunities and/or friends.
Key Finding
Interviewees are in transitional stages of their lives where their close friends are no longer located in the same area and struggle with maintaining these connections for one reason or another.
From this commonality, I narrowed the focus of my problem statement and defined the struggle as a feeling of loneliness and a lack of belongingness in the context of long-distance friendships.
Synthesizing the Research
Now that I had a good idea of the audience I was solving for, I used a combination of affinity mapping and personas to synthesize my research and guide the ideating process of my journey (complete persona not depicted).
PERSONAS
David Smith
He is extremely busy with balancing studying, work, and social life, and his social life often gets the short end of the stick
Often feels lonely but stays home because he is too tired too socialize
He is introverted and prefers to spend the few time he has with close friends
She has difficulty balancing work with social life
Most of her close friends are located elsewhere
She wants like-minded friends that she connects with on a deeper level
She dislikes the small talk phase in the beginning stages of meeting new people
She feels that she is growing apart from her old friends in other cities
Samantha Kim
AFFINITY MAP
HOW MIGHT WE STATEMENTS
In order to turn my problem statement into a solution, I diverged into three how might we statements (HMW’s):
emotional bonds (two-way connection that differentiates an acquaintance from a close friend),
empathy (knowing and/or feeling the emotional state of your friend),
and understanding (understanding of a friend’s life and journey, their overall status, health, and wellbeing)
How might we allow people to build…
These elements are what make people feel seen, ease loneliness, and provide belongingness. Creating a solution that answers these questions will effectively resolve the struggle with long-distance friendships by maintaining that feeling of belongingness.
Ideating
With a new question to answer, I formulated a solution statement that tackled the HMW’s and would help me to develop a full-fledged solution:
SOLUTION STATEMENT
As a designer, I want to build an app that allows users like David and Samantha to track engagement and influence more connection in their long-distance friendships.
To kick off the ideation process, I created a list of user stories as well as a few user flows of primary red routes. I chose user stories that were necessary in accomplishing the solution statement to incorporate in my minimum viable product, or MVP.
USER STORIES AND FLOW
Example User Story:
Included in MVP: Display levels of interaction with users
Not included in MVP: Sort different forms of engagement
Example User Flow:
First Sketches
Once the MVP was established, I put my ideas onto paper with my first sketches. In the original sketch designs, I attempted to gamify the engagement tracking process by equating the engagement to a health bar that was visualized by the health of a plant representing each friend. The gamification of this app is intended to make the process exciting for users and feel less like a boring task app, since interacting with friends is supposed to be exactly that: exciting.
GAMIFYING FRIENDSHIP
In order to test the functionality of this idea, I performed a round of guerrilla usability testing on five users:
GUERILLA TESTING
Key Finding
Labeling used to gamify the app made buttons and the concept of engagement confusing. Users were left guessing what “health” meant or what “feed” meant in the context of the app.
Quick Fix
Modifying the labeling of engagement bar from “health” to “engagement.” This is straightforward to the user and stays true to the original intent of the app while still maintaining gamification elements.
Visual Design
Before moving into high-fidelity prototyping, Nitro needed a color palette and visual design concept. I settled with a monochrome palette for its simplicity and minimalism. For the primary color, I chose a subtle mint green. The green reflects not only the plant motif for the app, but also growth, friendships, and security. I chose a more rounded font (Nunito) to give the app a playful nature, in line with its gamification elements.
BREATHING LIFE INTO NITRO
From Sketch to Wireframe
Establishing my sketches allowed me to move into wireframing, but the screens needed to be less cluttered first. I modified the layout of a few main screens, such as the home screen and parts of the friend engagement screen to make information more easily digestible.
A single CTA button labeled “interact” replaces three individual buttons from the original sketch, making room for the addition of a task list. This establishes a stronger visual hierarchy, allowing for more intuitive navigation. As users peruse the screen, they see the health of the flower first. As their eyes scan down, they can see in more specificity how high or low their engagement with the respective user is, followed by a task list of interaction for the user, and an interact button that draws the user in to influence more engagement based on the task list.
Iterating
I performed a round of usability testing on five users with my high-fidelity prototype in order to get first impressions, identify potential usability issues, and test for seamless navigation. Upon testing, I found a number of minor and cosmetic issues. Of these issues, I made three primary adjustments based on both what I found to be most essential to the functionality of the app, as well as what was most easily adjustable within a short time period.
USABILITY TESTS
Changes Made:
Increased the size of the tab bar icons and labels to be more easily readable
Changed the title of the destination screen from “Choose a Destination” to “Swipe to a Destination” to emphasize a swiping feature on the buttons
Modified the wording of interaction time to make it clearer.
After these changes were made, I performed another round of usability testing with five new users in order to confirm that the initial usability issues were fixed. While I found the new iteration to be successful, I also found a conceptual gap in the user’s understanding of the engagement bar - the relation between hours of interaction and engagement percentage was not clear. In order to resolve this, I altered the depiction of engagement from a percentage bar to a low, moderate, high scale to better reflect users’ mental models of interaction. Users don’t typically think of social interaction in terms of exact numerical value, which meant representation of it needed to be more abstract, thus presenting the new low, moderate, high scale.
Prototype
Reflection
1. Time management is key.
It would be amazing if we had all the time in the world to work on projects, but unfortunately most of the time that isn’t the case. This makes it all the more important that I time-box my work and set expectations for how long a project will take so I can use my time efficiently and ensure results.
2. Sweat the little things.
I’m not saying to spend hours adjusting the size of an icon or font, but what I am saying is that sometimes the most impactful fixes are in the small details.
3. Get feedback and involve others in the process.
When you’re staring at the same design for hours on end it’s easy to lose perspective. Getting suggestions and opinions from others can help refresh your point of view and even spark new ideas.
LESSONS LEARNED
1. Explore other functionalities of the app, such as marketing to influencers.
2. Allow for more account personalization.
3. Add more features to the task list, such as due dates and timed alerts.
FUTURE STEPS