Offline Name

Get Offline and Discover.

Mobile First UI/UX Design

An experiment in going mobile first.

In the era of mobile devices, designing web applications for desktop screens followed by stripped down mobile versions is no longer a viable workflow. In fact, designs that start with mobile may provide a better user experience overall. This UX/UI design for Offline Media, Inc., is an exploration of the mobile first workflow strategy.

75%

Of mobile users prefer a mobile-friendly site.*

96%

Have encountered sites that were not designed for mobile devices.*

39%

Of the world’s population will own a smartphone or tablet by 2015.**

*Google, **KleinerPerkins

I.  Background

Offline is an online social discovery platform that facilitates real-life social interaction through the creation of casual group activities, such as bar nights, dinner parties and sporting events.

Event List Teaser

II.  Information Architecture

I began with the development of a concept model and site architecture based on an understanding of Offline’s strategic goals, intended audience, personas and functional scope.

III.  Interaction Design

Using Adaptive Path’s sketchboarding method, I came up with an interaction flow and initial wireframes for viewing, filtering, selecting and attending events. Then I mocked up several wireframes using Balsamiq.

Sketchboard
Wireframes

IV.  Style & Branding

I used Style Tiles to quickly iterate on the rebranding of core user interface elements, including the logo, color scheme, typography, textures, buttons and icons. The rebranding effort focused on appropriateness for Offline’s target demographic and suitability to a mobile interface.

V.  Mobile Design

Using Illustrator and Photoshop, I built high fidelity mobile comps for the main interaction screens. I used a prototype-review-refine workflow cycle to create several versions for each screen.

Event List Mobile Screen
Iterations on Event List Screen

UI Elements

Icons, circles and the top and bottom navigation bars are repeated throughout the application. Colors correspond to event types, a relationship that is reiterated by the repetition of color in the event category names and other descriptive event elements.

Event List Explainer

VI.  Desktop Design

Using the mobile design as a starting point, I created a responsive web design for the main discovery page. The design is optimized for desktop, laptop and tablet screens.

Desktop Screens
Desktop Screens

VII.  Conclusions

This exploration of the mobile first workflow strategy bore out several principles of mobile first design: 1) By embracing the constraints of mobile initially, the simplicity of the overall design is greatly enhanced. 2) Content should be tailored, along with interface elements, to various screen sizes. 3) Repetition of interface elements, but not exact replication, is necessary to achieve a consistent user experience across devices.

Mobile Navigation & Filtering Menu

Mobile navigation

Desktop Navigation & Filtering Menu

Desktop navigation

Change in Event Thumbnail Content Across Devices

Changes in content across devices

Change in Attend Button Across Devices

Changes in content across devices