06.02.21Nati Native Android Figma Material Design
BUILDING CONSISTENT MOBILE APP DESIGNS
Back in Q1 of 2021, our client partner, Navigate Wellbeing Solutions, went through a new branding exercise to evolve the look and feel of their company. This new branding defined how Navigate would present itself to the public across its various brand touchpoints, including its advertising, website and native apps — the latter of which we were tasked with updating to align with the new brand standards.
To make these changes, the team was faced with three challenges. Firstly, the branding dictated a drastic change in theme colors — moving from a lighter style (a lot of white with pops of color) to a darker, bolder style that incorporated dark blue backgrounds with a few pops of color to draw emphasis on specific areas of information. This direction did not align with the way the native app was presented.
The second challenge was that the new brand colors were very difficult to use in any application that was not supported by Navigate. Up until this point, we had used a lot of gray and white backgrounds. Plus, the new “emphasis teal” color raised accessibility concerns for users. Finally, the third challenge was (despite all the branding changes) to ensure we were delivering the best user experience possible by complying with Apple iOS and Google Android design guidelines.
TAPPING INTO DIGITAL EXPERIENCE GUIDELINES
Both Apple and Google provide design guidelines for their platforms to help developers and designers alike build high-quality digital experiences for users within the Android and iOS ecosystems. Google uses a design system called Material Design, which helps teams build high-quality experiences for Android, iOS, Flutter and the web. Apple follows its Human Interface Guidelines, which provides in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.
Both Material Design and the Human Interface Guidelines outline themeable (or reusable) components. This includes colors, shapes, fonts, typography, switches and buttons, etc. These are all fully-vetted, platform-specific designs that were developed to meet user expectations based on their favorite device (e.g., iOS or Android).
From a design and development perspective, leveraging these guidelines and ready-made component libraries allows us to speed up the design and development process. It also allows us to better control consistency across the app since we’re always re-using elements and a single change (i.e., color update, font change) will automatically flow across all pages where that element is utilized.
APPLYING NEW DESIGN SYSTEMS
Before the work could really begin, the team needed to perform a design audit of the app to identify areas of inconsistency regarding branding. The audit also helped the team identify elements that would require a more custom approach outside of the themeable components.
The next step was to enter an iterative design stage. By leveraging Google’s Material Design and Apple’s Human Interface Guidelines, we were able to create a standard design component library for each platform and device. The library outlined each individual component that could be used within the app as well as the breakdown of the different parts of each component (e.g., typography, colors, spacing, etc.). This step was a big overhaul, but was sped up thanks to the Figma community, which enabled us to start with a baseline library then customize it as appropriate for our app.
With this component library in our back pocket, we were now equipped to make the appropriate updates to the colors, fonts and theming of the app. Plus, we now had a repository of elements (e.g., dropdown, image card) that we could simply drag and drop into future designs instead of creating them from scratch every time.
Once the updates were made, the new app designs were shared with both Navigate and the branding team to determine if they aligned with the new branding and identify additional areas where changes still needed to occur. This form of collaboration was a crucial step in ensuring everyone (from all sides) was on the same page before entering the development phase of the project.
MAKING DESIGN CONSISTENCY REPEATABLE
Development is now in full swing and the team has deployed the first round of color and typography changes in our testing environment. From there we will be running back through the app to do another audit to identify areas where colors may need to be adjusted or areas that may not have converted successfully.
And even though the app is still in development, we’re extremely pleased with the outcome. Not only does the app look sexier, expectations have been reset and branding consistency reestablished.
Ultimately, this project will set the standard for how we create native mobile apps (and web apps). And now that we have these component libraries built for native mobile apps, they can easily be cloned and applied to any new mobile project to speed up design and development when it’s warranted.
If you’re interested in learning more about how the Shift team can help you build a consistent and repeatable mobile app design, reach out. We’re always ready to lend a hand.