Case Study:

Reshaping the UX of Quasar eFX

2017–2019 User experienceUX designer

In 2006, a team of Foreign Exchange specialists founded Aphelion and with their expertise in the forex industry they created Quasar eFX. The software revolutionised the ability for banks, investors and funds to trade currencies electronically on the global financial market.

By mid-2017, the usability and overall experience of the application was affected by an overload of features that in many cases were confusing and complicated to operate. The company was committed to offer an enhanced experience to Quasar eFX customers and become more attractive to prospects that were considering purchasing the product. In order to bring the product to a new level, it was my responsibility to take ownership of the application user experience and to modernise the graphical user interface of one of the most competitive electronic tools in the FX industry.

In order to comply with a non-disclosure agreement, I have omitted confidential information in this case study. The content presented is based on information available to the public and does not reveal any confidential procedures.

Overview of Quasar eFX after the redesign.

My role

I defined a UX Strategy and put a Design Process into practice. Through observation, research and interviews I identified problems and proposed solutions that enhanced the overall experience for our users. I brought awareness of the user perspective to team members and internal stakeholders. Between December 2017 and July 2018 I lead the redesign of a complex enterprise forex application. I handed off design specifications and guided developers with the purpose of implementing the product according to the newly defined guidelines.

By mid-2019, as a result of my contribution a new and modern user interface with improved usability and functionality was implemented and delivered to Aphelion's customers.

Quasar eFX application before and after the redesign.

Definition of the Problem

UX Design as a Teamwork

Introducing a design process into an organization starts with bringing team awareness about the commitment that implementing a UX strategy means. Since there was confusion about this topic, I presented an overview of UX design to internal stakeholders.

Elements of UX according to the framework by Jesse James Garrett.

I emphasized the difference between visual elements in an application, and the more abstract elements such as strategy, scope and structure. The point of these dicussions was to convey the fact that each team decision was affecting the user experience, and that establishing a successful UX was not solely the designer responsibility.

Validate Assumptions

I started analysing the current solution and evaluating it against its competitors. As a result, I came up with a collection of assumptions about our users profile, usability issues and problems that were breaking many of the UX conventions. The next step was to validate those assumptions and prioritise the product backlog taking UX in consideration.

Together with colleagues from the customer service department we recruited around 20 active users. During the process that lasted around 2 months, I met the participants in individual sessions and I discussed the general usage of the software and their overall experience. I was able to identify a series of user archetypes that would allow us to target specific solutions to each particular group.

Insight from our users unveiling common problems.

Satisfaction and importance ratings for a particular feature.

Insight from our users unveiling common problems.

Satisfaction and importance ratings for a particular feature.

Apart from unveiling positive and useful experiences, we were able to identify common problems, confusions and frustrations that our users were experiencing while using the software. This enabled us to validate or dismiss our initial assumptions, prioritising each topic with the right importance.

From Skeleton to Surface

The Design Process

Taking the backlog from the previous stage, the product team and I analysed and wrote requirements for each section of the application. Testing the interactions and the specific workflows with our users helped us to clarify the requirements and validate the solutions proposed.

Mock-ups featuring improvements.

Early in the process, I drew each UI element using Sketch. All the reusable components were included in a library document. Once I created new prototypes, I imported the required components from the library file. This setup allowed me to conveniently update instances of each element once the master component from the library was modified.

Symbols included in the Library document.

One important business requirement was the implementation of a refreshed and modern user interface. Below I am presenting the considerations and guidelines used for this project.

UI Guidelines

Since enterprise applications tend to have high density of content and lots of UI components, it was fundamental to keep good readability in elements of small size such as buttons, labels, etc. Furthermore, as a product for the financial market, it was essential to make the numbers and the rest of the data stand out effectively from the rest of the application.

Consistent width for digits.

Font with a consistent width for the digits.

For the general look I decided to go for a flat design, using slightly round borders and avoiding whenever possible border lines. The separation between elements was achieved instead using empty space and having a contrasted color division between different elements. The goal of this decision was to keep the application clear from distractions.

Detail of the application featuring round borders and separation using empty space and contrasted color sections.

Palette and Colour Schemes

