Get Offline and Discover.
Mobile First UI/UX Design
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.
Of mobile users prefer a mobile-friendly site.*
Have encountered sites that were not designed for mobile devices.*
Of the world’s population will own a smartphone or tablet by 2015.**
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.
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.
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.
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.
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.
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.
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.
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
Desktop Navigation & Filtering Menu
Change in Event Thumbnail Content Across Devices
Change in Attend Button Across Devices