Crisanto Cimatu
beam_thumb.jpg

Beam

UI Design

Beam is an ad network and marketplace startup that serves mid-market advertisers in the digital out-of-home media space. Beam allows small businesses to monetize their already existing screens by running advertising on them with a simple hardware solution that connects them to an online platform.

My role on this project was to develop the overall user experience and to work with the founder to identify which features should be included in the platform for the MVP.

 After user and competitive research, I landed on a dashboard centered approach for the UX. I found that since all the tasks a user needed to perform would be associated with some kind of output, a place to view, edit, and monitor that output should be the centerpiece that the UI revolves around. A simple consistent tabbed table layout was used with taxonomies specific to their respective buckets. From the dashboard, users can quickly branch out to perform other tasks.

After user and competitive research, I landed on a dashboard centered approach for the UX. I found that since all the tasks a user needed to perform would be associated with some kind of output, a place to view, edit, and monitor that output should be the centerpiece that the UI revolves around. A simple consistent tabbed table layout was used with taxonomies specific to their respective buckets. From the dashboard, users can quickly branch out to perform other tasks.

beam_1.jpg
beam_2.jpg
 The creative editor is modeled after existing image editing programs, using familiar conventions such as drag-n-drop, panels, and stackable lists.

The creative editor is modeled after existing image editing programs, using familiar conventions such as drag-n-drop, panels, and stackable lists.

 The add device and add campaign tasks use a wizard UX flow to walk the user through the steps that are needed for completion.

The add device and add campaign tasks use a wizard UX flow to walk the user through the steps that are needed for completion.

beam_6.jpg
beam_7.jpg
beam_6.jpg
beam_7.jpg