Caffeine
Designer
Prototyper
Live Streaming
2019 — 2021
Caffeine was created with the goal of redefining the live streaming experience for creators and viewers. I was excited about exploring new ways for people to interact live with others and to work again with several former co-workers including the company founder. Soon after I joined, we were forced to focus on platform stability and we stopped feature development for several quarters. Most of my efforts during this time were building concepts for differentiated features and providing a vision for the future of the platform.
See Related Role:
Caffeine
Designer
Prototyper
Live Streaming
2019 — 2021
Caffeine was created with the goal of redefining the live streaming experience for creators and viewers. I was excited about exploring new ways for people to interact live with others and to work again with several former co-workers including the company founder. Soon after I joined, we were forced to focus on platform stability and we stopped feature development for several quarters. Most of my efforts during this time were building concepts for differentiated features and providing a vision for the future of the platform.
See Related Role:
App Redesign Concept
In order to support a growing number of content categories, build community on the platform, and simplify the interface, I was asked by the company founder to create a new vision for the app. This extensive redesign looked at all aspects of the viewer experience from initial discovery of Caffeine, onboarding, daily exploration of new content, watching content, gamifying viewer activity, and sharing content with friends.
App Redesign Concept
In order to support a growing number of content categories, build community on the platform, and simplify the interface, I was asked by the company founder to create a new vision for the app. This extensive redesign looked at all aspects of the viewer experience from initial discovery of Caffeine, onboarding, daily exploration of new content, watching content, gamifying viewer activity, and sharing content with friends.
Images Movement
Images Movement
Text Animation
Text Animation
SamIAm
1
OMG that was 🔥🔥🔥
SamIAm
1
OMG that was 🔥🔥🔥
SamIAm
1
OMG that was 🔥🔥🔥
zerocool
@ reply
@joe good to see you, whats new?
zerocool
@ reply
@joe good to see you, whats new?
zerocool
@ reply
@joe good to see you, whats new?
Comment Gestures
As the sole mechanism for viewer engagement with the creators, the comment system had recently been given a new visual design, but the design was static and all interactions were hidden. To give the comments life and encourage viewers to interact, I created a new set of animations where the comments bounced when liked by others and gracefully appeared and faded away after time. Paired together with the animations were a pair of gestures for liking or replying to the comment.
Images Movement
Images Movement
Images Movement
Text Animation
Text Animation
Text Animation
Profile Pages
Limited to not much more than a follow button, the profile page was in need of a full redesign so I created a new design for mobile and web that would support dozens of new features. To showcase the content and relationships of large and small creators or the activity of viewers I defined a system that allowed for the profile page to automatically prioritize different reusable components to personalize elements shown based on the viewers relationship to that account.
Profile Pages
Limited to not much more than a follow button, the profile page was in need of a full redesign so I created a new design for mobile and web that would support dozens of new features. To showcase the content and relationships of large and small creators or the activity of viewers I defined a system that allowed for the profile page to automatically prioritize different reusable components to personalize elements shown based on the viewers relationship to that account.
Profile Pages
Limited to not much more than a follow button, the profile page was in need of a full redesign so I created a new design for mobile and web that would support dozens of new features. To showcase the content and relationships of large and small creators or the activity of viewers I defined a system that allowed for the profile page to automatically prioritize different reusable components to personalize elements shown based on the viewers relationship to that account.
Images Movement
Images Movement
Images Movement
Text Animation
Text Animation
Text Animation
Clip Highlights
Many great moments happened on Caffeine and to help share them with on social media and give visibility to creators and Caffeine I helped design a system where viewers could take a quick snapshot of the last 30 seconds of the show they were watching. The video would then quickly be composited with the comments from other viewers and stylized to help brand the clip. When viewed, the clip would then direct new viewers to Caffeine where they would be able to see even more highlights of the best of Caffeine.
Clip Highlights
Many great moments happened on Caffeine and to help share them with on social media and give visibility to creators and Caffeine I helped design a system where viewers could take a quick snapshot of the last 30 seconds of the show they were watching. The video would then quickly be composited with the comments from other viewers and stylized to help brand the clip. When viewed, the clip would then direct new viewers to Caffeine where they would be able to see even more highlights of the best of Caffeine.
Clip Highlights
Many great moments happened on Caffeine and to help share them with on social media and give visibility to creators and Caffeine I helped design a system where viewers could take a quick snapshot of the last 30 seconds of the show they were watching. The video would then quickly be composited with the comments from other viewers and stylized to help brand the clip. When viewed, the clip would then direct new viewers to Caffeine where they would be able to see even more highlights of the best of Caffeine.
Images Movement
Images Movement
Images Movement
Text Animation
Text Animation
Text Animation
Watch with Friends
To help viewers to connect with their friends I created a concept where you would create a group with your friends. People in this group could then see what shows people were watching or invite others them to join them and easily create a separate audio stream just for freinds to chat while watching shows together.
Watch with Friends
To help viewers to connect with their friends I created a concept where you would create a group with your friends. People in this group could then see what shows people were watching or invite others them to join them and easily create a separate audio stream just for freinds to chat while watching shows together.
Watch with Friends
To help viewers to connect with their friends I created a concept where you would create a group with your friends. People in this group could then see what shows people were watching or invite others them to join them and easily create a separate audio stream just for freinds to chat while watching shows together.
Images Movement
Images Movement
Images Movement
Text Animation
Text Animation
Text Animation
Viewer Voting
With the goal of quicky building a new voting feature that allowed viewers to publicly choose which rapper or team they wanted to support, I designed and prototyped an extensibile voting feature for both mobile and desktop viewers that could handle many different voting situations and content types. The design was intended to require very little effort by the viewer and encourage additional engagement by showing the team affinitiy through colors in the comment reactions.
Viewer Voting
With the goal of quicky building a new voting feature that allowed viewers to publicly choose which rapper or team they wanted to support, I designed and prototyped an extensibile voting feature for both mobile and desktop viewers that could handle many different voting situations and content types. The design was intended to require very little effort by the viewer and encourage additional engagement by showing the team affinitiy through colors in the comment reactions.
Viewer Voting
With the goal of quicky building a new voting feature that allowed viewers to publicly choose which rapper or team they wanted to support, I designed and prototyped an extensibile voting feature for both mobile and desktop viewers that could handle many different voting situations and content types. The design was intended to require very little effort by the viewer and encourage additional engagement by showing the team affinitiy through colors in the comment reactions.
Images Movement
Images Movement
Images Movement
Text Animation
Text Animation
Text Animation
Broadcast Tools
With the goal of scaling to support thousands of creators we built a new website to enable creators to self-serve and manage all aspects of their shows. In addition to managing the front-end and back-end projects I did created all of the designs using the Material UI library. With severe resource constraints we were able to regularly ship meaningful features that still fit in with the brand style and were easy for content creators to adopt.
Broadcast Tools
With the goal of scaling to support thousands of creators we built a new website to enable creators to self-serve and manage all aspects of their shows. In addition to managing the front-end and back-end projects I did created all of the designs using the Material UI library. With severe resource constraints we were able to regularly ship meaningful features that still fit in with the brand style and were easy for content creators to adopt.
Broadcast Tools
With the goal of scaling to support thousands of creators we built a new website to enable creators to self-serve and manage all aspects of their shows. In addition to managing the front-end and back-end projects I did created all of the designs using the Material UI library. With severe resource constraints we were able to regularly ship meaningful features that still fit in with the brand style and were easy for content creators to adopt.
Images Movement
Images Movement
Images Movement
Text Animation
Text Animation
Text Animation