Topster

Topster is a platform for creators to connect with fans and monetize digital content. From early ideation and research to its official launch, I worked cross-functionally with Product, Dev, and Ops teams advising on UI/UX design, and designed its branding and official website. (Contact´╗┐ for a detailed case study of the product design process)

MY ROLE

Branding
Web Design
Product Design
UI/UX Review

YEAR

2021

Topster-main-visual

Product Background

Opportunity: The Creator Economy
Propelled by the pandemic, more and more people started to monitize their passions to make a living. The team conducted competitive analysis of major audience monetization tools and positioned Topster's main features: private/group voice call, l
ive-streaming, and paid DM.

Design Process
I was actively involved in the product development process from the beginning, bridging our local team and overseas Design + Dev team together. Please contact me for a more detailed case study on the research and UI/UX part.

Topster process
Topster-app-store-teaser-1
Topster-app-store-teaser-2

App Store teaser images (screenshots) for beta testing

Brand Identity Design

Target User Image
Topster's targeted users are creators specialize in a variety of topics including art, language, lifestyle, etc.. So we decided to use photos of diverse groups of people instead of abstract illustrations to better represent them and emotionally connect with viewers.

Topster-user-image

App Icon and Logo
The name "Topster" carries the meaning of "the No.1", as is what we hope our product can help creators become. I played with three symbols: "upward arrow", "rocket", "star". The final design can be interpreted as both a trophy or a star on the stage, just like how the creator would feel hosting a streaming event with our platform. To strengthen the concept that we are mainly a mobile platform, the team decided to fully incorporate the app icon into the isologotype.

Topster-logo-sketches
Topster-logo-with-guides
topster-branding-0
topster-company-vi

Transforming everyone's WFH selfie into branded photo and email signature

Topster-official-app-store

App Store images (screenshots) for official launch, using consistent characters to form a narrative

Web Design

topster-website-mockups

┬ę Harley Guo 2022