UI/UX DESIGN

Pulsate

Pulsate is an interaction design solution made to help users maintain their fitness resolutions and ease their overall fitness journey. This project consists of interface designs for an iOS app, WatchOS, and a Smart TV.

View the entire process deck of this project here.

 

DURATION

4 weeks 

(May 2019)

TOOLS

Figma 

Principle 

Adobe Illustrator

ROLE

Research 

Wireframing

Prototyping

Interface design

Premise

A study by Harris Interactive in 2019 indicated that 73% of the resolution making population struggles with maintaining them. Fitness-based resolutions are one of the most sought after, but have high rates of failure. So how might we help make this process easier?

 

Preliminary Research

To understand the problem better, I spoke to fitness enthusiasts, trainers, and people that have made fitness resolutions in the past to understand their pain points. I then looked at the technology available to understand the gaps and get a sense of the current user experience.

I organized the pain points I observed into six main categories as mentioned below. These paint points were the starter to my ideal solution set - it helped me understand what features I wanted to include.

Pain points, as observed:

 

Cognitive Walkthrough

In order to fully understand the pain points mentioned above, I performed a cognitive walkthrough of a typical workout using the university gym and the equipment and technology I already had.

 

User Profiles

I identified six basic types of potential users for the solution I was aiming to create. The different types are listed below.

 

Target User

Current fitness management systems are overwhelming for new users. Their sign up process gives users an opportunity to opt out. There is also a lack of motivation factors and acknowledgement of achievement. The apps aren't smart enough to set realistic goals for the user based on their current level of activity.

 

User Journey

User wants a motivator to help them stick to their decision. They don't want to invest in a trainer just yet but need help figuring out what to do

ACTION

They look for apps available online and download Pulsate, create their profile and hope this actually works for them.

They use the app for a few days and check for any progress. They observe that their stats are always saved and up to date

The app sends them a reminder of how long its been since they last worked out, with a positive push to get back on track

User gets a notification congratulating them on their achievement and progress. They are able to visually understand their progress

User is overwhelmed by the idea of exercising and unsure of their ability to stick to their routine

EMOTION

User tries to understand how the app works and hopes to get the push/motivation that they need

They are impressed by the multiple features of the app and how it syncs with other tech to form a system

User is unhappy about losing their streak but the positive encouragement helps them get back on track

User is motivated to keep performing better and happy with the progress they make

 

Goals

What would a fitness system for newbies look like?

#1

Create a smart app that grows with the user

#2

Create an experience that is encouraging

#3

Set achievable goals with acknowledgement of effort

#4

Create a system that works in sync with other tech

 

Solution

Pulsate is a fitness system designed with you in mind. No more dragged out login procedures, no more jarring colours - just simple, efficient help for you to follow your fitness goals. This app grows with you - as your going gets tough, the tough gets going. It even syncs with your Apple watch and Apple TV to give the most wholesome, seamless experience.

 

Mobile Feature

The key feature in this mobile app is the onboarding sequence. Unlike traditional methods, this onboarding method pushes a user to start exercising immediately and uses that data as a way to grow with the user in the future.

User Flow:

Lo-fi Wireframe Sketches:

Basic sketches outlining the main UI components for every screen that is a part of the onboarding process.

Hi-fi Annotated Screens

Below are the individual screens that together formed the new onboarding experience

Animated Prototype:

The following GIF's explain what the onboarding process looks like in motion. 

Upon opening the app, the user is prompted to begin a basic exercise

A quick countdown later, a GIF of the exercise appears for the user's convenience. Users can also opt to restart the exercise

Users can then input their number of reps which the app uses for future workout suggestions

 

Watch Feature

The fitness system solution also syncs with smart watches like the Apple Watch to help new users keep track of their number of reps. 

User Flow:

Lo-fi Wireframe Sketches:

Basic sketches outlining the main UI components for every screen that is a part of the watch rep counter.

Hi-fi Annotated Screens

Below are the individual screens that together formed the watch rep counter. Designed according to WatchOS specs.

Animated Prototype:

The following GIF's explain what the rep counting process looks like in motion. 

1. Know which exercise you will be starting- the watch does the counting for you.

2. Confirmation upon completion and a quick glance of overall stats.

 

TV Feature

For the comfort of new users, the fitness system has a TV feature that allows you to perform simple workouts at home till you're ready to workout in a public gym.

User Flow:

Lo-fi Wireframe Sketches:

Basic sketches outlining the main UI components for every screen that is a part of the TV home workouts feature

Hi-fi Annotated Screens

Below are the individual screens that together formed the TV home workouts feature.

Animated Prototype:

The following GIF explains what the home workout selection process looks like in motion. 

 

Design Direction

For the comfort of new users, the fitness system has a TV feature that allows you to perform simple workouts at home till you're ready to workout in a public gym.

Neon be gone!

Upon researching several competitive apps, I noticed a strong presence of highly saturated neon based color palettes that can be quite overwhelming for new users. 

These kind of flashy colours not only gave a sense of urgency but also felt like a visual strain on the eye. In order to combat this, I decided to move forward with the more flat, spacious visual direction.

Mood board: 'Easy breezy Santorini'

UpThis beautiful town radiates a sense of relaxation and lightness. It is spacious and has elements of strong contrast.

The moodboard was used for the UI Implementation using the following keywords - lightness, spaciousness, fluidity, fresh colors and rounded corners.

UI Implementation:

 

Takeaways

This project helped me understand how to design for specific users and how to perform the necessary research to ideate an appropriate solution. In the future, if I reworked on this project, I would design the interface for the entire ecosystem instead of just the key features. I would also explore secondary animations and a voice based UI to sync with home assistant devices like Alexa.

Let's connect 🤝 
  • LinkedIn
  • Instagram
Email me  📧

© 2020 by Mriganka Gupta.