KIN's founder needed a UX designer to build and test her vision of helping people form authentic friendships and relationships. I joined forces with her to create an app that fosters the safety, proximity, and positive experiences necessary to help users meet new friends.
I joined this project after much initial research had been done, both through user interviews in a variety of cities and through the startup incubator in Atlanta Tech Village. My contributions included synthesizing some of the research, organizing the content structure, sketching, wireframing, prototyping, and testing.
This app's target users are people who have recently experienced a major life change, such as starting a family, moving to a new city, or becoming divorced.
I created this persona, Maria, to represent a new mom. She is a composite of the new parents interviewed and the market research done with ATV. She motivated some of the content strategy and event presentation decisions made in the app's design.
Through interviews with potential users in NYC, LA, and Atlanta, we learned that our users:
- Find it difficult to make new friends
- Want friends with common interests
- Feel safer meeting new people when accompanied by a friend
- Make connections more readily in smaller groups
I created empathy maps for the personas to better understand their perspective on making connections.
I started by determining what needed to be represented in the app. I used concept maps to represent these objects, centered on the human seeking new friendships.
Once I had the first draft of the concept map, I organized the ideas as shown in the second image. This iteration helped organize the app's elements and delineate which concepts warranted the greatest focus in the app's content hierarchy.
Satisfied with the paper sketches, I digitized the concept map. This made additional iterations easier and facilitated sharing the concept map with the app's founder so she could give feedback.
In well-designed apps, the user can navigate comfortably between actions on different objects. I created this relationship map using the objects identified in the concept maps to decipher those relationships, as this would later facilitate intuitive navigation design.
A key interaction is attending events found through the app, since this is how the user will be able to meet potential friends. I prioritized this flow because it is so important in providing value to users through the app.
I created this flow to describe the process of joining and logging into the app.
After the initial sketches, I re-created the flows in Figma, iterating along the way. The digital flows allowed me to experiment with the order and number of steps more easily, and to share the flows with my client.
Since sketching takes minutes and costs almost nothing, I focused on generating as many ideas as possible as I sketched. My ideation centered on events: browsing, attending, and tracking your upcoming events. How many ways can a user peruse their events? Or events in their area? I was learning which questions we needed to ask in usability testing and finding out which ideas needed to be wireframed for further investigation.
The sketches let me examine many divergent ways of organizing the app's event content. Exploring many different means of organization meant I got to see alternative options - and ultimately increased confidence that we chose the most promising design direction to pursue.
My client and I agreed on a direction to pursue, and I created some low-fidelity wireframes outlining key flows.
Our target users are people looking for new friends who share common interests and similar lifestyles. Events provide the space in which our users can meet other users who meet that criteria, so events are central to the app.
The event feed pictured here shows a user all of the events in their area that are coming up soon. The display of many events encourages the user to explore what's available and increases the chances that they'll find an event that appeals to them quickly - thus decreasing the time it takes for the user to get to the most valuable part of the product.
Photos are displayed along with each event tile because it's easier for users to scan images. The image chosen can help the event host communicate the type of event, level of formality and type of venue at which the event will be held. Additionally, the trend reflected in Facebook Events and Meetup.com supports attaching an image with any particular event to help the host and guests reach a mutual understanding of what to expect, so using images here aligns the app to that current trend.
Some, but not all, details are displayed along with the event title and image. The constraints strike a balance between giving the browsing user enough information to decide if they would like to learn more about the event while still protecting the safety and privacy of the event attendees. Obscuring the exact time and location while giving a general description of the neighborhood and time of day means both event attendees and users browsing events get the information they need in a safe and timely manner.
It's possible that a user knows specifically what kind of events they're looking for - and it's possible that they find the array of options available intimidating. A search and filter function overlaying the event feed solves this problem by giving the user control, to the extent they desire, over what events show up in their feed.
The user can search for events using a search term, such as "outdoors" or "art". This search works like a search engine: enter the search term, run the search, and view results. But, since all of the results are events in the app, we can give the user additional controls over their search results.
A series of filters allow the user to narrow down the type of event they're looking for. In this wireframe, Maria is looking for friends who share her family status: Married, Has Kids. She wants friends of a similar age range, so she's applied both the 25-35 and 30-39 age range filters. She's a working mom who's busy on the weekdays, but could meet people on the weekends during the day - so her filters reflect this availability. Finally, Maria has listed some of her interests, which helps the app recommend events that are aligned to the things she enjoys doing.
Maria has selected the "Kayaking" event from her filtered search results, and she's now looking at the details of the event. Here, she can see the event characteristics the host has set, and the app highlights the ones that match her criteria. This makes it easier for Maria to see if this is an event that she'd like to attend.
In this case, the shared characteristics include looking for friendship, married, 25-35, 30-39, and the time of day. The event aligns with two of Maria's interests - Outdoors and Active - and introduces additional interests, including River and River Activities.
Maria can also start to learn about the event's currently registered attendees. Minimal detail is shared here to protect those users' privacy and safety, but the detail that is shared is chosen to help foster mutual friendships: it's the things that Maria has in common with the event's attendees. Of the 5 people already attending, all of them are married with children, and each of them falls into the age range in which Maria is looking for new friends. She shares the Active interest with three of the attendees and the Outdoors interest with one of them.
The last spot on this kayaking outing is still available, and its empty state in the UI invites Maria to take it. The CTA immediately follows this outline of her attendance so that she is encouraged to register for the event and take that last spot, helping her achieve her goal of meeting like-minded friends with similar interests.
Here, Maria has chosen to register for the kayaking event. The app gives her confirmation that she is registered and shows her similar events. Presenting similar events cues Maria to keep browsing, which increases the possibility of her attending more events and, ultimately, meeting more new friends.
I created a high-fidelity prototype for usability testing and presentation to investors. In the high-fidelity version, I've applied the color, typeface, and imagery chosen to embody the warm and friendly tone of the product.
The iteration between the wireframe and the hi-fi version of this screen included two prominent updates: the chevron in the search bar, and the today and upcoming selectors.
The chevron in the search bar signals to the user that there are more search actions that they can take from the search bar. Tapping the chevron opens up the filters, allowing the user to filter the events displayed. The chevron makes it more evident that there are additional actions available, making this version more intuitive than the wireframe's inital search bar design.
The today and upcoming selectors were added following discussion with my client. In her research, she found that sometimes the cue for someone searching for an event is the time of day. Suddenly, the weekend is upon them and they don't have plans yet; my client saw an opportunity to alleviate this pain point through the app. The selectors added to the screen here support the user finding events to attend today, which solves the problem of the user wanting more immediate events.
The filters were iterated upon between the wireframes and high-fidelity prototype, too. Since finding the right events with the right crowd is so essential, the changes made to the filter interaction between low- and hi-fidelity centered on supporting that flow as best as possible.
In the hi-fi prototype, the user can enter specific tags for characteristics of the events they'd like to attend. This can include the ZIP code of the event, the type of event, the price range, and age range. An additional selection box allows the user to select what kind of guest lists they're interested in, ensuring that they're able to find the crowd most likely to lead to the kinds of new relationships they're looking for. By giving the user more control over what they're looking for, the design facilitates the user finding the kinds of people and events they want, increasing the value the user gets from using the product.
Here, the user has filters applied to the events in her feed. The active filters are displayed above the event feed so that she does not have to recall the criteria under which she's currently browsing. This lessens her cognitive load and communicates the status of the event feed, making the design more intuitive to operate.
The user views the details of the event. The CTA encourages them to RSVP should they decide to attend the event.
Here, the user has registered to go kayaking. She can now see specific event details and other guest profiles. The event details are finally revealed here out of logistical necessity and because once the browsing user has joined an event, it becomes in their best interest to keep the details private within the group as well.
The event's newest attendee also gets more detail about the existing attendees at this point in the interaction. Friendships require proximity and familiarity to develop, so the app begins that process by introducing the names and profile pictures of the event attendees. The browsing user's introductory information is similarly shared with the other guests so that each attendee can start to become familiar with their new friends.
I worked with my client to establish which tasks we would test and the testing protocol we would follow. Equipped with this information, we set out to coffee shops around Atlanta to recruit participants.I facilitated the usability test while my client took notes on the users' behavior and responses. We set expectations appropriately that this testing was to center the participant's thoughts, and only their thoughts - so there would be minimal to no specific instructions on how to complete a task. In order to test how intuitive the design is, we had to let the user interact with only the design: no assistance given.Each participant completed both tasks in the test. They were easily able to search for and register for an event, and upon completing those tasks they were able to plan an event using the app's tools. The participants were enthusiastic about using the app and were interested in signing up when it is released.
My client and I were delighted that the design had proven itself intuitive and desirable to members of its target audience.
Users recognized the value of the app in meeting the need for social connection. They found the design beautiful and intuitive, and showed enthusiasm for the app's development. This was very rewarding for me and underlined the importance of usability testing in the early phases of an idea's development.
My client's mentors within the incubator were impressed with the work and found the prototype a useful, valuable way of describing the app concept. She is currently pursuing funding for the app's development, and I am excited for the continuation of her journey with the application.
"I would recommend Rania in a heartbeat if I hear that anyone is looking to hire a designer/prototyper/customer validation person!"
- Michelle Martin, KIN founder