The Problem

New Kast users were unable to find their friends/friend's watch parties on the mobile app, leaving them confused and annoyed.

Design Challenge

Designing a mobile search experience that allows the user, especially first time Kast users, to find other users and parties quickly and easily.

The Solution

After several rounds of competitive research and iterating on designs, I designed a search experience that enables mobile users to easily find and interact with their friends.

Setting the scene

Kast is a start up with the goal of simulating "virtual living rooms" where friends can come together to watch tv/movies, play games, etc. Users share their screens with each other in virtual rooms called parties, interacting via chat and/or webcam.

When I started my contract, although the mobile users already made up a decent percentage of users on Kast, the mobile app lacked several key features compared to the desktop version. As the user base continued to grow, especially as the pandemic started picking up steam and people needed a service like Kast more than ever, I began to focus on fleshing out the mobile app.

One of the key features that was missing was a search function for other users and parties to join. New users do not have a personalized home page with parties they have joined in the past. Without a search function, they can only accept party invitations/friend requests. This can be a struggle for users unfamiliar with the on-boarding experience.

We noticed that new users on the mobile app were struggling to make it into parties. This implied that exclusively joining parties through invitations was insufficient in maintaining a healthy conversion rate.
‍
With this problem in mind, I began my design process with competitive research.

Competitive Research

I started by looking at apps that allowed you to search for other users or groups to join including Snapchat, Facebook, and Twitch.

My key takeaways:

• Most apps list their search results in a list format: After researching a bit more into this, I learned that this is because a list view is used when details are needed for a user to make a decision, whereas a grid view is for when visual information is needed.
  ‍
• Most apps have a specific CTA (call to action): A CTA not only informs a user on what additional steps they can take, it provides motivation for the user to take that step.
  ‍

Design, Iterate, Repeat

Due to the nature of being a start up, we worked in short, rapid product cycles to gain more insights from our users. These cycles, accompanied with engineering constraints, led us to pushing out the search functionality in waves. We first focused on searching for and adding other users. Because of this, my early designs only include user search, while later designs include party search.

The examples above are some of my early designs, with Version 1 including friend request management and the Version 2 focusing simply on searching for and adding users. Due to mobile profile pages not existing at this time, being able to add friends and join parties from the search results page was vital.

After internal testing, we found that Version 1 was not optimal for our purposes and clashed with existing designs. Instead of moving towards a confusing search/friend management hybrid, I began focusing more on a design like Version 2.

Now that I had an inkling of what the search results should look like, I began working on the start of the user flow; how users interact with the search bar.

These early search bar designs all start from the beginning of the user flow, the home page.  I tried several designs including:

• Expanding the search bar from an icon: Version 1 would require the user to tap the search icon and it would expand into one of the other versions above.
  ‍
  The mindset behind this version was to save space and effort for the user, but in hindsight, I realized that space could be saved through other means like removing the Kast logo. It also takes the user the same amount of effort to tap an expanding icon vs a search bar, except the icon itself is harder to locate immediately.
  ‍
• Search Bar under top nav icons: In Version 2, I chose to forgo space for clarity, making it obvious where the search bar was while maintaining the current mobile homepage's icon layout.
  
  Although user's should have no problem locating the search bar, increasing the size of the header took away too much space from the homepage's content. Most users on the mobile app are returning users with personalized homepages of parties they're in. These returning users have no use for a more exposed search bar.
  ‍
  
• Search Bar without the Kast logo: In both Versions 3 and 4, the Kast logo was taken out entirely. After consulting with the team, we didn't find explicit branding to be necessary after logging into the app.
  
  After some rapid prototyping, Version 4 was the best layout of icons for a user to interact with what they meant to, and was chosen as the design to be converted into high fidelity.
  

From here, I moved back towards search results, meeting with my design team and discussing what worked and what didn't. I was also focused on making search results consistent with the desktop app, which became a design dilemma later on.

As you can see, in the desktop app every search result is a card which when hovered over has an action tied to it. These actions include joining parties, sending friend requests, etc.

These cards include personalizations the user has made, including tags, profile pictures, and banner photos.

In an effort to ensure consistency across platforms, I mocked up the design above. Unfortunately, although this design did indeed match with the desktop app, it didn't necessarily work for mobile.

The cards took up too much space for search results that the user may have to spend an unreasonable amount of time searching through, especially if they're unsure about their search query.

After reviewing my competitive research and meeting with my team, I decided to move forward with another design that would be more user focused over cross-platform consistency for its own sake.

Both design versions had their pros and cons. The larger cards were more consistent with the desktop app and showed more personalized information. The minimalistic designs allowed for the user to view more search results at once, but got rid of some personalization.

Ultimately, however, the latter designs would let the user ingest more search results at once, while still providing the information users needed to move forward: User/Party name and a CTA.

The final design was heavily based on these screens.