Future Life Hero Image

Broadcastr

Discover events by location.

PROMPT

Prompt Icon
Art Direction, Branding & UX Design

-

Broadcastr is an online and mobile platform that enables people to discover stories by location. I developed art directions, brand system, App, and desktop platform design as the branding and interaction designer.

PROCESS

Art Direction
Design Directions - Base on the art directions and sketches, I started to develop two design directions, one with the telescope icon and one with a more typography driven icon to inspire an exciting feeling.
Branding Logo Sketches
Logo Design Prototypes - Since this App is about discovering content by location. To make sure the logos looks like it is three dimensional and follows the real-world physics and perspectives, I started by prototyping physical logo marks with paper. Later I used these paper prototypes as a reference to create the digital logo marks.
Branding Logo Sketches
Logo Design Sketches - I also started to create paper prototypes of the letter "b" in a three-dimensional fashion during my sketching logo designs. You can see a paper prototype I developed in the image above that looks like the letter "b" and an abstract telescope.
Branding Directions Exploration
Branding Directions Exploration - During my exploration in logo mark, I explored more direction in exploring the icon "b" as a simple, antena, location anchor and telescope.

BRANDING DESIGN

Main Illustration
Logo mark - After creating two design directions, the client chose the three dimensional "b" as a telescope.
Door Sticker
Door Sticker design.
Homepage Design
Homepage Design.

APP UX SKETCHES

User Discovery Flow
User Discovery Flow - the most challenging system for this project is to display the stories also called "broadcast" as single stories, collections in three different views: map view, cover view and list view.

APP DESIGN

Dashboard Design Broadcast View
To make sure the user interface matches the experience we have defined, I created a broadcastr visual system that includes all the possible styles and sizes for the mobile App.
App icons .
App icons.
Dashboard Design Broadcast View
Broadcastr iOS mobile APP design from loading screen to broadcast detail view.
Dashboard Design Map View
Broadcastr iOS mobile APP design showing user collections.

WEB UX SKETCHES

Three Different Ways to View a Broadcast
Three Different Ways to View a Broadcast - after sketching by hand and digitally, I decided to create an overall guideline to show case all of the different ways broadcast items and collections could be view through out the web site.

DESKTOP WEB SITE DESIGN

Dashboard Design showing collection grid view.
Dashboard Design showing collection grid view.
Dashboard Design showing the user draging a boradcast collection cover in grid view.
Dashboard Design showing the user draging a boradcast collection cover in grid view.
Final Dashboard Design Featuring Broadcasts View
Grid view of individual broadcasts.
List view of individual broadcasts.
List view of individual broadcasts.
Dashboard Design in map view. Users can look through their collections by geographic location.
Dashboard Design in map view. Users can look through their collections by geographic location.
Dashboard Design in map view. Users can look through their collections by geographic location.
Dashboard Design in map view. Users can look through their collections by geographic location.
Zoomed view of the map shows the individual Broadcasts collections.
Zoomed view of the map shows the individual Broadcasts collections.
Zoomed view of the map shows the individual Broadcasts.
Even more Zoomed view of the map shows the individual Broadcasts.
Detailed view of the single broadcast information.
Detailed view of the single broadcast information.

FINAL DESKTOP DASHBOARD DESIGN

Dashboard Design Broadcast View
Final Dashboard Design Featuring Broadcasts View
Dashboard Design Map View
Final Dashboard Design Featuring Map View

TEAM

Simone Endres Art Director
Yuchen Zhang Branding Design, UI & UX Design
TOP