OnDevice App is a responsive design tool created for web/UI designers and agencies to provide a comprehensive platform for testing and presenting their responsive design. I was asked to choose the design direction and create an intuitive user interface that ensures a highly effective workflow for the members.

ondevice1ondevice1

BRAND CONCEPT

While building the visual strategy I needed to take into account the trend sensitivity of the target audience as well as their professional preferences, employment status and networking habit.

PAGE FLOW

The page flow was built to support the learn-ability of the app’s core functions. Since efficiency had a top priority I minimized the number of the intermediate steps during the sign-up, registration and  account management processes.

ondeviceapp.com Responsive and mobile design presentation tool previewondeviceapp.com Responsive and mobile design presentation tool preview

UI ARCHITECTURE

Making the UI as intuitive as possible required close relationship with and deep listening to the members of the target audience. Following the natural flow of their work process helped to find the best location for the UI elements.

ondevice3ondevice3
ondevice4ondevice4
ondevice9ondevice9

MODAL WINDOWS

Clearing every visual distraction away from the modal windows, helped to keep the visitors on a single track flow.

VISUAL ORGANIZATION

On the front-end side, it was crucial to set the white spaces, padding size and shape pattern wisely to reach the optimal layout.

The main goal was to avoid a crowded overall look and feel and still listing as many devices in one viewport as possible.

ondevice5ondevice5

LANDING PAGE

The landing page and other commercial materials (banners, social headers, etc.) were created in compliance with the application’s visual strategy.
The work in this case also started with creating low-fi mock-ups to find the most descriptive layout optimized for a one-way conversion.

ondevice6ondevice6

PAGE HIERARCHY | FLOW DIAGRAM

Visualizing the page hierarchy was an effective way to check the number and the difficulty level of the steps the visitors have to make to achieve their intended goal.

ondevice12ondevice12

RESPONSIVENESS

Starting from the prototyping process the entire UI design was prepared for responsive development. I compiled the design of all the pages in 3 different sizes, displaying the mobile, the tablet and the desktop version.

ondevice8ondevice8