top of page

Supperclub

Frame 6921_new2.png

The Project

Supperclub is a digital meeting place for booking time with hard-to-reach industry experts in various fields. Our team consulted with Supperclub's founder to refine the app's UI and UX, simplify and improve the navigation, layouts, user flows, and even introduce brand new features.

 

We brought the product's System Usability Score from a 40.4 to a 94.5, within the top 5% of possible scores.

Team

Scope

  • Market Research, UI  (Melissa)

  • Project Management and IA (Marc)

  • UI and Wireframing (Morgan)

  • UX and Market Research

  • Sitemapping and User Flows

  • Wireframing and UI

Timeline

Three weeks

Overview

Background

Our team worked with Supperclub's founder to prepare her app for launch. Supperclub's core functionality is the ability for "guests" to book appointments with "hosts" quickly and easily, while at the same time networking with each other, sharing information, and—if they so choose—moving toward the monetization of their own expertise by graduating to a "host"-level account themselves.

The Initial Ask

Our team was first asked to develop a paid messaging feature through which "guests" and "hosts" could interact. Guests would pay by message at a price set by the host.

We conducted market research and features analyses to study competitive and comparative products, and understand best practices. Additionally, we held contextual inquiries with the existing product to gather user feedback and establish a baseline SUS score before we took any design actions. User research quickly revealed that users had a low willingness (50%) to engage with a paid messaging app, even at a lower price point than 1:1 consultations.

The Final Ask

Upon presenting this finding to our client, we were able to pivot away from creating a feature predicted to have low utility, to reframing our project as a head-to-toe refinement of existing UX/UI, with additional recommendations for improvements and future features that would provide more value add than the paid messaging solution.

The client shared that their VC funder would be able to conduct robust UX research and testing of our designs after the fact, so we concentrated on using guidelines of UX best practices to give the existing wireframes a full makeover, and conceptualize new features to recommend as we went through this process.

Priorities

Over-communication, organization, and careful time management were key to delivering our client a clear, improved navigational structure, and executing these ideas with well-thought-out, beautifully designed wireframes.

Preliminary Research

The research conducted on our initial product ask gave us an early and crucial understanding of user's preferences, allowing us to pivot quickly to another objective.

Questions to answer

What existing messaging products do users enjoy, and what are their favorite features?

How interested are users in a paid messaging feature?

How might we create a product more closely aligned to user need?

User Research

The core of UX work is letting the data drive design. Gathering information up front, and getting feedback directly from the user early in the design process, allows you to develop a close and empathetic relationship with your user which can prevent the expenditure of unnecessary effort (and financial resources) on developing products or features that flop upon launch.

This is exactly what we saw first-hand, working on Supperclub. Even though we didn't move forward with the paid messaging idea, our user interviews revealed some trends in the utility and value of Supperclub in general, as a place to engage with experts and share knowledge.

Some takeaways:

  • Users (both hosts and guests) felt it was much clearer to book a block of time for a set rate, and determine the format afterwards
     

  • Video appointments were not necessarily valued more than audio appointments, in terms of guests' willingness to pay for the service and hosts' willingness to spend an equal amount of time being paid at a lower rate
     

  • Trust before booking is usually established through word of mouth recommendations or ratings and past reviews
     

  • Experts needed to feel that their expertise and time was being valued in order to engage with the app

Given these insights we were uncovering, our limited timeline, and the client's request for a full refinement of the app from top to bottom, we focused our attention on UI improvements, and including some recommendations for features we considered worth pursuing for future iterations. This product already had a lot of complexity built in, so any additional features needed to be carefully scrutinized for their value-add.

Market Research

On top of a full audit of the app, our team drilled deeper into four specific areas. Within these areas, we looked at competitive and comparative solutions in the marketplace to glean insights and understand best practices for our product.
 

We studied:

1. Guest and Host Profiles

  • Instagram

  • Lyft

  • Uber

  • Fiverr

  • Grubhub

  • Airbnb
     

2. The Home and Explore pages

  • Instagram

  • Airbnb

  • LinkedIn
     

3. Booking

  • Airbnb

  • Calendly

  • Various exercise class apps
     

4. Messaging

  • Cameo

  • Fiverr

  • LinkedIn

  • WhatsApp

  • Airbnb

  • Slack

  • Google Chat
     

5. Groups

  • WhatsApp

  • Discord

  • Reddit

  • Slack

As an example, below is our plus/delta features analysis of the messaging experience in competitor and comparator products.

Product Design

Our refinement of the app's UX and UI begins.

Questions to answer

Based on user feedback, where are some opportunities for improvement?

Based on our market research, what best practices might we incorporate?

Site Map and User Flows

We fleshed out the app's navigational scheme, seen below.

The purple and yellow screens indicated on the "guest" and "host" navigation indicate content that would flip back and forth depending on what role the user is logged in to, similar to other apps that offer multiple roles, ex: Lyft (rider/driver), GrubHub (orderer/deliverer), etc. The Supperclub logo would be part of a global navigation at top left, and clicking it would allow the user to toggle back and forth between "guest" and "host" views.

This approach freed up a lot of space, allowing us to design with more breathing room while offering customized content for different user views.

Before Redesign

Current Navigation.png
Guest Navigation.png

After Redesign

Host Navigation.png

Wireframing and Prototyping

As mentioned above, we focused our redesign on the following areas: 

  1. Guest and Host Profiles​

  2. The Home and Explore pages​

  3. Booking​

  4. Messaging​

  5. Groups

Some improvement we made were:

  • Giving each element adequate breathing room so as to avoid visual overload

  • Color-coding "Guest" view with purple elements and "Host" view with yellow elements for quick visual cues

  • Restructuring the bottom global nav, putting "Explore" at the center

  • Optimizing filter options for the Explore experience

  • Streamlining Host profile displays and booking flow

  • Developing a Group/ Community messaging concept

casestudywireframes.png
Frame 6920.png

Final Presentation

We presented a fresh set of users with the redesigned wireframes, and calculated a new SUS score based on their feedback. The results were a SUS score improved by 134%, putting the new product in the 96th - 100th percentile of all possible scores. A SUS Score of 68 is considered a market-ready, good quality product.

Please find our final presentation here (PDF deck here), and improved wireframes here.

Screen Shot 2023-02-05 at 8.51.46 PM.png

Conclusions and Next Steps

Putting this all in proper context, we understand that our wireframes do not provide the same fidelity of testing as a clickable prototype, but considering the three-week span of this contract we had to make deliberate choices as to how spend our time. All things considered, we managed to accomplish an impressive amount of work and are confident that even with the SUS Scores gathered as a rough indication, we have improved both Supperclub's UX and UI considerably.

Our next steps recommended to Supperclub's founder were to create a clickable prototype and conduct rigorous testing with her VC firm's resources. The new navigational schemes and wireframes have been turned over to Supperclub's development team, who will begin implementing our designs in coming months. Supperclub's concept of an app for booking experts has a lot of potential, and given the positive feedback and upward trend of usability in these improved designs, we look forward to their projected launch in 2023. 

bottom of page