The Life.io mobile app is a health and wellness product allowing users to track and monitor their physical wellbeing. By tracking records, they earn points and rewards. This app was initially developed as a companion to the web app experience and is optimized for quick inputs and gaining an overall health picture.
Feedback from Life.io's insurance clients and users suggested that a mobile app would allow them to better track and manage their health and wellness on the go.
Since Life.io's products are licensed to insurance companies, the identity of the project would be white-labeled and needed to be adaptable. The overall framework would need to be flexible so that sections could be rearranged or removed based on the needs of the client.
I tackled everything in designing the native iOS and Android app, from wireframing, user journey mapping, design, illustration and motion, and branding of the product. I approached the mobile app design first by delving into the research on the users, how they have been interacting with the web app and how we can translate that experience into a compelling mobile experience.
I met frequently with the cross-functional mobile team (developers, product managers, content, and account management) to plan and ideate on features.
The user journey took several rounds of iterations until finalized. I made iterative adjustments after rapid usability testing, which uncovered areas of improvement. Other considerations due to the unique characteristics of React Native's transitions and navigations made it necessary to further simplify the journey to eliminate additional screens. For example, we explored how we could eliminate segmented controls and instead contain the same information in one view.
I had to translate Life.io's core feature set, which focuses around earning points and rewards for healthy activities, to the mobile space. I knew that the core experience would center around quick inputs from the main dashboard. Insights from graphs and content would also have to be accessible from the main Dashboard area.
To eliminate issues, I set up usability tests for error messages or other feedback mechanisms to test the readability and findability of the messaging or user interface.
We evaluated the success of our designs as we worked through user experience issues. I used rapid usability testing methods to test assumptions as we worked on the designs. I conducted over 50 micro-usability tests on flat designs and the prototype as part of the initial testing.
The app uses a card component in various formats as a flexible container for information. We wanted to verify the findability, interactivity and readability of card container components. Cards can be swipeable, stackable and could potentially have horizontal and vertical scrolling.
Question: "One of these designs is interactive and the other isn't. Which one do you think you can swipe to see more content?"
Chose Option 1
Question: "You are reviewing a syllabus of content tailored to you. Please select where you would view your current Activity."
New users were prompted to set up a health account and pair their fitness trackers. Life.io incorporated fitness data from Fitbit, Garmin and Withings to help users understand their fitness goals and path. Pairing trackers provided data for workouts and sleep tracking. After completing onboarding, the users are directed to the main Dashboard.
After onboarding, the main health Dashboard is the central hub from which users can access their entire health and wellness overview.
A main focus of the app involves data entry and syncing with health trackers. As a result, users have the option to input data for points and rewards. Making the input process as enjoyable and delightful as possible was essential. After determining the user journey earlier in the design process, I developed several input patterns and tested assumptions about ease of use and test time.
I experimented with Lottie to integrate subtle and appropriate animations for loading screens or supplementary hero images.
After focusing my attention on learning React Native, I now have a firm grasp on prototyping my ideas in order to view quick and accurate results. While I enjoy the process of designing and using a tool such as InVision or Principle, I would now take a different approach to designing this product by prototyping the app in React Native instead. Additionally, the characteristics of navigation in React Native and the thought for both platforms (also considering that 75% of the users I design for use Android) I would take an Android-first approach to design.