Caffeine

Background

Caffeine is an independent social broadcasting platform for live content with a community of culture, sports, and music fans.

My Role

As a UX web designer, I collaborated with product managers and designers to improve the usability and conversions on mobile web pages. During the collaboration, I managed and contributed to the web design systems for improved work efficiency within the team.

I also created responsive web pages with clearly defined breakpoints illustrating resizing behavior to cross-functional teams.

How users land on the mobile website

Goal

The goals of the mobile web pages are:

  • To improve users' first impression of Caffeine

  • To get users to download the app

Download flow

When designing features for a mobile web page, it's crucial to understand how users arrive there. I created a user flow diagram to illustrate the journey from a social post to a mobile web landing page, and ultimately to downloading the app.

Download modal to increase conversions

In order to increase downloads for new users visiting one of Caffeine’s mobile web page, I created this download modal that prompts users to download the app. Since this was a new component, I was able to add this to the web design system component library.

Redesigning creator profile header

After speaking with PMs and designers, we found that on the profile landing page, the creator lockup and bio took up too much vertical space and there needs to be more content shown above the fold. Since the goal of mobile landing pages is to improve people’s first impressions of Caffeine, it’s important to ensure the content takes center stage.

I redesigned the creator lockup by horizontally stacking the username, follow button, tagline, and follower/following count. Condensing the header this way will allow more vertical space for video content to be visible.

Crafting a responsive desktop experience

I designed the resizing behavior of the desktop experience by creating screens at various breakpoints, as well as prototyping the design to present to cross-functional teams. In general, I kept the video cards the same size, allowing flexible margins and adding columns as the screen expands.

Adding follower count for social proof

Up until this point, I was designing primarily from the viewers’ perspective, whether it’s getting them to download the app or improving their first impression of Caffeine. For this component, I had to consider the user experience from the content creator’s perspective.

I collaborated with the product manager to add follower count to the creator header for social proof. When new viewers watch a creator's content, seeing a large following might encourage them to follow as well. To follow, viewers must download the app—thus increasing downloads and expanding the overall user base.

Small details should have logic

Adding details to a UI that are seemingly minuscule such as adding a follower count to a creator lockup requires thoughtfulness and understanding of what would make sense from a creator’s experience. We have to be able to answer questions such as "Why are we adding follower count to this component? Is it for social proof? How will this impact the goal we're trying to achieve?" During my collaboration with designers, I was asked "What would the follow count look like for someone who say, only has 1 follower? Do we want to show that information?" This experience gave me the opportunity to develop an intuitive eye for design rather than designing purely for aesthetics.