Back End system for B2B | Sivana Design

Back end system for a B2B online service

Introduction

The customer is a large finance company that has multiple client-facing teams taking care of end-users at different touch points and different statuses.

This required a single system to manage the customers’ needs and take care of their success.

Some of the information and functions are available on an old and complex system.

In some cases, the tasks the team members had to perform required using different tools and systems to complete.

This resulted in time-consuming tasks, long and cumbersome conversations with the company customers and a general frustration on the team members’ side.

Objectives

The strategy was to rebuild the existing system, based on the different teams’ needs and requirements.

As a POC, we first sought out to address immediate pain points, that will prove valuable to both the teams and to the company’s customers.

ROI was front and center, since creating a brand new system is very costly from a development point of view.

This system needed to prove it’s value to the company as soon as possible.

My Role

UX/UI Consultant

Tools used

Sketch (Wireframes)
Invision (Prototyping)
Zeplin/avocode (Dev deliverables)
Jira
Slack

Project Guidelines

Helping the product team get to where they wanted to be, required defining and maintaining a ‘rule-of-thumb’ guidelines for our mutual project.

These guidelines were aimed to help us stay focused and aligned throughout the duration of the project.

Consistency

Since we were building this system from the ground up, we defined that for us, one of the key objectives is a consistent User Experience across the system.

Scalable

Our POC was the first MVP dashboard for one of the client-facing teams, leading to a full-scale system.
Our User interface flows and layouts required a scalable structure that could be duplicated, and support additional use cases and functionalities.

One of the tools we defined was a Design System, aligning the appearance and functionality of different components in the system.

This system allowed the creation of new features in an agile way, with components ‘out of the box’.

Zoom in- zoom out

In order to achieve the top two design objectives, I created a site map and iterated it as the project evolved.

Image of The system’s site map divided into different teams and their available functions

This tool enabled us to constantly look at the system from a birds-eye-view and maintain scalability and consistency across the system.

Measurable

From the get-go, we’ve defined that being able to measure users’ behavior on the system would help improve it in the long run.

After creating a few features for the development team to start working on, I’ve prepared a report mapping out the types of measurements currently available on the system and recommendations for further analysis.

Image of UX Measurement reports for Mixpannel and FullStory

Collaborative brainstorming

We kicked off each new feature with a requirements list provided by the product manager.

In some cases, we had a rough sketch to work with, in other cases we didn’t. In these cases, we created one from scratch together.

User-centered Methodology

After defining the problem, our hypothesis and possible technological solution, I’ve defined the suggested outcome based on the following methods

User interviews

One of the challenges to overcome was time differences between the headquarter office and the US offices.

Most of the interviews were done via video calls or Slack and ‘shadowing’ local team members to better understand what types of workarounds they use in the existing system.

User Flows

One of the initial techniques I used to understand the users and their needs, was to map out the current flow they go through.

That enabled us to better understand the pain points we wished to address in the current process.

Jobs To Be Done

Once we defined the scope of each feature, I broke down the feature to different Use cases, based on a Jobs To Be Done (JTBD) framework.

After defining the main actions or tasks the users needed to complete, building flows for each functionality was easy.

This process enabled us to ‘catch’ edge cases and cover their solutions at a relatively early stage of the process.

Rough sketches

After the main Jobs To Be Done were in place, and the user-flow for each use case was defined, we defined a rough sketch to go over on with the PMs. In most cases, our rough sketches were done on a whiteboard together with the PM, in some cases a deeper sketch was required.

This method helped us to conduct a more focused conversation about a concept that is tangible. It also enabled us to move forward faster.

Wireframes

After we defined the initial feature scope I moved on to the wireframes creating a visual flow.
Using tools like Invision enabled the team to play around with it and see if the user flow makes sense.

Since we designed a style guide and a design system was in the making, it was easy to provide designed wireframes and an almost finalized experience that developers/ PMs/users can review and comment on.

Prototypes

Creating a prototype after the final iterations we defined, helped the team to better understand the flow.

Usability testing

Another method that worked really well for us, was to constantly involve our system users in the wireframes process, to get their feedback before moving on to development.

Once a prototype was ready for use, we sent them a link for usability testing, and asked them to perform a specific task on each feature.

Objectives achieved

One-stop-shop

The system is the one source of truth, where all the real-time data is gathered.
This way, both the client-facing teams and the back office teams will be able to work with the same information and functionalities, for the same customers.