Jambb

Role: UX designer, UI designer
Date: August 2020 - September 2020
Team: Tyler Brodd, Justin Haber, Chuck Marcus, Finna Wang
Tools: Figma, Usertesting.com, Miro, Slack, Google Drive, Google Meet, Zoom

Project overview

Jambb is an emerging social platform where creators grow their communities by recognizing and rewarding fans for their support. Currently, creators monetize fan engagement through advertisements, merchandise, and subscriptions, to name a few. However, this only represents 1% of fans, leaving the other 99% (who contribute in non-monetary ways) without the same content, access, and recognition that they deserve.

“50 years ago, kids wanted to grow up to be astronauts. Today, they want to be YouTube creators and influencers.”

-Alex, Jambb founder

 


Exploring the problem

Jambb acknowledges that the creator economy is here to stay, especially with COVID-19 impacting lifestyles of many who have had to augment their current job or look for new work. Considering creators that have social media followings on multiple platforms, Jambb aggregates all of a creator’s content onto the Jambb platform and allows fans to interact with content and participate in “challenges” to receive various rewards.

Preliminary research provided to us

The Jambb team had already begun conducting research to validate their product, and they shared the following with us as a team:

Target user

Fan Champion

  • The ideal fan who consumes high amounts of content from a variety of creators
  • Has a high interest in rewards

Challenge strategy

This is much more complex, but here is an overview:

  • Campaigns - set up by creators; can be from a template or custom
  • Milestones - within a campaign (at least one per campaign), must be completed to finish the campaign
  • Rewards - given when completing a milestone; examples include an asset, recognition, or content

 

Project scope

Jambb tasked us with designing a fan-focused responsive web-based platform where the unrecognized 99% of fans can be rewarded by the creators they support.

We studied their existing MVP (mobile app and beta website) to create a high-fidelity prototype. We made as many iterations as possible, tested it, and recorded results and next steps. We iterated based on both internal feedback from the design team and user testing. This project was highly focused on UI design and exploring multiple solutions for launching this start-up.

(Pre-)Problem statement

This led us to our problem statement:

Creators can only acknowledge 1% of their supporters, while non-monetary contributions made by the majority of their fan base remain unknown. Creators need a way to identify their fans across all social platforms to inherently grow their business and give valued supporters the recognition they crave.

I mention the prefix "pre" since this is what we initially thought the problem was. Read on to see how that changed after doing more research and conducting user testing!

 


Design process

The first thing we did was observe a usability test that the Jambb team conducted with a potential user.

This is the initial discover and profile page for the MVP mobile app. My team didn't make this so I won't mention this for long! Below are some key takeaways from the user test that we wanted to keep in mind as we revamped the MVP:

  • Be clear about what things mean (the displayed duration on a video was confusing - is it 1 hour and 37 minutes, or 1 minute and 37 seconds long?)
  • Be recognizable ("this looks like Patreon/Spotify")
  • Give users an incentive to share content

 

Stakeholder interviews

Next, we conducted stakeholder interviews with the majority of the Jambb team. We spoke with individuals from marketing, finance/infrastructure, design, and engineering/development. These were the insights that we gleaned from those interviews.

Business goals

  • Offer creators growth opportunities
  • Maximize fan engagement and impact
  • Break social media platform barriers

User (fan) needs

  • Creator acknowledgement
  • Reward-based engagement
  • Incentive to download yet another app

Technical requirements

  • Data collection and scrubbing from other plantforms
  • Actionable metrics

 

User flows

We created three user flows based on common tasks that the target user/fan would do on the site.

Flow 1
Discover content

Flow 2
Complete a challenge

Flow 3
Create an account through a referral link

 

Design studio

With these user flows in mind, we started visualizing past the MVP through wireframing as much as we could. The challenge here was considering the existing mobile prototype, translating it to desktop, and taking into account the insights we had from the usability test. Each team member sketched several ideas for different pages of the eventual prototype. This is just a few preliminary sketches that we did.

Based on research on common social media platforms (YouTube, TikTok, Instagram), we established that there would be a top navigation, with three columns across the page. The center column would change as users navigated through the site, while the columns remained the same. We ended up changing this later in our design process because the information on these side columns became repetitive with what was in the center column.

After reviewing each all of our sketches, we decided as a team how to split up the responsibility for iterating on our designs. I'll be highlighting my particular responsibilities in the following section!

 

We created the sitemap above to help guide our user flows. Then, we split up and designed the individual aspects that we agreed upon.

 


Design iterations

