Fitbit App Redesign

Fitbit App Redesign

UI/UX

Fitbit App Redesign

Fitbit App Redesign

For this redesign, my goal was to better improve user experience and the overall user interface of the app.

Before beginning my redesign, I tested the app in order to get a sense of the current user experience and interface. I then decided to redesign the app in terms of data visuals, color differentiation between different pages, and overall organization of data and content.

Black iPhone: Existing App

White iPhone: Redesigned App

Dashboard

Dashboard

To improve the overall UI, I darkened the background of the app to allow the colors to stand out more, which would make it easier to notice and understand when users quickly glance at the app when they're on the move.

Further more, I assigned a certain color to every category in order to differentiate between them.

Steps Page

Steps Page

For the different category pages, I redesigned the layout by allowing users to have access to their today data visuals, the past week, and the past month data visuals with just a swipe across the top of the page.

A general overview of the amount of steps they completed in relation to their goal is seen in the arc shape over the title of the page.

I improved user experience through providing users with easy access to their history and giving them the option to view it by day, week, month, or year by just swiping right or left on the bottom half of the page. Furthermore, users can access this information with just a tap to expand and collapse, without being taken to a whole new page.

3 .png
Data Visualization

Data Visualization

For the data visualization, the existing fitbit app displays user's today data and then offers an expanding button that takes them to a horizontal full screen that allows them to view the bar graph data weekly, monthly, and yearly. 

For my redesign, I offered the overview of data daily, weekly, and monthly through swiping across the top of the page and offered the same technique for the history on the bottom half of the page.

The first image is the daily view where today is seen as a bar graph with a star representing what time during the day users reached their goal. As for the history, the weekly view is displayed in a line graph and table combined where the line gives a general overview of how users fluctuated throughout the week, stars in the table columns show users which days they met their goals, and the numbers in the table columns are the number of steps in specific they took that day of the week. 

Through the second and third images, it can be seen that the month view of the data visuals is the same format as the weekly view, and the yearly view is seen in a line graph where users can tap on a dot on the line to see specific details. 

4.png
5.png
Color Differentiation

Color Differentiation

For the other categories (distance, calories, active minutes), I provided the same layout but changed the color for each to keep from confusing users and improving the UI/UX.

7.png
Sleep Section

Sleep Section

For this section of the app, I kept the data visuals the same except for changing the colors of the chart to make certain lines stand out more so users can notice and understand them better.

Also, for the history view, I displayed it on the same page and like the other pages, organized it in a way where users can see their overall sleeping hours throughout a certain week, without needing to be taken to a new page. 

Process

Process

I began my process by laying out the app system and navigation. Then moved on to overall layout and placement of dashboard and focusing on different data visualization charts for the organization of app data.

Untitled-3-02.png
Untitled-3-03.png