UX/UI Case Study
Yolo
Making friends one event at a time.
Role:
Project lead & sole designer of UX/UI
Tools:
Friends keep us company through the difficulties of our lives and help us grow, but when people move to a new city or town, fear and social anxiety can creep in and prevent us from going out and making new friends. If only there was a way to help ease the process of meeting new people. Luckily for us, there’s Yolo.
Premise
Yolo is a social platform designed to facilitate connections and forge new friendships through real-life experiences. Despite its mission, data analysis has revealed that only 20% of individuals who express interest in attending events actually follow through. Yolo suspects that inadequate communication regarding upcoming events may be a contributing factor, and recognizes the potential need for incentives to boost event attendance rates. The primary goal of this case study is to devise a cost-effective solution that will elevate the conversion rate of accepted event invites to actual event attendees.
Research
Before working on possible solutions, I needed to gather more insight about Yolo’s users. Having this is important because it helps navigate user centered solutions with the brand’s identity and goals. I sat down with Yolo’s project manager and gathered the following demographics of their users:
32-55 years old
User base is an equal split between men and women
Uses phone and desktop applications equally
Middle class
Recently relocated to a new city
Interviews
To uncover any underlying motivations and objectives users may have, I conducted an online survey, screened participants based on Yolo’s user demographics, and held 5 interviews that last approximately 30 minutes each. I developed a script that guided me through each discussion focusing on questions dealing with event attendance such as:
Why do people attend events? (Benefits? Expectations?)
Why do people back out of events?
Does any disinterest of the event ever occur? (If so, when? Why)
What type of events do people plan on attending?
Affinity Map
To simplify the notes gathered from the interviews, I coded them onto sticky notes and organized them by similarities. The affinity map below provides a broader perspective of the insights gathered during the interviews, making it easier to comprehend the data, which will better allow us to generate more effective solutions.
Personas
Personas are instrumental in prioritizing the users' perspective and ensuring that our design efforts revolve around their needs. With this in mind, the personas of Scott and Jean were created. Note that these personas are not real people, just a synthesized version of the observations and analyses of the people who took part in the interviews.
Empathy Map
While Personas provide a structured representation of our target users, Empathy Maps offer a more nuanced understanding of users' thoughts, needs, behaviors, and emotions. By delving deeper into the emotional and psychological aspects of user experiences, empathy maps complement personas by providing a richer context for designing solutions that resonate with users on a more personal level.
Competitive Analysis
After conducting initial research on the users, the next step was to get a better understanding on our competition. Doing this would help us gain insights into industry trends, user preferences, and best practices that can inform our product development and strategy.
I researched the top three apps in the same industry as Yolo: Facebook, Meetup, and Eventbrite. I focused on what stood out in each app, noting key features and common user experiences. By analyzing the pros and cons of each app, I was able to create a benchmark for our platform and identify potential action items that could differentiate Yolo in the marketplace to drive a competitive advantage.
Facebook is a social networking website where users can post comments, share photographs, and post links to news and other interesting content on the web, chat live, and watch short-form video.
-
-Browsing events simplified
-Interested/going buttons
-Event discussion
-You can see your friend’s activity
-
-Can only see friends’ activity; not other people
-Discussion seems unimportant - no real contrast
-
-Create an event discussion board
-Prioritize friend’s activity with an event but be able to see everyone else that’s going
-Create incentive for people to go to events
Meetup is a social networking site that allows you to find and join groups related to your own personal interests and organizes offline and in-person meetings in your area.
-
-Event chat and direct messages for organizing messages
-Event chat to encourage engagement with an event
-Reminder notifications to reserve
-Simple and effective interface
-
-Dark interface feels uninviting
-Browsing could be improved
-
-Event chat
-Notifications/countdown of events attending
-Create incentive for online event engagement
Eventbrite is a global self-service ticketing platform for live experiences that allows anyone to create, share, find, and attend events that fuel their passions and enrich their lives.
-
-Simplistic interface
-Can easily contact organizer
-FREE label for quick visual reference
-
-Can’t see how many people will be attending
-App feels like its main objective is to profit off fees rather than to promote events
-Have to “register” for a free event
-
-Include a going button
-Filter upcoming events automatically and manually
-Making going to an event easy to do
-Create incentive for attending events
User Flows
In order to streamline the user experience and optimize usability, I created a site map with 3 user flows: creating a new account, attending an event, and engaging in an event. By mapping out the journey users would take in each of these tasks, I gained valuable insights into possible user interactions and pain points; thus, allowing me to tailor their needs at every stage of engagement.
Sketches
With the site map and user flows already in place, I had a clear roadmap for developing the screens needed for the project. I proceeded to sketch out these screens, incorporating the insights gathered from my research. This method ensured that the design was user-centric and in line with the project’s goals, ultimately leading to a more effective and intuitive user experience.
Guerilla Testing
As the design process progressed, making changes can become increasingly challenging and time-consuming. Therefore, testing early and frequently for usability issues is essential. Before converting my sketches into high-fidelity wireframes, I wanted to test my designs for the following reasons:
Are my screens and concepts easily recognizable?
Can users navigate the flows and tasks smoothly?
Which areas do users gravitate towards or find confusing?
To achieve this, I used the Marvel App to create a prototype from my sketches. I conducted remote usability tests with three users via Zoom screen share, prompting them to think out loud as they interacted with the prototype.
The tests provided valuable insights, highlighting the need for more details in the onboarding process, improvements in the user flow for event check-ins, and clarification on the incentives offered, among other findings.
Incorporating this feedback facilitated iterative improvements and enhanced my designs with a smoother flow, preparing them for conversion into high fidelity.
Hi-fi Wireframes & Prototype
After several essential iterations of my sketches, I proceeded on and converted them into high fidelity wireframes using Figma. To streamline the process and increase efficiency, I utilized the Brainstorming UI Kit, customizing it to align with the requirements of Yolo. Leveraging the capabilities of Figma’s features, I was able to quickly create interactive high-fidelity wireframes for prompt usability and functionality testing, which in turn would provide quick assessments and adjustments.
Style Guide
Yolo is a brand that embodies the qualities of being a trusted friend who genuinely cares about helping people and making a positive impact. The brand attributes of Familiar, Humorous, Optimistic, and Caring served as the guiding principles for selecting its brand colors.
The color Blue was chosen to represent trust and familiarity, Yellow symbolizes humor and optimism, and Pink signifies care and empathy towards others. With a clear vision of the color scheme, I used coolors.co to refine and finalize the color palette that best reflected Yolo's brand identity and values.
Usability Testing & Results
To test out my designs, I conducted 5 usability tests where users navigated the app and completed tasks such as event registration and browsing. I observed their behavior, timing, and difficulties, encouraging them to vocalize their thoughts throughout. Afterward, I interviewed each user for deeper insight into their overall impression, potential criticisms, and their thoughts on the event incentives offered.
With the results from the tests, I organized the data in the table below detailing the issues encountered, a summary of each occurrence, recommendations for resolving the issues, and assigned priority levels to each problem.
Fixing Critical and Major issues was prioritized, as neglecting them could significantly impact the user experience. As for the Minor and Normal issues, although important, were put aside to a later set of iterations, as their features/benefits did not qualify for the minimum viable product (MVP).
Insights
In hindsight, one aspect I would have approached differently is the creation of additional screens. Initially, I only developed the necessary screens for the established user flows. However, during testing, I realized that users were constrained to following a specific path, limiting their ability to explore freely. This lack of interactive screens meant that users had to seek assistance when encountering obstacles. By designing more screens, users could have navigated more naturally, providing a richer set of data points and a more realistic user experience.
Regarding the selection and implementation of the UI kit, the focus was primarily on aligning the kit's visual elements, such as color schemes, with the brand identity. However, a crucial oversight became apparent as the project progressed - the UI kit's usability standards - typography sizes to be exact. The realization of this discrepancy lead to a significant amount of design revisions, involving font changes and screen reformatting. While the selected UI kit was undeniably well-crafted and visually appealing, its usability shortcomings highlighted the critical importance of accessibility in design. In the future, my top priority will be to proactively evaluate the usability standards of any UI kit before committing, as this will help ensure the interface is accessible to all users and prevent potential design challenges down the line.
Conclusion
In conclusion, our research has revealed that the most effective way to facilitate the meeting of new friends is through passive social interactions rather than active pursuit. By creating social incentives that revolve around an individual's existing social circle, we can increase event attendance rates and improve the overall user experience. This approach not only enhances Yolo's event attendee conversion but also fosters natural and enjoyable interactions, shifting the focus from planned engagements to organic connections. By prioritizing these strategies, Yolo can create a more engaging and inclusive platform for users seeking to expand their social networks.