Luana Cavalcanti
Luana Cavalcanti
Introduction

vPOS is the 4th largest payment process in Europe, along with another back office administration applications, vPOS it’s Retail inMontion most successful product.

Application Overview:
Vector is a back office administration system that manages menus, products, pricing and special offers with essential reports. 
It configures integration links to flight schedules and catering operations. It contains a comprehensive crew target setting and commission system.
Vector is currently divided in 11 modules and in this project we were working on with vPOS backoffice.
 vPOS was the first ever ePOS solution on-board and is currently the biggest ever aviation point-of-sale solution in the world. ThevPOS (Point ofSale) Solution comes with both iOS and Android operating system options as well and the backoffice for vPOS is a WebApp.
 
Project Timeline and Research Methods
timeline
Outcome
At RiM I was working on building a design system and a redesign of an application module, the project was initiated by front-end, who is currently using Semantic UI, the components of the design system would be used in our first MVP which is the redesign of Back Office, application that represents 34% of the company profit.
 
Enterprise products have very complex UX problems. There are a few reasons why this tends to be the case:
 
  • Enterprise products are sold to the company management team and not the users. Enterprise users can’t ditch a product because of bad UX. For instance, if your company decides to use Jira for product management, then you have no choice but to use Jira.
  • Many enterprise products have complex business logic. A product to manage the supply chain of a company is more complex than photo-sharing and that’s the case of Retail inMotion.
  • Enterprise products require users to have certain specific domain knowledge.
 
 
Problem statement:

Multiple products and modules with UX issues, which are significantly influencing how product development team are prioritising sprints and projects due to hardware and software need of upgrade.

Project Goal – Outline

Launch a redesigned module in a architectural style (microservices) and design system.

Design Approach

Research

I needed to know more about the user and their pain points. Our goals were to learn about: what functionalities are used most in order to focus on those functionalities for a standard product.

I started my research with putting together a KWHL chart to help keep my research on track and focused.

The KWHL chart contains notes on:

  • What do you already know?
  • What do you need to find out?
  • How will you learn it?
  • What do you hope to learn?

In this project we decided to kick off with the stakeholder interviews in order to know the key decision makers within the company and also to learn more about the client needs.

We conducted interviews for the redesign with product owners, product managers, account managers and customer service agents.

We also conducted interviews with developers involved with the microservices regarding the design system.

Below is an example of how we conducted the interviews with the customer service agents, followed by examples and the affinity mapping.

Stakeholder Interviews & Analysis

Stakeholder interviews are valuable research tools used to kick-start the design process. They focus on extracting information from three main areas in UX design:

  1. User needs. How will the design help the users?
  2. Business goals. How will the design support business objectives?
  3. Technical limitations. What technical obstacles need to be overcome?

In this specific case we interviewed the company CSA.

Channels and drivers that capture the areas of improvement

 

  • Customer Feedback (User)

Listening to what the customer has to say about the product.
eg. What are the pain points for the customer, what are the features that the customer absolutely loves, what are some of the features that they wish that the product would have, what are the parts that delight the customer etc.

  • Product Usage Analytics

Analytics that provide indicators of user interaction with the product
eg. is the user using a particular product feature in the way the product feature was intended to be used ? Do the analytics point to areas of friction within the product, or areas of frequent use ? Can certain navigational paths that are used frequently by the user made more efficient?

  • Business Strategy Alignment

Understanding the short term and long term strategic objectives of the business is a key driver to areas of improvement and addition of new features to a product.
eg. is the strategic objective to compete with an existing product to attract users from a different platform? is it to increase customer retention or conversion by 10% over the next 6 months etc.

Suggestions based on the CSA’s answers:

Design should be:

  • Intuitive feel and ease of use.
  • Intuitive use of icons, gestures, animations etc.
  • Clean clutter free design, that allow users to focus on the task without unnecessary distractions, while at the same time providing necessary options.
  • Intelligent use of flow and navigation, a design flow that anticipates what the user will do next and allows the user to intuitively move laterally between the different features or functionality of your product.
  • Delighting factor, set of design features that provides the user with a great frictionless, seamless experience that will make the user want to return to your product.

What we should take in consideration when designing


Align the design of the product with the intended audience and use cases. Define the intended audience and intended use cases, as the product design must be optimized for these scenarios.

  • Environment: Use cases should also consider the environment when the app is used. Examples may include used while flying vs. used while at the airline office. 
  • Type of Interaction: Frequency and type of interaction windows plays an important role in the design. sporadic use eg. No connection use eg. chat messaging, or deep use.
  • Demographics: used by younger demographics that are quick to discover hidden gestures vs. a Gen X audience vs. late boomers.

Interviews were performed with a number of CSA’S (6) and the suggestions and name were referred by the product manager.

An affinity mapping with the main points were also made for reference and saved on Miro.

After reviewing and the information we presented to the project manager who agreed to kick off the redesign of a settings page.

 

Once we knew who were the key stakeholders and which features were most used by the clients, we seated with front end to prioritise the components in the new microservices.

Notice that we had two products with were co-dependent:

Redesign and the design system.

Prioritisation of  Components on the Design System (Workshop)

Prioritisation of Vector Components on the Design System (Workshop)

Objective
Release components to be implemented according to the importance of such in the redesign.

This workshop was made based on:

  1. Meeting with front end developers where we gained insights about the progress of the design system based on Semantic UI and what was deployed and being tested.
  2. Preliminary stakeholder interviews
  3. Preliminary UI audit

In order to prioritize the first components we need to develop, the components prioritization workshop along with the design team, product owner and front end.

Before using the graph to prioritise each component, developers where asked to fill up the form indicating what was missing and what was  already done regarding the design system.


Outcome
 

At the end of this workshop, all the components that are on the “P1” zone will be developed first, and so far defined as simple and with the timeframe to be designed, which would be 3 days for example. Then, the “P2” and “P3” zone will follow. Components that are very rare and specific to one product should never be part of the system but they may be developed only for one specific project.

Semantic UI was used to build our design system which was documented on InVision DSM. The prioritisation workshop helped us to kick off the redesign working on the main component: cell tables.

Here is an overview of the components on Sketch:

Redesign of Handheld settings using the Semantic UI components

There are five main settings pages in backoffice: 

Checkout;

Credit Cards;

Miscellaneous;

Printer;

vPAY. 

The main task is to group settings pages according to dependencies  because it can be extremely long, full of diverse content and forms, and they’re very hard to read. It’s also difficult to find information when everything is simply “out there.”

 

Improve settings pages design by prioritizing content: Discovery

We seem to be relying on two contrasting approaches when it comes to designing pages with a lot of content: we either show everything (issue view current on Vector 2) or break content down and hide it in expandable sections which is the current redesign suggestions. We need to find a balance between the two by starting to prioritize content. The principle that can guide is in such cases is the 80/20 principle.

For the settings page case: can we prioritize 20% of the content that 80% of users look for and only hide the rest?

The problem with this approach is that we need to break content down and then group related things. By doing that and hiding it behind an expandable section we then need to come up with a label that encompasses the content of the section. That usually results in generic labels and users wondering where is the thing that they’re looking for, an option that we came up after testing with high fidelity prototypes was to favorite settings.

Sketches

More sketches can be found here.

Prototypes

Back office Application Back office Application

Other type of research that was done :

Heuristics Evaluation

Persona Worshop

Empathy Map work

 Empathy Map Workshop

*Currently updating the links to these research.