Nexus Bike

Product Design

A device which encourages bike riders to install this app to locate their bike, customize RGB light and get an alert when reaching close to an another vehicle.


Project Info and Tools

A school project using sensors and Adriuno. Created and app design in Adobe XD and developemtn in Node-JS

Project Skills

Concept Ideation . Research Methods . Visual Design - Interaction Design . Code with Ardiuno and Node JS - Product Design . Prototyping

My Role:

UX Designer and Developer.
Made changes to this project after submission


Mihoko Schick [Designer and Developer]
Hamza ibrahimi [Developer]


Nexus Bike is a product for bike users to install this device so they can locate their bike, control the RGB front light and get an alert ( beep sound ) when the their bike is closer to an object ( for example: another Vehicle ). This will allow them to be cautious while riding a bike. All the access can be customized through a Nexus Bike app. The sensors that are used for this device are distance sensor (for receiving distance), segmented display (for displaying distance in digits), buzzer (for sound when an object gets close, RGB light (for displaying customized colourful headlights) and GPS (for receiving the latitude and longitude of the place where the device is located). All these sensors are running through Node.js program which receive data, send data and save the date for users.


As more companies create more products to introduce something new, improved and updated, they failed to have a device with multiple multiple functionalities. Having too many devices stick to your bike is not ideal. Another frustration of users is being able to access and control everything through an app.


We are all passionate about bicycles and we decided to create something we would want in a device. We want to have a device which can help us locate, allow us to customize light and get notification (or a buzz sound) when bicycle is to close to an object. Getting code to work with all three aspect and few sensors will be challenging.

How are we achieving this?

To achieve this goal idealy, we would be needing:

Materials: Sensors

  • GPS (to locate bike)
  • RGB Light (one light which would change colours)
  • Buzzer (to indicate when an object is close)
  • Distance Sonic Sensor (to measure the distance)
  • Segmented display (for digits to show)
  • Ardiuno (to connect everything to run)

Programming languages

  • Javascript
  • NodeJS
  • Ardiuno Software
  • Johny5 library


  • UX Research / Methods
  • Product Design

User Personas

Color Palette

Periwinkle Gray




Ship Cove









For icons we decided to use icons which are commly use and users are familar with them. However we customized it depending on our needs.The big green logo was created to informed users that hteir bike is "safely locked standing where it was left off".



For icons we decided to use icons which are commly use and users are familar with them. However we customized it depending on our needs.The big green logo was created to informed users that hteir bike is "safely locked standing where it was left off".


We chose Lato font for the app because it is clean and readable. It is also used in many apps because of its clarity. We worked with mostly Lato-Bold and Lato -Regular.

App Design


This home screen greets user. It informs user some information about their bike is locked and safe where you parked last. This precisely gives location, last RGB saved and the selected buzz sound for 10 M.


This locate screen allow user to see map and the location their bike is parked. If the bike gets stolen then the cursor will move to show where this bike heading.

RGB Light

This RGB screen allows user to change thelight colour using red, green and blue slider. At the top shows the outcome of the selected colour combination. User can also save this colour to use it again if desired.


This history screen shows user, how many kilometre they have ride their bike daily, weekly, and monthly in a graph. Also they can see histroy of their past parked locations.


This profile screen allow user to set goals, join friends, participate in events and see their save RGB Light. At the same time, users can make changes to their profile.


This setting screen allow users to make changes to their buzzer and the milage. Also users can change settings related to phone such as wifi, notification, storages, etc.

App Demo

The demo of the app gives a glance on the user experiences. This app functionality is limited because it only highlights the parts we focused on.

Achieved Code

As a a team, we were able to figure out each sensor code with node JS. However when combined the GPS sensor got compromised. We had to opt out this sensor. However with lack of time, we decided to go ahead with distance sensor with buzzer (which provided the sound at set kilometres) and RGB for changing the light through web. Next phase is prototype.


We signed a simple six sided box in the illustrator and then laser cut this box. We measured and added some slots for our sensors. After combining everything, we put the device for test. At the bottom, you can see a gif results for RGB sensor and Distance Sensor. The entire box carried Arduino, Sensors and wires.

Thank you for coming this far.

© Saher Jawaid 2020. All rights reserved.