3 years ago

Overview

Adapt Biosgraphy social blogging web application to a native iOS app for both phone and tablet.

Objectives

To keep the interface clean and simple while providing all of the functionality of the web app. To promote the creation of content, and the consumption of content.

User Interface

The design expanded on the existing styles used in the web application using whites and greys as distinguishers of “levels.” The brand orange provided a good navigation colour. White space was used as much as possible to de-clutter the masses of data being imported from the server.


bios-mobile-2

Some of the UI elements we appropriated from common apps, like the App Store. This was to achieve our first goal (see above). However special attention was given to rewarding elements such as the create button, and the explore navigation.


bios-mobile-3

We made careful distinctions between the Crowd Chronicle and Explore pages. These pages were displaying content in different formats, however with the same menu navigation it was important that the differences were maintained.


bios-mobile-4

As with the web app, full sized images and copy legibility were the heroes. This was a platform for the user. No unnecessary ornamentation, the focus was on the content.


bios-mobile-5

Conclusion

Designing for mobile is always a big challenge but staying focused on the objectives, along with continuous testing, allowed us to make informed design decisions. This ultimately helped us deliver a huge amount of information, in a simple to use manner.

WHAT TO READ NEXT:

Biosgraphy: Icons

Semiotics and Mobile Devices