Jordan Gozinsky
BuddyBoost
BuddyBoost is a mobile application that aids users form long-lasting friendships with the people in their area
Overview
BuddyBoost was developed as a project for the UI/UX Design Bootcamp at Stony Brook University. As the project lead, I was responsible for all aspects of the design process. This included user research (such as surveys and user interviews) and the creation of user personas and journey maps. I also developed sketches, wireframes, high-fidelity mockups and prototypes. Throughout the project, I made design decisions based on insights gathered from potential users and feedback from my instructor.
Goal
There are numerous applications available on app stores designed for individuals who are interested in dating and forming new romantic connections. However, there are very few options that cater to those who are looking to make new long-lasting friendships. BuddyBoost aims to fill this gap by providing an intuitive and efficient platform that helps users build meaningful friendships with people both in their local area and beyond.
Role
-
UX Research
-
UX Design
-
Usability Testing
Tools
-
Figma
-
Miro
Team
-
1 UX designer
Timeline
-
Overall: 14+ weeks
-
Research: 4+ weeks
-
Design & Testing: 10+ weeks
Surveys
One of the initial steps in the project involved defining clear objectives and a comprehensive research strategy. My top priority was understanding BuddyBoost's target audience and the challenges they may face. To achieve this, I created an online survey which was distributed across numerous communities. After a few days I collected a range of responses, which identified key pain points. These included a preference for making new friends in person rather than through an app, as well as concerns about the authenticity of individuals met online.
Interviews
To build user personas, I conducted user interviews during the ideation phase of the BuddyBoost project. I began by developing an interview script with thirteen open-ended questions, focusing on the target users' backgrounds, social skills, experiences and preferred methods of making friends. Over a period of five days, I remotely interviewed five participants. This step was crucial to the project's development, since the insights gathered from the interviews were referenced throughout the remainder of the design process.
Personas
Following the interviews with potential users, I sought to deepen my understanding of their behaviors, experiences, needs and goals. This was accomplished by creating two personas in Miro, based on two interviewees who most accurately represented the broader group of participants. These personas were consistently referenced throughout the project to guide and inform design decisions.
User Journeys
It was my responsibility to ensure that the application's users could seamlessly achieve their goals of meeting new people and forming friendships. To facilitate this, I created user journey maps in Miro to visualize the steps users would take to reach their objectives. During this process, I identified that key features-such as blocking and reporting profiles-were missing. By incorporating these functionalities, a revised design was developed to enhance the overall user experience.
Flow #1: Viewing Profiles
Flow #2: Viewing Likes
Flow #3: Messaging
Sketches
The design process began with hand-drawn sketches, which played a crucial role in guiding the subsequent stages of development. These initial visuals provided a clear foundation for all future design decisions. The sketches were heavily influenced by the insights gathered from the completed surveys, interviews and user personas. Upon review, it became clear that the initial designs presented challenges related to usability and layout, particularly for users browsing BuddyBoost with one hand. Throughout the remaining design process, these sketches were continuously referenced to ensure that the identified issues were addressed and resolved in the final design.
Low-Fidelity Wireframes
Using Figma, I transformed the initial sketches into low-fidelity wireframes. These wireframes were subsequently reviewed and approved by my course instructor. Following approval, the wireframes were utilized for user testing. After conducting three rounds of testing, the wireframes, along with the feedback received, were used to create high-fidelity mockups.
High-Fidelity Mockups
In Figma, the low-fidelity wireframes were transformed into high-fidelity mockups. During user testing, participants suggested that the designs could be updated to achieve a more modern look. This feedback served as a key inspiration for the updated design incorporated into the mockups. Once the mockups were finalized, they were used to create a working prototype, which was then tested through multiple rounds of usability testing.
Usability Testing
Using Figma, the high-fidelity mockups were transformed into a working prototype. During the development of the prototype, potential users were recruited for usability testing. The first round of testing involved five participants and took place over the course of two days. Upon completion of this round, the feedback received was used to refine the designs. Following these adjustments, a second round of testing was conducted with an additional five participants to evaluate the changes made and gather feedback on how well the issues from the initial round had been addressed.
Issue: Missing back button
Findings: A significant issue identified during usability testing was the absence of a back button. On the numerous pages used for adjusting user settings, the absence of a back button required users to rely on the confirm button to return to the previous page. Of the five tests conducted in the first round, three participants instinctively searched for a back button before selecting the confirm button, while one participant was unable to navigate back without it. This lack of a back button led to frustration for all four participants, who emphasized how crucial this feature is.
Solution: Following the completion of the final tests, a redesign was undertaken based on the feedback received. During this process, back buttons were added to the relevant pages. Two design iterations were created: one featuring a back arrow in the upper-left corner, and the other incorporating a back button beneath the confirm button to maintain visual consistency. After careful consideration, it was decided to implement the back arrow, as it was easier to identify when quickly scanning the page. This updated design was tested in the second round of usability testing, where it caused no issues for the participants.
