Developing modern apps for financial markets – Part 3: The UX Process


As a UX and visual designer in an IT company, I often have to describe what I do and demonstrate the value of involving a professional UX designer in a project – and on some occasions, this means explaining that UX design is much more than just applying colours and changing font sizes. The best way to prove this is to show it live.

Therefore, the most important UX-related goals for our Commodity Market Overview App were:

  • To show and explain the UX process,
  • To present UX artefacts, which are produced at each stage of work,
  • To support our sales pitch in the field of UX design.

First, check out our video which shows the entire process – from Business Analysis to Architecture development. After that, we’ll take a step-by-step journey through the UX design phase!

Our principles

The typical UX process, which we, the UX Design Team at GFT Poland, conduct in our daily work, is based on several principles that we need to follow to make sure that our projects succeed:

  1. User-centred approach
    Putting the final user of the app at the centre of our interest is essential for delivering a solution that will cover our users’ needs.
  1. Close co-operation with business analysts
    An effective collaboration with BAs is crucial for us to understand the meaning behind the data, the relations between different bits of information and business requirements.
  1. Co-operation with the dev team
    All of us are designers, and we appreciate a good piece of design work. But we always need to make sure that our ideas for solutions are actually implementable.
  1. Multiple iterations on deliverables
    All phases of the UX process are iterative. We sketch, discuss, sketch again, discuss more, etc. in order to come up with the best possible solution.

The tricky part of the design process for the Commodity Market Overview App was that we, as the UX Practice in Poland, were one of the user groups. And it’s always difficult to design for yourself.

Commodity Market Overview App

The Process and Artefacts

Brainstorming and Sketching

During the whole design process of the Commodity Overview App, I was the only UX and visual designer engaged in the project. I made sure I worked closely with our Business Analysts. During the initial brain-storming sessions, we agreed on what approach we wanted to take in the application and what workflow we wanted to implement.

Our goal was to:

  • Enable users to access data that they are interested in,
  • Give users an option to compare multiple indexes across different commodity groups,
  • Visualise the data in an intuitive and attractive manner, in order to deliver a user-friendly UI.

Right after the first brain-storming session, I started sketching. The initial sketches were rather generic and they were presenting only a high-level idea. But still they were a very good trigger for further discussions with our BAs and developers. The sketches were also a great reference point for upcoming UX sessions with all stakeholders engaged in the process.

Wireframes

A wireframe is a digital sketch – a low-fidelity design of a user interface. The idea behind a wireframe is to cover the most important functionalities and features of the application, but not focus on styling and final visual effects.

Our Business Analysts prepared a set of artefacts, which made the design work much quicker and simpler than it usually is – the content was all there and the requirements were very clear and easy to understand. Based on the information I received, I was able to come up with the first iteration of wireframes.

The requirements that I had to bear in mind whilst preparing the designs were:

  • combining three different views in one UI:
    • the dashboard with data visualisations for three commodity groups and all possible drilldowns (up to four levels deep)
    • the comparison view, where users would be able to select and compare indexes of commodities from diverse groups
    • the weights view with the hierarchy of all commodities displayed in a user-friendly way
  • displaying information related to three main commodity groups in a consistent way, which would allow users to access detailed data they are interested in
  • clear data visualisations presenting a lot of data in a way that supports data analysis
  • a light design with a nice colour palette to makes the UI look clean and spacious

In the team working on the Commodity Overview App, we are all used to working in agile methodology, so it was natural for us to follow the same process we would usually follow in a client project. That is why we reviewed the wireframes with the whole team several times, I gathered the feedback from our business analysts and dev lead, and then applied some changes to the designs. Once the wireframes were signed off by the team, I was able to start working on the visual design.

Visual design and Visual Prototyping

A visual design of a user interface is a high-fidelity design with the entire styling applied. Visual designs of a screen of an application show how exactly the app should look, with all details such as colours, fonts, sizes of different elements, etc.

Usually preparing high-fidelity designs based on wireframes is just the icing on the cake. The most important work is already done, all functionalities are clarified and all the designer has to do is to apply styles consistent with a brand book or style guidelines. It wasn’t much different in the case of Commodity Overview App. There were no limitations in terms of the styling, but as a GFT designer, I wanted to make sure that I was following GFT’s high level guidelines. The team agreed that using Material Design components was the way to go and it took just a couple of days to come up with the final version of the UI design.

Another very important thing for me was to have confidence in our developers – that they knew how the application should work and what the workflow was. With the design software I typically use, I prepared a simple visual prototype – a html website that allowed us to click through the main workflow. It was a perfect way to make sure we’re all on the same page and no further explanations would be needed.

UX Reviews and Support

When I handed over all high-fidelity designs to the dev team, I was able to change my role in the project to a more supportive mode. I was not working full time on design tasks anymore, but I went on to review the UI implemented by the dev team to check if it’s consistent with our assumptions and with the designs. After such a review, I often prepared a list of improvements or modifications to be made. During the implementation phase, I was able to conduct several review sessions that resulted in the final version of the UI. That’s also the typical way the UX designers work. If we follow that path, we will be confident that all our ideas are implemented the way we wanted them to work.

Process Visualisation

One of our main requirements for the Commodity Market Overview application was to present the delivery process we follow when working on a project. For me it meant more than just regular UX and UI design work as I was also supposed to prepare a visual representation of the process. And so I did but… it will be described in more detail in a future article. Stay tuned!

Part 1 – A Case Study by Damian Sosnowski
Part 2 – Business Analysis by Marcin Myszkowski
Part 3 – The UX Process by Małgorzata Barska
Part 4 – Architecture and Development by Damian Sosnowski

The team

Business Consulting

Joanna Aleksandrowicz Principal Business Analyst, Head of Business Consulting Job Family
Marcin Myszkowski Senior Business Analyst

User Experience and Design

Małgorzata Barska Principal Designer, Head of UX Practice

Architecture and Development

Damian Sosnowski Principal Architect, Head of Digital Job Family
Damian Bachórz JavaScript Developer
Michał Dzik JavaScript Developer

Marketing

Maciej Sopek Senior Content Marketing Specialist