Thinkgeek

Android App

Interaction Design by Zoe Hardisty
Create at Mobify2016

The goal of this project was to create an Android app for Thinkgeek customers, that fit in with Material Design patterns and the Android experience.

The Project

The app is build on Mobify’s Astro framework; This means that it uses a combination of native components and adapted web views, pulled from the mobile web content at thinkgeek.com. My task was to port the original iOS Thinkgeek app, and bring it together with the mobile web view to craft a native Android experience.

Challenges

The challenges were two fold. First was to make it feel like a native Android experience, while limiting the amount to be redesign. The second was to create a consensus about what we were doing to make this successful and why.

The elements requiring the most consideration where the navigational structure, search and the native modal menus. Inside the web views the iconography was changed to keep it inline with Android symbols, while maintaining Thinkgeek’s strong brand.

Native vs Brand Font

In aligning the app with material design, one of the factors we considered is the use of the brand font over the native device font. As illustrated below, both fonts are very similar in look, readability and to the average consumer indistinguishable until scrutinized. Using the native device font provides the advantage of cutting down the resources needed, making it a bit faster to load. Ultimately with the client, we choose the brand font since since Lato is pulled in anyways to render the page content, and a consistent look and feel was prioritized .

Navigation using Lato
Main navigation using the brand font Lato.

Main Navigation using Roboto
Main navigation using the Android native font Roboto.

Lato brand font
Lato brand font

Roboto native Android font
Roboto native Android font

The Thinkgeek App

Thinkgeek App, Android vs iOS
Android vs iOS app. Changes to the header bar to reflect the layout and dimensionality of material design. The use of the action bar as the primary navigation, to duplicate the tab bar functionality.

The Thinkgeek Android app instantly delighted the their customers. As of writing this, it holds a 4.7 approval rating on the Google Play store.

← Token  Radia →