Choosing the right color scheme is a key factor for the UX of an application, since it can influence the level of usability and the appealing factor of the digital product. I applied a grey palette to the main areas of the applications and I highlighted a few elements using accent colors. A feedback session uncovered that the grey scale felt muted in some cases, as if some areas were disabled. So I added a blue tint to the grey palette.

A blue tint was added to the grey palette.

The response was positive, the blue tint gave a more vivid tone and a dynamic contrast to the palette. The same session revealed that the accent colors introduced were allowing parts of the interface to stand out from the background, providing the right visual feedback to the users.

Responding to early user feedback, in addition to the default light theme, we decided to support a darker mode. In order to support both modes I had to take the following things in consideration.

Light and Dark modes side by side.

To ensure that the accent colors would stand out in both dark and light modes, I selected colors with enough saturation, but not too excessive so that they would look out of place. For each selected color I created a two-dimensional palette taking the hue as a starting point and merging towards white, grey and black.

Shades, tones and shadows for a particular accent color.

Tints, tones and shades for a particular hue.

This grid containing the tints, tones and shades allowed me to have a reference palette for every accent color and pick the one which suited each particular situation.

Content Accessibility

With a view to support content accessibility, two measures were taken regarding color. First, I checked the contrast ratio of the colors applied to text on specific background tones. Making the suitable modifications when the readability of the text was challenging and the contrast ratios were not within the range of the accessibility guidelines (WCAG). Secondly, with the help of a tool, I visualized colors as they are perceived by persons with various types of color blindness. Making sure that elements with opposing meaning were distinguishable even for users with color visual deficiency.

Contrast ratio checker.

How the original colors (above) are perceived by the most common type of color blindness (below).

Colour blindness checker.

Rebuilding an Enterprise Application

Design Handoff

In order to support the software engineers in their implementation journey, I documented detailed descriptions of the functional design. The specification document started by clarifying how the redesign was going to impact our users' experience, allowing the developers to broadly acknowledge the problem that we were aiming to solve.

Design Specifications.

These documents included sample screenshots and links to prototypes published to the Invision platform. Thanks to the tools provided by Invision, developers could review each interaction, precisely measure design elements and select colors from the UI assets, ultimately enabling the translation of the design into code.

Inspect Mode.

With the purpose of promoting and facilitating the quality of the design, I acted as a product manager. Twice a week, the developer team and I had follow-up sessions, where I resolved any questions or concerns the engineers may have encountered during the implementation. When the implementation of a particular feature meant a bigger effort than initially estimated, the design was adjusted allowing the project to move forward.

Release: Validation and Iteration

Between September 2018 and February 2019 the development team implemented the new visual design and a first set of improvements. By mid-2019, we started shipping the redesign to our customers.

After the release, however, the work was far from completed. It was essential to confirm that the functionality shipped met our users' expectations. The majority of our users stated in a survey a positive impact on the quality of the user experience, linked to the upgraded usability and functionality.

Due to technology constraints and its complexity, the implementation demonstrated to be more challenging than expected, but ultimately it was great to see my designs brought to life. I am extremely impressed and proud of the work done by the team.

The Challenges

Being responsible for the redesign of an enterprise application is complex and disruptive. For an even stronger reason when the software is a tool targeted for the financial technology sector the challenge is overwhelming (plenty of legacy functionality, security procedures and convoluted workflows).

Furthermore, so that I could start implementing the product's strategic plan, I had to receive a green light from Executives and Decision Makers. This was not always straightforward. Topics such as deciding which technology to use or allocating human resources were often the subject of discussion and most of the time meant a delay in the project. Changing the organization mindset regarding UX enabled me to properly introduce a user-centered strategic plan.

In the first stages of the project, one of the biggest challenges I had to overcome was the lack of a dedicated design team. Managers and other internal stakeholders were the only support I had in order to get the validation needed for each phase of the process. The way I faced this obstacle was getting in touch with the design community, discussing general concerns, not necessarily related with the product, and getting inspired by design meetups and events.

Ultimately, I became an advocate of our users. Knowing the product as the back of my hand, and fully understanding our users' perspective allowed me to inform the organization about our users' actual problems and empower me to work together with the team so that we could deliver meaningful solutions.