Thinking the UI design of Safe Anywhere could be better, I explored alternative concept and proposed the design to the UX team in Helsinki. Though it was too late in the development to change anything, it was still a good exercise.

A Retrospective

After months of working closely with the developers and stakeholders, feedback from different people, and the evolution of mobile UI in general, we found there were problems with the current UI design.

The main objective was to improve the UI and fix the various problems of the current design, both technically and aesthetically. The core ideas of the original concept were kept (simplicity; ease of use; modularity; one design language).

Platform Challenges

The original Mobile Security on Android came bundled with 2 apps, the Mobile Security itself and Safe Browser. Since iOS apps could not be bundled, the team had no choice but to build most of the Mobile Security features plus a few iOS-specific stuff within the Safe Browser. The outcome was that it was contradicting with the original intention for one design language.

We learned and adjusted the features due to the unique environments and technical limitations of each respective platform. Android with its fragmentation; iOS with its limitation making features impossible to implement; WP8 with its similar challenge as iOS and its wholly different UI approach. 

  • gallery-image
  • gallery-image

New Navigation

On the navigation front, the carousel was problematic when it came to localization. Languages like Greek, Russian and Arabian were simply too long to fit. The carousel also took up a huge chunk of precious screen space meant for content, especially on LDPI and MDPI devices (still relatively common in 2012). It made for a claustrophobic experience on mobile phones. 

The solution was to use a dropdown menu common on websites (now called hamburger menu). This approach allowed room to breath while addressing the localization issue. Users could also swipe left or right to navigate to other sections alternatively.

The menu also allowed new features to be added in the future without hassle. Adding new items on the carousel than the space available meant additional effort from the users to swipe just to see other menu items.

Adaptable Design

2012 was the time when Google introduced the Holo Design for Android. My concept used Holo as the baseline as it was more future-proof than the current UI. The intention of the new design was to be as adaptable across different apps, platforms and devices.

The UI elements like icons, header, list and typography stayed the same size between mobile and tablet. This made for easier maintenance for the engineers.

The design direction was to introduce a lot of whites with an accent of brand colours on menu, buttons and dividers.

Tablet UI

The new design fits like a glove on a tablet. With the additional real estate, the menu can be displayed upfront at all time.