This section highlights the design iterations I was primarily responsible for during this project.

 

The "discover" page

In order to keep users on the Jambb platform, users need a way to discover new content and creators to follow, even if those creators aren’t already signed up with Jambb. I considered the YouTube homepage when designing. There are a lot of content suggestions that are related to the user's browsing history.

Discover V1
Two static columns surround the discoverable content in the center. Users can toggle between three options: category, suggested, and trending. This was quickly dismissed by users because they couldn't figure out where they were supposed to click. It made discovering content more of a chore than a natural browsing experience - "What's the difference between suggested and trending?" " How can I discover creators instead of content?"

 

Discover V2
We drastically simplified the discover page by eliminating the two side columns from this page and reducing the toggle options to simply "creators" or "content." This allowed users to have a more immersive experience discovering content without having to make numerous decisions about exactly what they're looking for. The filters on the left are recognizable from other sites and easy to navigate.

 

Style guide

As a team, we designed various symbols that were reused throughout the site, such as typography, colors, and buttons. I converted these symbols into components, and combined various components into the cards seen around the prototype.

Typography
We kept with the existing typography that the Jambb used on its mobile MVP.

Color palette
We also used the colors from the existing Jambb logo, putting an emphasis on the use of purple as a primary accent color.

Buttons and toggles
Although these button and toggle components are very simple, we knew it was important to establish them as early as possible so that the design team would have a file to work with that was easy to manipulate once we handed off the final product from our end.

Cards
These were the most fun to make. It was interesting to see how many possibilities there are in card design. Through user testing, we found that placing imagery higher on the visual hierarchy was more likely to get users' attention.

 


Usability testing

Beta site vs Figma prototype

Midway through this project, we conducted usability testing on two potential users through Google Meet. First, we tested Jambb's existing beta website, which is very bare bones (see right). The platform is currently invite-only, and it currently only integrates YouTube videos onto its platform. Immediately following the beta site test, we tested these same users on the Figma prototype that my team and I were in the midst of.

I was very intrigued to see that the pain points and features the testers requested were fulfilled in our prototype. It was interesting to see how simple it was to design something users wanted, but much more difficult to actually develop and build it from an engineering standpoint. It was helpful to have both on hand at the same time!

 

Testing on usertesting.com

We conducted five user tests on usertesting.com during the third and final week of the project. We asked users to do the following:

  • Participate in a challenge
  • View their account and their Jambb score

Understanding the purpose of a challenge
Users were asked to participate in a challenge that we specified. Along the way, they were asked about their thoughts. At the end of this task, we asked them to rate the following statement on a scale of 1-5, with 5 being the most favorable: "I understood the purpose of challenges."

  • 3 out of 5 strongly agreed (5/5 rating)
  • 2 out of 5 moderately agreed (4/5 rating)

Viewing your account and understanding the Jambb score
This is the fan/user profile page and the "My Impact" dashboard. The Jambb score represents the attribution that the fan has given to individual creators. Although we only focused on the fan side of the website, the idea is that the creator account will have similar metrics to be able to track their growth and reward the fans that helped them grow. Overall, our testers were unsure of the meaning of the Jambb score.

 

Revised problem statement

Through user testing, the biggest hurdle across the board was understanding the meaning of the Jambb score. Users understood the majority of the platform we had built but their biggest questions were: What is the Jambb score? Why would I leave (Instagram, YouTube, Twitter) to use Jambb?

Here's that revised problem statement I mentioned at the very beginning of this case study:

Creators can only acknowledge 1% of their supporters, while non-monetary contributions made by the majority of their fan base remain unknown. Creators need a way to incentivize their fans to join the Jambb platform and to inherently grow their business through performing these non-monetary contributions that they would normally be doing.

 


High fidelity prototype

Select the image above to view the high fidelity prototype in Figma! Feel free to try out the tasks we assigned to our users mentioned above.

 


Takeaways

Onboarding tutorial for impact page

Users were unsure of the meaning of the Jambb score and impact dashboard. New users would greatly benefit from an onboarding tutorial in order to understand the purpose of the Jambb score and how they are personally impacting the growth of their favorite creators in a way that was not previously measured.

Building out creator studio

Since this project strictly focused on the fan experience, the next step would be to build out the "creator studio," or the creator's side of the website.

Picturing other social platforms on Jambb

Currently, Jambb only includes scrubs YouTube videos. They have plans to integrate other social platforms, which would cause us as designers to re-think what these pages would look like; i.e. Can a tweet be contained in the same card as a YouTube video?

 

Using Format