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 intially developed as a companion to the web app experience and is optimized for quick inputs and gaining and overall health picture.
Feedback from our clients and users suggested that a mobile app would allow them to better track and manage their health and wellness on the go. The Life.io core app is a white-labeled product created using React Native and is available for iOS and Android.
I tackled everything in designing the native iOS and Android app, from wireframing, user journey mapping, design, 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.
The user journey took several rounds of iterations until finalized. Adjustments were made after rapid usability testing, which uncovered sticky areas. 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 met frequently with the cross-functional mobile team (developers, product managers, content, and account management) to plan and ideate on features.
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."
A main focus of the app involves data entry and syncing with health trackers. As a result, users have an 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.
Question: "Review this screen and select how you would input a workout. Where would you select first? How would you search for a workout?"
Question: "Please review the following screen and answer a few questions about the layout and design."
Easy to Use
As a data-driven designer, I try to consider edge cases and inclusivity when solving problems. 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. Below is an example of a poor design choice, (which I had assumptions about) and fully uncovered during usability testing.
Question 1: "Please review the following screen and answer a few questions about the layout and design. Pay attention to an error message on the screen."
Question 2: "Did you see an error message on this screen? What was the message about?"
Question 3: "Which element on the page did you focus on most?"
Question 4: "Did the brand appear trustworthy?"
Recalled error message
Focused on the error message
Found the brand to be trustworthy
Developing a flexible mobile design system that could be applied to white-labeled products was a challenge. I initially developed wireframes as close to final as possible. I followed this process by creating a mobile style guide and customized assets to add further emotional design to the app. Initial desirability testing of the illustrations was overwhelmingly positive, so I continued to include appropriate imagery within the app.
Sketching ideas as I go is how I solve problems without committing to an idea. Oftentimes I keep these sketches to myself and only share the final wireframes with my team.
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.