fxTrade Light Mode

 
fxtradelightmode.png
 

fxTrade Light Mode


UX DESIGN - UI DESIGN - USABILITY TESTING


SUMMARY

Project Background

fxTrade Light Mode began as “side hustle” project that grew into a fully functioning feature that now exists on both the Android and iOS app. Working closely with the mobile team we were able to create a feature that allows users to toggle between a light and dark UI — giving users the ability to adjust the theme of the app to best suit their environment. By adding a new colour theme to the app, it allows users to have a more personalized trading experience.

Role:

UX/UI Designer

Tools:

Illustrator, Sketch, InVision

Date:

May 2018


BACKGROUND

Goals and Objectives

The goal of this project was to transform the apps UI from night to day by giving it a brighter look and feel. Traditionally, forex trading platforms follow a dark colour theme. fxTrade mobile much like other trading applications has only ever had a dark UI. However, with new technology emerging trading applications are beginning to have more than just one theme.

fxTrade Dark Mode:
 

BACKGROUND

My Role and Responsibilities
  • Create a new UI colour theme with the help of the marketing team. This process includes designing high fidelity mockups and interactive prototypes.

  • Meet weekly with fellow UX Designers to showcase different design concepts and gather feedback.

  • Meet weekly with members of the iOS and Android team to plan how each team will be executing the colour refactoring for Light Mode.

  • Create colour convention guidelines for each team and help map elements within the app to specific colours.

  • Conduct in-house user testing for both device types and analysis/iterate on the feedback users give.


DESIGN QUESTION

“How might we present users with the ability to choose from different themes?”


Design Process

Style Guide and Inspiration
 

Style Guide

During the process of creating Light Mode, I had the opportunity to work with the marketing team. Together we were able to create a minimalist colour palette that would help bring consistency to OANDA’s trading platforms.

View InVision DSM

 

Design Inspiration

While working to create a new colour palette I look at inspirations from OANDA competitors, Dribbble, Behance, and other financial apps. I created an InVision mood board to collect and display my research. Creating the mood board allowed the team and me to have a better understanding of what colours work well together.

View InVision Moodboard


Design Process

Design Iterations

While I was mapping the new Light Mode colours to the current UI of fxTrade, I went through multiple design iterations. I found that transitioning an app from a dark UI to a light UI can be very challenging. Currently, on fxTrade Dark Mode blue is used as a primary call to action colour for essential buttons such as buy/sell. My first design used way too much blue! I had to rethink how I wanted to use that specific blue more intuitively.

In my second attempt, I tried to create consistency between the header and the nav. However, after sharing these two designs with the mobile and UX team, we all agreed that there was too much contrast between the nav and the rates list.

 
 
 

User Testing

Prototyping and Validating

iOS Prototype

I conducted a total of 5 user interviews on the iOS version of fxTrade Light Mode. I interviewed individuals that had experience trading FX and were avid users of the fxTrade mobile platform.

The user testing plan is broken down into eight sections that touch on specific points with the interface. I hoped to gather insight into how and why users may prefer a dark interface vs. a light one.

Android Prototype

I conducted a total of 3 user interview on the Android version of fxTrade Light Mode. Finding Android users were less likely than iOS.

The user testing plan for Android specifically touched on different aspects than the iOS one. Changing to Androids navigation was implemented; previously, the app’s navigation was at the top below the header. The decision to move the navigation to the bottom was a collaborative decision amongst the design, product, and development team.


User Testing

Results and Feedback

First Impressions

  • For Light Mode, it would be nice to have the new OANDA branding colours in the app icon (blue with the symbol as white).

  • Light Mode is ideal for trading during the day. It ties nicely into a more personalized trading experience.

  • Having different themes is a common feature in many of OANDA’s competitors. By giving traders the option to switch themes, it makes the app align with industry standards.

  • It’s great to give traders the option to choose a theme. It’s excellent how Light Mode aligns more with the OANDA Web Platform.

  • Found Light Mode to be more inviting and cleaner. Would use the Light Mode rather than the Dark Mode.


New Colour Picker

  • Liked how the new colour picker was ordered in columns by light/medium/dark.

  • The new colour picker’s interaction (tapping) is more intuitive than having the long press to switch colours.

  • Would want to have a customizable colour picker rather than preset swatches.


Android Navigation Change

  • Having the nav at the bottom feels more natural (always found it strange that it was at the top).

  • Prefers having the nav at the bottom rather than the top.

  • Would be nice to customize the nav and have the ability to add/remove features from the chart tools/more tab.

 

Mockups

Final UI Designs
 

Conclusion

Reflection

Collaboration

Creating fxTrade Light Mode was such a fantastic opportunity. It was the first large project that I got to play the role of both a UX Designer and also a Project Manager. I had the freedom to experiment not only in the design of the interface but also how I work collaboratively with the mobile development team.

Learning Opportunity

While sitting with the developers on both the Android and iOS team, I was able to learn how they colour map each component with the app. Working with the developers was a great learning experience because I was able to take their XML or Swift/Objective-C style sheets and create a colour conventions document based on their mappings.

Overcoming Doubt

I had some doubt throughout this project that maybe OANDA clients wouldn’t want a Light Mode. However, I overcame that doubtfulness by understanding that Light Mode wasn't taking away any features that the client would use on a daily bases. What we were doing was giving them the option to have a more personalized trading experience by offering both light and dark mode.