perfectowebWeb design & programming studio
Fitlog №1
Fitlog №2
Fitlog №3
Fitlog №4
Fitlog №5
Fitlog №6
Fitlog №7
Fitlog №8
Fitlog №9
Fitlog №10

Fitlog

Development of an all-in-one training app for planning workout programs and keeping track of the workout progress. The bright, dynamic and at the same time soft interface design emphasizes the spirit of the target auditory and helps keep focus on the trainings.

Objectives
  • The app colors: yellow, white and grey.
  • No cluttering with extra elements.
  • Intuitive navigation.
  • User navigation from A to Z on first entrance. Obstacles-free navigation.
Solution
  • Use the following color palette: yellow (#FFD42B), dark blue (#1B1D28), light grey (#F1F3F6), white.
  • Analyze competitors to reveal the most suitable UI.
  • Apply vector design for best interface scaling.
  • Apply yellow color and its shades for STA elements.
  • Apply big font size for headings in compliance with iOS concepts.
  • Apply Roboto font type. “Always modern and available” – as described by guys from Google.
Key Screens
  • Loading screen: animated ƒ-shape logo filling with water.
  • Login screen: bright STA buttons against dark background.
  • Subscription screen: subscription information and 30-day free subscription option.
  • Workout screen: workout list, planning, editing and management.
  • Progress: info graphics and diagrams showing weight, workout dynamics, and other personal details. Here, the user can also create a target and track its progress.
  • Events calendar: a convenient organizer for future workouts with notifications and also a detailed workout history.
  • Workout: one of the main training screens. It has the function of generating Instagram Stories photos displaying details of the current workout.

Information

Customer: Fitlog Inc.
Creation date: 01 May 2020
Views: 369
Release year: 2020
Technologies: Figma

Choose language