Android Visual Design Refresh
The TD Ameritrade Android app had not seen a major visual update in years. In the last year, the in-house Mobile team had grown to include four Agile teams and when one became available to take on this long needed project, we were able to start refreshing the look of our app. As the Creative Lead for Mobile, I worked closely within this Agile team to bring this vision forward.
Top App Bar
One of the main focuses of the first phase of the visual design refresh was rethinking the top app bar. Several different colors from our color palette were explored, but we ultimately decided on a flat white background to match our other platforms and apps (iOS and mobile web).
The components within the app bar (TDA logo, alerts indicator, and trade button) were also updated visually and reorganized.
Elevation
Elevation, light, and shadows are important elements of the Material Design environment. The current app design lacked those elements so it was essential to explore ways to introduce them during the refresh.
Iconography
The current app used PNGs (cut and provided for different screen densities) for the iconography. The result was hit and miss. Several icons were implemented incorrectly. Many icons rendered improperly and were blurry. The icons were not designed at a uniform size. Revising the iconography was a big part of phase 1 for me. I wanted to eliminate using PNGs and implement scalable vector graphics that rendered well across all screens.
Tabs
From a design standpoint, I looked towards Material Design to provide the structure for creating the look and behavior of the tabs. When the team got to the development stage, the developers discovered inconsistencies and custom code that prevented proper implementation of the tabs. Unfortunately, the tab structure seemed to change from screen to screen. Some tabs were built as buttons. Some tabs were built natively. Some tabs were built in a completely custom manner. We decided to strip out the custom components, refactor the code across the app, and implement the new tab design.
Results
The team knew going in that this would be a multi-phase project, but we were able to build a solid foundation with cleaner code and a more beautiful design that leads us towards a more native direction.
Below are a few before and after screens.
Back