Yond
Yond was born out of a desire to help people heal after going through breakups. This product helps people find things to do and rebuild their sense of self-identity. With a gamified approach, Yond provides location-based suggestions for solo and group activities and encourages getting out of the house. With Yond, you’ll be feeling like the best version of yourself in no time.
Project
End-to-End Responsive Mobile Web-App
Timeline
3 months
Role
Sole Designer:
UX/UI Design, Prototyping, Testing, Research, Branding
Jump to Section
The Problem | Conducting Research | Defining the Opportunity | Developing a Solution | Visual Design & Branding | Prototyping | Testing & Revisions | Final Prototype | Takeaways
A Universal HardshipThe Problem
Breakups are one of the most stressful events in life, and this is an experience almost everyone goes through, especially by the time people enter their 30s.
82% of Americans have had their heart broken at some point in life.
The average American experiences 3 heartbreaks in their lifetime.
What are our users going through?CONDUCTING Research
To learn how to best address our problem, competitive analysis and user interviews were conducted. User interviews were especially important to this project because breakups are such a personal experience that varies from person to person.
Competitive Analysis
Competitive Landscape
What products out there try to help people going through a breakup?
User Interviews
Short-Term Impact
How did the breakup affect someone’s everyday life?
Time Spend
How did they spend their time after the breakup? What helped?
Post-Breakup Changes
How have their life goals/views changed?
Competitive Analysis
Products were looked at for their ability to guide someone through a breakup. Three competitors (Breakup Buddy, KeepNoContact, and Break-up Boss) focus solely on processing a breakup, while Headspace has a platform approach for general mental wellness.
What they Offer
Tools to process negative feelings:
Motivational quotes
Journaling prompts
Chatbots
Mood trackers
What they Lack
Tools to build a sense of self, such as:
How to fill newly gained time
Incentive to get out of the house
Guidance for physical activity/movement
user Interviews
Seven participants were interviewed regarding their breakup experiences. Participants were of all genders, in their late 20s to early 30s, lived in major metropolitan areas, and had gone through what they had considered a significant breakup in the last 2 years.
Questions that users were asked centered around how their daily routines changed, what struggles they faced during the healing process, and what they learned about themselves after going through and healing from the breakup.
“There were days I didn’t get off the couch. Some sort of external accountability to get me out of the house would have been nice.”
“I always had an interest in coaching soccer but didn’t have time to pursue it before, and I wanted to prove that I could build a new identity after feeling like I had failed my relationship.”
“I felt restless and made sure I had plans for every day. I was able to distract myself for so long that the flood of negative emotions [from the breakup] never came back.”
Confirmed assumptions
The initial loss was losing the picture of an envisioned future
The lingering loss was losing the individual person that was a friend in their life
All participants needed some form of external accountability/resource to help heal from the breakup
New Insights
After the initial emotional shakeup, some people were able to distract themselves and stay busy to reduce negative emotions
People that initiated the breakup had lingering feelings of guilt of hurting the other person more so than sadness of losing the relationship
People that jumped into casually dating before they initially felt ready ended up feeling more energized, confident, and optimistic about themselves due to the new connections they were making
Our Main Persona
Using the information gathered in user interviews, the main persona chosen for this project was someone who is outgoing and generally self-confident, but at a bit of a roadblock in their life. This person wants to move their life in a new direction after the breakup but isn’t sure how to spend their time on their own after being so used to going through life experiences with a romantic partner.
Defining the opportunityHow Might We…
help outgoing people in their 30s rediscover their interests when they've been set aside during a relationship?
converging, diverging, convergingDeveloping a solution
Ideation
While many potential solutions came from the brainstorming phase, two were chosen to be storyboarded in the sketches seen above:
Connecting with Strangers: Offer group activities & support, to help people get out and know they’re not going through grief alone
Discovering new Hobbies: Offer endless activities with incentives, to help people get out and try new things
After feedback evaluating the two options, solution #2 was the path chosen, and product goals for the user experience were created to help dictate the remainder of the project.
Design/Feature InspIration
For main features of the product, I looked to existing products to get inspiration on their design patterns.
Instagram, Duolingo, Hinge, and Bumble all have millions of users user base and continue to make improvements to their UI, so it was important to leverage on what established companies have worked on. I used similar cards/swiping, icon navigation, progress, and profile design patterns in this project.
Shmoody and Timeleft are products that are closer to Yond’s product offering and user base so it was helpful to understand how they presented information in a way that would encourage their users on a positive emotional level. I used similar home page and calendar design patterns in this project.
Shaping a User Journey
Key screens were sketched to get a feel for the user’s journey throughout the product. The screens with the most interactions would be the:
Profile page
Explore page (where users discover new “Quest” activities)
My Quests page (where users manage their ongoing Quests and see their progress).
Different design patterns were tested in these sketches, such as icon choices, navigation style, and UI element placement.
As the key task flows were created, the necessary features of the product fell under 3 main categories:
Onboarding & Accounts, Interacting with Quests, and Personalized Quest Suggestions.
Prioritizing Features
All potential product features were sorted using an effort/impact matrix. The color coding in the feature matrix shows the status of each feature, including those that were ultimately removed from the final version after testing. Some features were considered from looking at what was offered by competitors but never built into the prototype, due to early feedback and discussing key user journeys.
Challenges
Based off of existing products in the app space, including those referenced in the design inspiration section, this project faced three main types of challenges. These were reframed as questions I continuously asked myself during the development and refinement phases.
The Look and FeelVisual Design & Branding
In initial low-fi mockups, there were motivational quotes throughout the product as a way of encouraging users. As higher fidelity screens were created, these quotes did not fit in the product as naturally and were removed from the set of features. However, as a product aiming to help people going through an emotional time, having the right tone of the visual design was incredible important.
Every piece of the visual design and branding was iterated upon until it best reflected the brand values: Confidence, Curiosity, Courage, Discovery, and Play.
The name Yond represents looking beyond what is simply in front of the user, not just on a physical level but metaphorically beyond the current emotional and mental roadblock they are facing.
The handwritten wordmark and blimp pictorial logo represent the easygoing but adventurous spirit of the brand and its users.
The outline style icons, especially the navigation icons, are communicative and inspire the user to embark on Quests.
The teal and orange color palette is empowering, unique, and friendly.
All usage of the color palette within the product comply with WCAG AA levels of contrast.The Lexend typeface is playful, bold, and clear.
This typeface was originally designed to help people who struggled with dyslexia and improves reading-proficiency.
The exploration of the visual design and branding elements can be seen below:
Theme, Name, & Logo
Space, land, and underwater themes were considered when evaluating adventurous themes. The chosen theme (land adventure) resonated most closely to the experience a user would have on while on Quests. Space and underwater themes also seemed too dark and cold, where the tone of the app was to be open, bright, and warm.
Color Palette
The final color palette chosen is seen in the center. The primary color for Yond is Gold Drop Orange, which captures a bold and sunny spirit while easily remaining AA contrast compliant. The secondary color is Lagoon Blue, which evokes feelings of curiosity and tranquility.
Typeface
Three typefaces were evaluated and all give the product a different feel. Lexend was chosen for its combination of the strengths of Rubik and DM Sans: personality and legibility. The weight of the Lexend typeface also complements the bold lines of the icon set.
Putting it all togetherPrototyping
Going back to the 3 main categories of key features a user would need for the app, mid and high fidelity screens were created. Animations and gestures were mocked up as separate screens, seen below.
Overview/Onboarding
Interacting with Quests
Updating Interests
Early feedback and feedback on the effectiveness of these screens were incorporated into the interactive prototype used for testing:
To help people get a sense of the product offering, a slideshow of Quest environment photos was used for the loading screen background.
To reduce the user feeling overwhelmed during onboarding, overview screens were replaced with on-screen tooltips only.
To reduce visual clutter, grid alignment and element spacing were tweaked, and less visually-complex photos were used for Quest cards.
user-centered design in actionTesting & REvisions
Usability Testing
A moderated test was conducted with 5 users, either in-person or over video call and screen sharing. This allowed me observe at which moments users hesitated or misclicked on the prototype while trying to complete a task.
In this test, users were to complete 4 main tasks. The detail of the test as well as the success metrics and outcomes are shown below.
Final Revisions
Conducting testing on the high-fidelity interactive prototype was extremely valuable as it highlighted key issues of the product usability. While some of these items were conceptually understood while explaining them in feedback sessions (onboarding process and how to update interests), it was a very different experience once users were not provided any instructions for how to complete a task.
Revisions were made on all features with less than 80% pass with confidence. Major changes are outlined below, and the screens with the most UI improvements are shown beneath them.
Before & After: Onboarding
Before & After: Interests On the Explore PAge
Before & After: Correcting User Error on Skipped Quests
With all of the changes incorporated, the final prototype is shown below. All task flows are combined within one prototype — try it out for yourself!
A Look back on the JourneyTakeaways & Next Steps
Reflections
What Went Well
Users enjoyed the modern aesthetic, clean UI
Users found the product idea useful and delightful
I enjoyed the process of the project itself! Relationships are strengthened when we share our vulnerable experiences
What I Learned
It’s difficult to teach new concepts, and when needed, on-screen tooltips are more effective than onboarding tutorials
All forms of visual imagery (from emojis and icons to types of images) can play a big role in the user’s experience with a product
Deviating from established design patterns can cause confusion, even if convenience was the original intent (e.g. having Interests be accessible from each page)
Next Steps
Evaluate Additional Features
With more time, I would look into implementing the following features:
Points and smaller rewards
A non-monetary XP system so users can track their experience going on QuestsQuest check-ins
Location-based check-ins to begin FlexQuests and to validate attendance for pointsSocial media account integration
Options for login using Instagram, and for adding Friends via Phone/Instagram contacts
Post-Launch MEtrics
After product launch, I would want to collect data regarding the following:
Product abandon
When users exit the web-app, at what location in the product did they stop engaging?Repeat Quests
What percentage of users come back to schedule more instances of the same Quest?Filter & search usage
How often do users filter and search for specific cards on the Explore page?Popularity
How often do users filter and search for specific cards on the Explore page?