breem

UI/UX,App Design,Web Design,Research.
8 Weeks.
Figma,
Adobe After Effects,
Adobe Premiere Pro,
Adobe Illustrator.

TL;DR

animation showing the old logo, then the new logo

A way to explore, a way to exercise, and a way to share.

Breem is an app and smart device concept designed and prototyped in collaboration with Izum Jelmassi and Felicia Guan, made for discovering the world on a bike.

The COVID-19 Pandemic has both made travel more difficult and set off a wave of cabin fever-riddled folk looking to enjoy the outdoors - locally, of course.

This 8-week project involved user testing, competitive analyses, critiques and presentations.

Sell it!

Myself, Izum and Felicia were each tasked with creating a piece of promotional material for Breem — I animated and edited a short spot ad.

The ad was created to sell the smart device’s sharing and pairing — an attachment for your bicycle to stream your ride to the world, and its ability to pair with other cyclists in the community.

Research

Before designing the application, our team had to design the device itself. Taking inspiration from GoPros, Apple Watches and other interactive smart devices, we landed on a small(ish) box that attaches to the front of the bike.

For both the app and Breem device, our team developed an integrated flowchart, considering which features would be appropriate for each product — how interactions on either the phone or bicycle react to one another.

App + Device

Alongside the application itself, our team prototyped the UI for the companion device, a GoPro-like mini camera that can mount onto riders' handlebars.

When returning to the app concept, our team conducted lengthy research into our target audience's expectations, as well as noting the successes and failures of competing platforms.

With an established standard from the device, our team solidified the app’s design standards, while also allowing it to adapt to a mobile space. This meant giving consideration to video, image and sharing implementation, interactive maps, additional swipe and touch features missing from the smaller 3.5” screen.

Prototyping

Jumping into the aesthetics and layouts from the smart device, our team began its first round of visuals.

Namely, early iteration of finding & watching streams, as well as beginning your own stream.Critiques and peer evaluation led us to conclude certain menu elements were too barebones, while sections like the stream itself were too crowded.

Now, our team shifted focus to unifying our visuals across app features — especially between the highly interactive ‘live map’ and the more technical menu options being done elsewhere.After group feedback, design elements like the square colour rings, and introduction of a ‘chat bubble’ style stream deck were abandoned.

In particular, the stream deck was re-organized to better match the existing stream deck on the Breem smart device.

In our first scenario, a user logs into the app, browse streams both in a recommended feed and on the ‘livemap.’ Once they join a stream, another Breem user is discovered nearby — this allows the viewer to watch two streams at once, gaining a new perspective.

After viewing the new streamer’s profile, they decide to subscribe.

In our second scenario, a streamer logs into the app, ready to pair their device and begin a stream. With some help from the device, they’re ready to go!

Setting privacy zones and navigation assistance makes the stream more secure and straightforward — this way, viewers can’t see your local neighbourhood, and a simple glance at the Breem device or the smartphone will steer you in the right direction. The ring on your device and smartphone may flash colours — pink means people are interacting with your stream!

Finally, ending a stream allows you to save the route, VOD or share the stats with the world.

Lucas Postlethwaite | Lucas Posty | 2021.
Back to top.