WORLD TRADE SYSTEM

BCSG

 

November 2016 - April 2017

Tablet

PROJECT OVERVIEW AND MY ROLE

The World Trade System was a project that initially started off as a piece of work for an existing client, Lloyds Bank, but evolved into a much wider project with other banks becoming interested and involved. The concept for the product was simple, it would allow small to large business owners to research key information related to imports and exports around the globe. I acted as UX & UI Designer for the project, and also managed internal stakeholders for the duration of the project. My main take was to make sure the build we were developing reflected the UX and design I had come up with.

REQUIREMENTS GATHERING 

Like with any project the first thing is to understand context and needs, and to do that we need to gather requirements for the project. These include three types of requirements, business, user, and system. To do this myself and the Head of Design (Steve Morris) had multiple meetings and interviews with key stakeholders, both externally with Lloyds and internally with our Business Analyst, Product Owner, and Principle Technical Architect. Below are some images showing various notes from these meetings. A few of the high level requirements were:

Business requirements: Rough timelines of five months, business goal of redesigning Llloyds current portal, later changed to a stand alone product to be pitched to various banks.

User requirements: Users must be able to do the following: Research trade data, Monitor trade data, and find new business opportunities.

System requirements: These were the most in depth requirements due to various legal and data restriction rules. We focused on desktop and tablet app, but as we were using multiple data courses with their own API calls (Including Comtrade, IMF, and FX data) we had to research their limitations in what we could pull. 

Image 1.1 Requirements meeting

SKETCHING AND ONBOARDING

Next steps was to start sketching out some basic concepts, looking at the different entry points and user flows to a single end point (The dashboard). Me and the UI Designer, Colin Ord, grabbed the closest whiteboard and start drawing out ideas. We went through numerous iterations of the sketches and flows, gaining feedback from either and other internal stakeholders throughout meant that we could iterate fast to save time. A few things that we discovered at this stage:

  • We chose to use Lloyds landing page starting point, with various CTAs to cover multiple user cases.

  • In order to manage the various use cases we decided to front-load the onboarding.

  • Due to the multiple data sources that we were working with we thought the best approach to the dashboard and search designs was to opt for a modular layout, this ended up working well with the design guidelines we chose - Material Design.

Image 1.2.1
Image 1.2.2
Image 1.2.4
Image 1.2.3
Image 1.2.6
Image 1.2.7
Image 1.2.9
Image 1.2.5
Image 1.2.8

PAPER PROTOTYPING

Once we had a agreed on the general layout and main flows of the design myself and the UI designer started to create a paper prototype that we could share with various people and test our designs, quickly and effectively. We drew out various modules using marker pens as can be seen below, and took photos of the layouts and then uploaded them to Invision which allowed us to create a clickable prototype. This was then shown to external stakeholders at Llloyds, and internal ones including the Director. The prototypes can be found here:

Version 1: https://bcsg.invisionapp.com/share/2BAD70WNF

Version 2, after iteration: https://bcsg.invisionapp.com/share/V7A9MYZTD

Image 1.3.1
Image 1.3.6
Image 1.3.4
Image 1.3.7
Image 1.3.2
Image 1.3.3
Image 1.3.5

USER FLOWS AND FINAL CHECK

Before we started with high-fidelity designs we wanted to digitise our high-level user flows and send them out to the team to make sure everyone was on the same page, and that we hadn't missed any vital pieces of information. We opted for Axure software to build the user flows, There is a sample of the flows below, once these were signed off we were ready to start on the full-fidelity designs.

A UXER'S NIGHTMARE: DE-SCOPING

No one likes to hear the words de-scoping, especially this far into a project. However it is a natural part of any project, and it's why Agile Scrum worked so well with this project. The client Lloyds, by this point, had shifted its focus onto other projects and away from the World Trade System. But we at BCSG didn't want to waste the work we had done, so the new business goal was to create a white-label product, similar to a trade portal that we could pitch to various banks, including Lloyds. With that in mind, our full-fidelity mocks had to be white labeled and not branded Lloyds. 

HIGH FIDELITY UI DESIGNS

We opted to use Sketch for many reasons, apart from its ease of use it works very well with Invision through its Craft Plugin (and third party plugins). As a team we wanted to send out regular updates to the development team and the easiest way to do this was the have a prototype built with Invision and synced with Sketch, anytime we made an update in sketch it would automatically sync with Invision. 

NEXT STEPS

With the MVP build completed it is now being pitched to various bank, including Lloyds and Deutsche bank who are interested in the product and the potential it has. 

All works ©2002-2020 Benjamin Tutin, all rights reserved