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.

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.

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.

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.

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.

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.

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.