Team
Sebastian Maulbec (Product Owner)
Andreu Sallés (UI / UX)

Time
4 Months

Tasks
User Experience
Visual Design

Tools
Sketch, InVision, pen and paper

UX Methods
User interviews, User Stories, Card Sorting, User flows, Usability tests.

Overview

This project consists in a product for a company that does Crowd-Based Market Research via Smartphone. The idea is to have a web platform that creates and manages forms to be sent to a crowd.

The crowd receives these orders on their mobile phone. By filling these forms/surveys they earn money.

Once the user survey or the form is completed, the data is sent back to the backoffice where it gets validated by QA operators. This system provides high-quality insights almost in real time, reducing drastically the traditional tempos in market research.

The backoffice was already functional when I started working on the project.  The goals were to rethink the UX by making it more intuitive while including new features and to improve the existing UI.

Note: This is a real project for a real company, but the brand has been removed for the Case Study.

The Backoffice before and after the revamp.

User Resarch

I started with user interviews. There are different roles in the company and each role uses the platform in a completely different way.

I carried out interviews with several people from each department to understand their needs and to spot problems in the workflow. In these interviews, we realized most of the concerns were related to productivity.

To decide the order of the Backoffice menu, we combined two UX methods: user interviews and a card sorting game.

User Stories

As a QA (Quality Assurance) operator, I want to quickly review the user submissions, so I can finish my tasks faster.

As a CIM operator, I want to use an intuitive menu, so I can access the important sections from everywhere.

As an operator, I want to load templates, so I can create forms faster.

User Flows

For this case study I am going to focus on the last user story:

 As an operator, I want to load templates, so I can create forms faster. 

The user flow shows the form creation process with this new feature.

When starting a new form, a dialogue will ask if you want to load a template or start from scratch.
After selecting the template, the operator will get a predefined form that can be quickly edited with variables.
Some forms require the users to check-in in a specific location or venue, like a Supermarket. In these cases we require an extra step to define the locations.
Here we define the target of this form. e.g. People who live in Hamburg, under 40 and likes classical music.

Wireframing

The first draft was made with pen and paper. Then, I moved to Sketch where I created the low fidelity wireframes.

Mockup and Prototype

I created the mock-ups using Sketch and several plugins to simplify the workflow (Library, Rename Layers and Symbol Organizer).

I prepared the prototype directly in Sketch using the plugin Sync + Prototype from InVision (Craft). This was very helpful when we needed design changes in future iterations.

Usability Tests (+ iterate)

We carried out several tests with different kinds of users. The tests helped notice flaws in the design. After each test, we reviewed the results and rethought the user flows. Then I prepared a new prototype to test it again, to assure a smooth UX.

The company works in Agile methodology combined with Google Design Sprints.

Delivery

The icons were exported in svg and png following the developer’s instructions. The screens were uploaded in Zeplin and also in Invision, so that the developer can have a better understanding of the user flows. Finally, I recreated the different animations in Principle.