the ux process behind compelling user experiences

WEBINAR

August 27th 1pm PDT|4pm EDT

Barbara LipinskiUX Designer

Bruno VichesSenior Web Developer & Product Manager

Charles GreenMarketing Analyst

Clothing design

First design schools had the approach “one solution fits all”

Graphic design

Product designIndustry growth forced

the unified design to split into different disciplines

QUESTIONS #BestUX2015


In the human-computer interaction, the physical space in the screen has created a dialog between

the user and the design.

Donald Norman

“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and

its products.


UX addreses how a person feels about using a system

What, when, where, why and how someone uses the product UX takes into account business goals, includes the user needs at every step of the product cycle

Multidisciplinary techniques are involved


UX Design behind the

visual interface trying to meet business

goals with user goals

+A good user experience has a positive effect on how users feel about a site or product.

This will impact sales and conversions.

Business GoalsUser GoalsUser Interface Technology

USER EXPERIENCE

UX Elements QUESTIONS #BestUX2015

UX PROCESS

UXSurfaceVisual design

SkeletonInterface &navigation

design

StructureInteraction design +

Information architecrure

ScopeFunctional

specs, Content

requirements

StrategyUser needs +

Product objectives

This is a schematic way to break down the basic steps for

developing UX in a coherent framework.

These 5 steps go from abstract to concrete and each of

them has specific tasks.


Case Study

WIT

Summary

The client had an internal administration system comprising many

company-related features and some talent management features.

The requirement was to strip all internal based features and add

specific new talent management ones.

The goal of the company was to have a lean talent management

system that could be sold to small and medium-sized companies

that would need it.


Analysis

Starting point

The app formerly known as SGI was the starting point to create the new app “Wit”


Personas

Marie is a Psychologist concerned about people, and a user of social networks like Facebook to socialize with friends.

Job Title: Human Resources Analyst.Tasks: Manage employees.Motivation: Easy to use site that helps her complete tasks faster, enabling her to keep track of employees.

30-39 years old, married woman, young kids

Marie

John is a Software Engineer who is mostly focused on productivity and metrics. He spends his free time reading technology magazines.

Job Title: Project Manager.Tasks: Manage projects and teams, keep track of productivity.Motivation: Visual comparative information of charts and metrics.

40-50 years old, married man, teenage kids

John

Paul is a Software Engineer interested in new technologies and devices. He uses Twitter for debating ideas with other people.

Job Title: Developer / QA.Tasks: Manage his own career progress.Motivation: Quick and easy way of doing tasks, with as minimal paper work as possible.

24-30 years old, single man, no kids.

Paul


User needsPerform advanced searches using multiple criteria.

Find vital information including availability, technical skills, position, absences.

Follow career progress and development.

Run quick performance evaluations, skills updates, days off and vacations.

Receive alerts about important information and changes that require action

from the user.


STRUCTURE

Problems detected

Poor information architecture, difficult to find main actions.

It requires too many clicks to perform the most common tasks.

Lack of any shortcut to get to work in progress or recent work.

Lack of an alert system to know about important events.

Poor hierarchy and visual cues to identify content blocks and actions.

Poor layout, bad use of spaces and content distribution.

Not adapted for tablet devices.

Weak use of color and visual elements. Old-fashioned look.

The same navigation elements are visible for all users.


Proposal

List all possible interactions for every persona.

Focus on the 20% most common interactions and create significant improvements.

The remaining 80% of the actions should also reduce the amount of needed clicks and improve the user experience.

Increase user satisfaction by at least 40%


STRUCTURE

Statistics (some of the 20% most common interactions)

Common Actions # Clicks Comments User satisf. index

Search employees from a department, a building and a

career12 It’s difficult to get this very common metric. You

have to create a filter that can’t be saved 5

Get a report from selected KPIs 8-10 Some KPIs can be received using 8-10; others are

not available 3

Learn about the last performance appraisal of an

employee and jump to his/her career progress

9 The information is not integrated in one place and the flow is not employee centric 3

STRUCTURE

Employee Search

Wireframes

Employee filtering by multiple criteria is

one of the main tasks.

The solution was a fixed and visible filter

column, instant update, and a list of

columns with contextualized information.

This makes it easier for the user to

visualize the differences between them.


Employee Search

Wireframes

The wireframes were designed

emphasizing the content, minimizing

and hiding the less important elements.

The progressive disclosure pattern was

useful to show important information

about the employee with the possibility

of viewing more details if necessary.


Visual Design Options

Mockups: round 1

Two possible look and feel options to apply to the wireframes, both focused on clean design, clear hierarchies and avoiding heavy visual treatments and effects. Tested with real users.

Employee Search

Mockups: round 2

After the user feedback, we tweaked the UI

several times until this look and feel option

was selected.

It optimizes screen size with a simple color

scheme to emphasize the use of color as a

visual indicator.


Mockups: round 3

Hi-Fi mockups were used to decide some UI components, e.g. the vertical menu display with different menu levels. We created videos of users testing it and we measure the time it took them to achieve goals.

Menu

Visual Design

Style Guide

Style guide with all the specifications regarding fonts, space, colors and

patterns, in order to establish basic principles to be applied across the

complete site.

We designed a visual language to create

independence from designers and achieve a

cost-effective UX.


New Statistics vs. Old StatisticsActions # Clicks Comments User index

Search employees from a department, a building and a career

12 vs. 4 It’s difficult to get this very common metric. You have to create a filter that can’t be saved

Great change. All filters in one place. Sometimes it takes a second or two to load changes.

5 vs 8

Get a report from selected KPIs 8-10 vs 1 Some KPIs can be found using 8-10; others aren’t available

All importants KPIs directly in the dashboard

3 vs 10

Conclusion

Applying the UX process we could detect and solve the most important issues from the first version of the system with excellent

results, backed with real user data.

Barbara [email protected]

Bruno [email protected]

Charles [email protected]


Belatrix Software

@BelatrixSF

Belatrix Software

Belatrix Software Factory