UI/UX Design

Vibe - Smart Watch UI

Vibe is a smartwatch application aimed at teaching users through vibrations. This application allows the user to learn breathing techniques and keep track of their movement during their workout to maximize muscle tension.

Reach your true potential!

Made with
Figma logo
Arrow icon to scroll for more
Introduction
01

Project Introduction

Vibe is a smartwatch application that aims to teach the user through vibrations focusing on UI Design principles. This was a short project at the start of Year 2 in my studies at the Belfast School of Art.

Image of smartwatch mock-up for Vibe
Brainstorming & User Flows
02

Brainstorming & User Flow

I started this project by coming up with several ideas that I thought would be fun to investigate with a wristwatch application. I originally intended to develop a PoS system companion application, but I later shifted my focus to a vibration- and feeling-based application. Before moving on to the brainstorming stage, I created an organized layout for the application's content and functionality.

Image of user flow diagram
Typography & Colour
02

Typography & Colour

To go with the colour scheme I chose for this project, I required a typeface that fit the Health & Fitness niche and had some active qualities. Because of its wide framework and the way the typeface's numbers are designed, I decided to choose Montserrat for this project. The typeface's strong edges and corners were ideal for the application I was building and helped maintain its energising vibe throughout.

Typography
Montserrat Semi-Bold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Colours
Jet Black
#000000
Pure White
#FFFFFF
Orange
#F5A623
Application Features
03

Application Features

Feature 1

Customize Your Workout

Choose a rep and a set number for your workout, then practice smooth motions with vibrations and pulses.

Image of smartwatch with feature
Feature 2

Select Your Rest Time

To make sure you work out to your full potential and keep track of your rep count when working out - set a rest timer before you begin!

Feature 3

Breath In... Breath Out...

Learn how to manage stress and use breathing exercises to help with anxiety and panic attacks.

Image of smartwatch with feature
Feature 4

Learn Through Vibration

Start practising deep breathing while strengthening your memory using vibrations and pulses.

Image of smartwatch with feature
Final Designs
04

Final Designs

The fact that the screen size was considerably smaller than what I am used to designing for and that there was less room for content made this project interesting to me, but it was also a lot of fun to work on.

Image of smartwatch with featureImage of smartwatch with featureImage of smartwatch with featureImage of smartwatch mock-up for VibeImage of smartwatch with featureImage of smartwatch with featureImage of smartwatch with feature