Ideation
User Research
Visual Design
Prototyping
3D Rendering
October 2020 -
December 2020
(3 months)
Adobe Illustrator
Adobe Photoshop
Figma
Izum Jelmassi
Lucas Postlethwaite
As technology rapidly evolves, technology is no longer limited to computers and online websites, it has become a platform in which apps and product inventions are built to enhance user experience. The purpose of this project is to design a product along with a supporting mobile application that can enhance, improve, or even simplify a user's experience.
When there are different interests and needs amongst all cyclists, how might a product help capture the moment, document stats, share experiences, and assist any type of cyclists?
Pain Points are based off the diverse individuals who enjoy cycling —
1. Finding a location to bike
Aside from biking in your local area, it is quite popular for cycling enthusiasts and leisure cyclists to travel to a designated area to bike. Routes and locations can vary in purpose and interest, some routes promote a challenge and some routes are primarily scenic.
2. Navigating through an unfamiliar area & unavailable internet connection
While traveling to different destinations, users are not always able to navigate through a route, especially when internet connection is unavailable. Without internet connection, users are often faced with the problem of not being able to use a way-finder application to navigate out of the route.
3. Documenting fitness progress
Some cyclist are interested with their fitness, and would like to analyze their progress throughout the journey.
4. Capturing the moment
When cycling is in progress, it is often difficult and unsafe for the user to equip their phone to capture videos and pictures. While in motion, the video and picture quality is not great because the camera is not stable.
5. Connecting with the community & sharing the experience
Living in the 21st century, sharing experience is a norm, whether it is amongst family and friends or a community. For cycling enthusiasts especially, they like to discover new routes and share good experiences with the rest of the cycling community.
Breem is a compact smart device that unifies all the needs of any cyclist. It can be used on a personal or a community basis. Breem attaches to bike so it can capture the experience and fitness progress of the user, as well as its able to navigate the user through destination routes, with or without internet connection. With the accompanying app, the app is able to pair with the device so content can be easily transferred back and forth. This enables a seamless sharing process when it comes to sharing content to different apps or even the Breem online community platform.
In order to produce a product right for the user, a competitive analysis of similar products on the market must be considered, researched and analyzed. This unveils features that are great about the competitors product, as well as the flaws that can be improved, to better the user's experience. To get a better understanding of who the user is and what the user are doing a PACT analysis can give us a better insight in identifying them. Once the user is identified, user personas are formalized as a guideline to identify potential clients, and scenarios that arise from what they are looking to accomplish.
Based on the information received from the research process, ideation is formulated to determine the potential user tasks and scenarios that we want the product and app to cover. In this stage, iterations of the userflows visual design, site map and wireframes are developed to establish the device, the functions we want incorporated, as well as how the overall product and app will operate and respond through every button pressed and every screen the user approaches.
The branding and UI across Breem makes use of Roboto’s different weights for titles, subtitles, body copy and captions. Nine colours form the primary palette for the UI, with green being the brand colour (see “Logo and Branding”). The adaptable menu format uses the same 9px corner radius for all buttons and tiles, with the ring using a 16px radius.
A walkthrough on how the Breem device works. For additional assistance, Breem provides a user manual to help the user navigate through the device.
The user interface is made simple to allow all users to be able to navigate through the device.
The ring around the content acts a as navigation pointer and a status bar.
Breem's accompanying app was created to provide a platform for users to transfer content, share content, track fitness, watch streams, and connect with other users within the cycling community.
The Breem app is divided into 2 specific sections, one being to stream, and the second section is to watch streams. Under the stream section, users are able to pair their mobile device with the Breem device, and use their phone as an extension of the device. This means that the user is able to enable the record button, access navigation systems, as well as pre-plan trips for offline purposes. Under the watch stream section, users do not necessarily need the Breem device to access this section, the online platform is available to anyone who are interested in watching steams and supporting their favourite cycling streamers.
Start by logging in and registering, then dive right into streaming or watching!
Have your Breem device ready and follow the steps to pair with the app.
Interact with live prototype »
Before you start sharing your journeys, let everyone know what kind of ride you have planned!
For your safety, you can set as many privacy zones as you’d like, keeping these areas hidden from everyone else.
Interact with live prototype »
Just like on the Breem device, the app features quick options by pulling the bottom slider. Long holding the music icon will bring up the player!
The app and device will flash yellow in a certain direction, notifying you when there’s a nearby streamer.
Interact with live prototype »
Whenever you need help getting to certain locations, tap the GPS icon on the bottom right or simply start typing in the search bar!
The Breem ring will flash green according to which direction you should be heading.
When viewers are reacting to your stream the ring will flash pink.
Interact with live prototype »
Whenever you’re done, just hit the stop button found on the device or app.
The app will take you to a summary screen showing you the travel log, achievements and quick riding/streaming stats.
You can also share/save your rides and ridden route with everyone!
Interact with live prototype »
Discover new, trending and recommended streams all from Explore.
Watch a stream based on the auto-generated preview, where the cyclist is riding, or just by popularity.
Tags scroll by for a quick glance at the type of ride you’re in for.
Interact with live prototype »
Sort streams to find “the one.”
Streams will re-arrange based on the tags you select—from specific moods to large group streams to location-specific.
Interact with live prototype »
Find recommendations for popular, unique or trending streams in a convenient tab.
The Discover tab smartly filters streams in your area to recommend content you’ll enjoy.
Interact with live prototype »
Ready to ride?
Tap the stream you want to watch for details, and hop right in!
Interact with live prototype »
It’s a busy city—sometimes, other cyclists bump into you!
Viewers watching a streamer nearby to another streamer can pair ‘em up!
Check out a fresh perspective, chatting and interacting with two at a time to truly explore the city.
Interact with live prototype »
An experience with your friends and family!Navigation offers an experience for those who want to take a break from streaming.
Interact with live prototype »
Stay connected with the Breem community, explore where the trending areas are, and venture them yourself or with friends and family!
Interact with live prototype »
Don’t worry about keeping track of each trip, every time Breem is in use, all trips will be logged under your user account.
Interact with live prototype »
Internet connection may not always be available to us. Not to worry! Your pictures and videos from your Breem device can be transferred and viewed on the app.
Interact with live prototype »