Optimity / Step Streaks
Research - UX Design - UI Design - Animation
Intro
Optimity is a startup created to help busy individuals maintain healthy lifestyles. It is an app that rewards users for following basic tasks and completing daily activities aimed at improving healthy habits and behaviours.
The first project I took on while at Optimity was the Streaks Feature. Usage on the Optimity app was not consistent enough. Use was dropping over time and so users were not maintaining their activity or daily targets on the app. We needed a feature that kept users engaged on a daily basis & brought them back to build long-lasting healthy habits.
Year /
2019
Duration /
1-month design
1-month development
Role /
Responsible for research, conceptualisation, design, and supporting dev. teams for deployment
Tools Used /
Sketch, Zeplin, After Effects, Adobe Illustrator, Lottie
Process
General process followed to complete the ‘Streaks’ Feature.
1/ Define Problem and Business Goals
Definition of Problem & Goals
Outline requirements & justify to leadership teams
2 / Information Architecture
Basic flow and layouts are mapped out
Review this FE Dev team to ensure constraints of tech are captured and considered
Flows are presented to teams for early buy-in
3 / Wireframes & UI Design
High Fidelity wireframes using existing site styles
4 / Content Review & Prototyping
Drafted copy to ensure sufficient clarity
Happy paths are prototyped and tested with limited pool of testers
5 / Iteration
Alter designs to remove friction points
6 / Finalize Designs & Annotate Logic
Hand-off designs to Dev team
Prep asset animation in after effects and lottie
Building the ‘Streaks’ Feature
Ideation and Defining Scope
Building new habits is incredibly challenging, especially when you have to break bad habits to do it. So what keeps people motivated? For many, a method to keep motivation high is to get a friend or partner to join you. It helps boost morale and prevents you from cheating or skipping days because both parties have a responsibility to keep each other accountable. So why not support friends working out on Optimity? Say hello to Streaks! A very common concept that other fitness and gaming apps use to build consistency and a sense of accomplishment.
We decided to create a feature called “Step Streaks.” The feature has 2 friends achieve their individual step goals together so that they may earn a reward on the optimity app.
The process began with desk research studying other apps and similar features. We outlined any limitations and requirements of the feature and any additional concerns or considerations that needed to be made. This is where we then began to work out user flows and rules for the feature. After our user flows were drafted we brought it to our team to see if there were any use cases we were missing and we began to test its usability using Invision.
Wireframing and Flow
Mid-Fidelity Concepts
Streak Challenge Progress Page
For Streaks to succeed, the main page which would track the friends’ progress was crucial. Several things had to be included on the page to make for an effective experience. Most importantly, the page needed to show the user and their partner’s progress. It needed to track their daily progress as well as their overall Streak length. It also shows upcoming milestones and the daily rewards. The reward was only dispensed once both parties successfully meet the daily goal.
The Final Screens
Left / User Dashboard with Friend Challenge Banner
Center / Final Streak Challenge Progress Page
Right / Onboarding Screen
Hi-Fidelity Designs
After conducting the final flow review with the engineering team, the new UI components were given the go-ahead & the hi-fidelity designs were prepped for handoff.
Being a small start-up we did not have the resources to make custom illustrations for the onboarding process. However, we wanted the feature to feel open and friendly so we used assets from an online library called Undraw.
The feature also needed multiple entry points as the navigation of the app was altered. Initially, all challenges were found on the home page but we found this too cluttered and wanted to give them their own page to live on. Therefore, for a period, Streaks needed to have entry points on both the Challenge page and the Home page. We also added some onboarding screens as the Step Streaks feature was quite a bit different from the rest of the challenges on the app.
UI Animation / Building Assets with Lottie
The donut graph shown on the main page of Streaks animates together to show the growing progress of both friends involved. Once both people complete their step goal the two halves of the circle become one and this fire animation was used to help provide a visual reward for meeting the daily goal. Two variations were created for the page. The first is the Streaks fire icon as an outline while the second is a filled icon. The animations have small ember-like pieces coming from the top, both of which have a fill. Both animations’ embers are filled due to the actual size of the animation on the app being quite small. The burning flame is also exaggerated to make it more visible at smaller sizes.
*note: if below animation doesn’t load - refresh page
Option One
Option Two
Reflection
Getting healthy and building better habits is so much easier with a friend. We are social creatures after all and we can’t forget that our products our users are human and it is human to need others. Streaks tapped into that core insight and served our users well.
Update
Two months after the feature went live, we have learned a few things. The feature in its current state allows just 2 friends to maintain a streak. User feedback post-launch has informed us that:
Users would like to challenge more than 1 friend at a time
The goal of 7,000 steps is challenging — especially in the Winter (Seasons are a must to consider when analyzing user behaviour)
It’s important to remember products are never finished and we must continue to build on what we have. Learning from our users and making changes to suit their needs is key to success.
When I came to Optimity, the start-up was in the middle of a large brand update and they needed a style guide to help their UX designers and their developers maintain consistency. The company had never formally made a style guide before so I was working from scratch.
The style guide needed to be very specific, and it needed to be easily accessible to both the developers and designers. The style guide was created on Sketch and was later exported to Zeplin. I catalogued all of the icons used throughout the Optimity app and any other assets that I was able to find. The final style guide had sections on colour, accessible colour combinations, typography, margins, padding, card types/states, corner radius’, button types, drop shadows, pop-ups, and more.
