Responsive Design

Image

Timeline

January 2019 - March 2019

My Role

UX/UI Designer / UX Researcher

Team Members

- UI/UX Designer (John Drach)
- UX Researcher (Sean Baxter)
- UX Consultant (Gitta Salomon)

Tools

Image Image Image

Summary

The main goal of this project was to design and test the different break points of the same design keeping consistency of the usability but adapting the layouts to the different kind of screen sizes.

Problems

The problem that we were trying to solve originally, required a design that displays a lot of information in order to be useful, in the max size (Desktop) we were able to fit all the data in the row of the table however for smaller sizes we needed to develop different patterns that allow us to keep the same user experience.

Solution Requirements

Mobile Devices ( iPad and iPhone)

    Laptop

    Desktop

    Whiteboarding

    Brainstorming the different possible patterns we could use in order to display the same information that we already have in the desktop version and that was already tested with more than 20 users.

    Image
    Image

    Adaption - Paper Prototype

    After making some initial approaches to the responsive layout we transformed those whiteboard sketches into paper interaction models where we were able to provide feedback about the actual user experience (interaction) with the data we need to re arrange.

    Image

    iPad Optimization

    Initially the designs were created for a non-responsive website size and for a native iOS app mostly focused on the iPhone view , however after some research we discovered that most of the people is using iPad on daily basis, for that reason iPad optimization was our #1 priority at this point.

    0%

    More than 70% of our sales people use iPads provided by the company.

    Image

    Define User Flow / Prototype

    In this initiative I approached the experience creating an inVision prototype to test how the layout changes are affecting the interaction, responsive design sometimes is beyond screen size and it requires to re think the whole process to be able to deliver a useful product for end users.

    Image

    In progress... Results are coming soon