Company
Snapp Mobile
Snapp Mobile
Snapp Mobile
Date
Date
2017
2017
Role
UX / UI design, Branding, Strategy
UX / UI design, Branding, Strategy
Challenge your friends to walk more
Social Steps is a step counter app that lets you connect to your friends and motivate each other to walk more. The app is available on the App Store and Google Play.
Social Steps is a step counter app that lets you connect to your friends and motivate each other to walk more. The app is available on the App Store and Google Play.
User Flow & Navigation
User Flow & Navigation
User Interface
User Interface
One screen overview
One screen overview
One screen overview
The Home is the core screen of the app.
Users can have a quick look at their steps count and check their current position in the friends standings.
The Home is the core screen of the app.
Users can have a quick look at their steps count and check their current position in the friends standings.
The Home is the core screen of the app.
Users can have a quick look at their steps count and check their current position in the friends standings.
Keep up the challenge
Keep up the challenge
Keep up the challenge
The friend detail view shows the progress of the 1 : 1 challenge based on different data, like daily wins or total steps.
The timeframe of the challenge can be adjusted through a picker selector.
The friend detail view shows the progress of the 1 : 1 challenge based on different data, like daily wins or total steps.
The timeframe of the challenge can be adjusted through a picker selector.
The friend detail view shows the progress of the 1 : 1 challenge based on different data, like daily wins or total steps.
The timeframe of the challenge can be adjusted through a picker selector.
Brand elements
Brand elements
Product icon
The logo metaphor originates from the round shape of the Homescreen progress chart. On native platforms, the product icon has a Material elevation on Android and a linear gradient on iOS.
The logo metaphor originates from the round shape of the Homescreen progress chart. On native platforms, the product icon has a Material elevation on Android and a linear gradient on iOS.
Colors
The Brand color is the user’s default color for the main chart and the personal profile. An additional color palette is used for friends.
The Brand color is the user’s default colour for the main chart and the personal profile. An additional color palette is used for friends.
Typography
With its rounded geometric shapes, Comfortaa typeface makes a perfect fit within the brand elements. System typefaces Roboto and San Fransico are used as main fonts in the platforms UI.
With its rounded geometric shapes, Comfortaa typeface makes a perfect fit within the brand elements. System typefaces Roboto and San Fransico are used as main the fonts in the platforms UI.
Other projects
