Attain App Android Design
Attain App customers (employers) want highly personalized, engaging digital health solutions that address their entire population. Until recently, Attain was only available iOS which made it challenging to sell to large customers despite strong results for iOS users.
When designing for Android app, our approach was to create a consistent experience in features and functionality to the iOS product. To feel natural to users, UI patterns were adjusted for the platform standards of Material Design. Activity Goal values were adapted to Fitbit device tracking functionality.
Attain iOS is designed with Apple standard font of San Francisco. After evaluating native Android default and discussing technical feasibility, we chose to design Android Attain with custom CVS Health Sans. This allowed for close look and feel consistency between the two platforms while also aligning with the CVS Health enterprise brand standards. CVS Health Sans is also built with legibility and language support accounted for.
Leaning into the Material Design guidelines, we made UX/UI choices to the styling of the navigation, and tabs to follow Android design standards. Another example of the adapted design is settings menu moving from bottom navigation to the top and adapting they styling to follow Material design.
Fitbit device data was surprisingly different from Apple Watch data, despite sharing most data types. Team members across disciplines wore both devices to test tracking consistency. We ran a CVS colleague-only beta to help us test, learn and adjust Activity goal details before launching to the public.
For iOS we ask for access to users Apple Health Kit data to connect to Apple Watch. For Fitbit integration, we need users to take an additional step of allowing access to their Fitbit account and syncing device. Connection is implemented during app onboarding.
Activity calorie goals are adjusted for Android Attain to align with how Fitbit trackers calculate calorie tracking. For Healthy Action content, we adapted guidance for features available on the Fitbit device.
The design system used across Attain app was updated in the tools used by designers (Sketch & Figma) in order to include a UI kit for Android Attain. This included components, icons, colors, text styles used in designs across the product. iOS UI Kit had previously been built in the tools by the team. Having a holistic design system allows the design team to work faster, smarter and more consistently.
In addition to the UI kits, all screens of the app experience were built out in the Figma tool (225 iOS Screens & 158 Android Screens at the time). This allowed for a single source of truth for all final design and annotations which was essential for efficient handoff and collaboration with engineering.
