On Device is a responsive design testing tool created for web/UI designers and front-end developers to provide a comprehensive platform for responsive testing. I was asked to design an intuitive user interface that ensures a highly effective workflow for the members.

ondevice1ondevice1

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.

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.

ondevice2ondevice2

LIVE PROTOTYPE

In order to visualize the page interactions, I built an interactive prototype in which all pages were represented with their low-fidelity mock-up.

ondevice3ondevice3

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.

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

TASK FLOW

In order to minimize the bounce rate, I visualized the possible branching point where conversion can be lost and special attention is needed during the design process.

ondevice7ondevice7

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

MODAL WINDOWS

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

ondevice9ondevice9

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

CONTENT PAGES

I kept the text rich pages free from graphic elements and used list styles and text formatting instead to prepare the pages for quick scanning.