Designer / Creative
imge2.jpg

LifeTrak App Redesign

 

A redesign, for the LifeTrak mobile app, that prioritizes user experience.

 
 
frontimg.jpg
 
 
 

COURSE
Advanced Models and Speculative Interfaces: Visual Interaction Design

TIMELINE
November 2017, 3rd Year

TYPE
UX/UI Design

TOOLS
Illustrator & InVision

 
 
 

THE OVERALL SITUATION

UX Design
The preliminary overall layout of the application is in good condition as the application is clearly structured into five primary sections; the profile, dashboard, goals, settings, and help sections. Secondary layers such as the pages that can be accessed from the dashboard page, are also accessible thanks to indication informed by repetition, but may confuse the user at first thanks to no affordances on the dashboard page indicating that the sections are actually buttons. One issue when it comes to UX design in the application is the lack of communication that users can, on screens that depict particular graphs, flip their screens to reveal a more detailed version of the given chart. Another issue that involves UX design is the lack of written feedback about the users’ collected and depicted data; as the app is right now, it is hard to draw conclusions about the data itself and on how one can better improve their results. 

UI Design
The app is in most need of a UI redesign. The information trying to be communicated by the app is burdened by chaotic, unclear design. The areas that need to be addressed in particular in the app is colour, the size of certain fonts, the graphical depictions of collected data, and the hierarchy of all the pages. 

 
 
 

PARTICULAR PROBLEMS & FINAL SOLUTIONS

Dashboard

 
 
 
 

problems

  • Lack of affordance for buttons.

  • The use of a doughnut chart for certain activities does not add to the understanding of the data displayed, like the design for the other sections do.

solutions 

  • To give clear distinction of categories, a single colour is used to identify each.

  • Icons also now reflect each category's colours to provide both clear relation on the dashboard page and on later pages in the structure.

  • Hierarchy was reformed by incorporating a page title and the date at the top of the page.

  • Different charts were used to showcase the difference in between percentages and time.

  • Adjustments were also made to what is displayed for the categories of workout and total active time, so that they actually display quality information to the user.

  • Also addressed in the redesign is the layout of the categories, which are now displayed in two columns, to allow users to more quickly digest the provided information.

 
 
 

The Step Page

 
 
 

Problems

  • Lack of appropriate fundamental structural formation.

  • Lack of proper labeling.

  • Lack of proper presentation of numerical information.

  • Small typography.

  • Lack of informative information regarding the users use of the app; users are unable to gage an understanding of the data, its importance, and the norm for such data.

  • Does not utilize the entire length of the screen.

 
 

Solutions

  • This page carries on the category’s colour for the purpose of clarity, learnability, and easy recall.

  • The typography of the original is resized and recoloured to allow for better readability.

  • The structure is reformatted to allow for clearer hierarchy and a better understanding of what page the user is on.

  • The redesign of the graph now incorporates labels, numeric detail, and a more sound representation of time (it generalizes the data according to the hour).

  • The redesign now incorporates featured information that improves understanding of the subject and encourages more exercise.

 
 
 

The Heartbeat Page

problems

  • Lack of labeling of graph.

  • Small typography.

  • Lack of informative information regarding the heartbeat range is also a concern on this page as users are unable to gage an understanding of the data, its importance, and the norm for such data.

  • Does not utilize the entire length of the screen.

 
 

Solutions

  • This page also carries on the category’s colour for the purpose of clarity, learnability, and easy recall.

  • Structure also is reformatted to allow for clearer hierarchy and a better understanding of what page the user is on.

  • In the redesign the graph now incorporates more labels, numeric detail, and a different representation of one’s heartbeat (displays the min and max BPM range for each hour of collected data; from those ranges an average is generated for the day).

  • An onboarding button, that would lead to instructional information on the range element on the page, is included to provide users with a better understanding of the tool.

  • Again the redesign incorporates featured information that improves the understanding of the subject and encourages more exercise.

 
 
 

The Bright Light Exposure Page

Problems

  • This page also has a lack of graphic labeling.

  • Utilizes small typography.

  • Lacks informative information regarding the amount of bright light the user is exposed to. It is necessary that one is provided with this information because it enables the user to gage a thorough understanding of the data.

  • Does not utilize the entire length of the screen.

 
 

Solutions

  • This page also carries on the category’s colour for the purpose of clarity, learnability, and easy recall.

  • Structure also is reformatted to allow for clearer hierarchy and a better understanding of what page the user is on.

  • This redesigned page also incorporates an onboarding button that leads to more information on the graph, this feature is included to provide users with a better understanding of the displayed information.

  • The option to view wrist off information is removed because it is unnecessary that one should know what the light was like in the provided environment when they were not wearing the watch.

  • Again the redesign incorporates featured information that improves the understanding of the subject and encourages more exercise.

 
 
 

Activity Page

problems

  • A lack of graphic labeling makes the data incomprehensible.

  • Utilizes small typography.

  • Does not utilize the entire length of the screen.

 
 

Solutions

  • This page also carries on the category’s colour for the purpose of clarity, learnability, and easy recall.

  • Due to unclear data displayed in the original chart (unclear y axis), the information in regards to activity had to be depicted in a different way; first according to motion by amount of energy expenditure and then activity by amount of time.

  • The redesign further explores sleep time amount to active and sedentary motion in the third comparison element.

  • In the redesign the graph now incorporates labels, numeric detail and a more sound representation of time (it generalizes the data according to the hour).

  • This page’s redesign now incorporates featured information that improves understanding of what the goal should be for the given subject and encourages the user to be more active.