fxTrade Mobile - Login Redesign

 
login.png
 

fxTrade Login Redesign


UX DESIGN - USER RESEARCH - UI DESIGN


Overview

Project Background

During the process of creating designs for the fxTrade Light Mode project, there was a need for a new login screen. The last update for the app’s login screen was in 2014 for iOS and early 2016 for Android. fxTrade Light Mode provided an opportunity to redesign the login screen that was adaptable for both light and dark mode.

While creating the design for the new login screen, I worked closely with the developers and participated in some paired programming. This made it easier for design handoff of assets and following the style guide. While creating the new login designs my team and I also helped introduce InVision Inspect to the mobile team during this project. The team found this to be a great tool and helped the implementation of the login screen much more straightforward.

Role:

UX/UI Designer

Tools:

Sketch, Craft, InVision

Date:

May 2018


Background

fxTrade's Old Login Screens

iOS and Android have two very different login screens that have not been updated in many years. Both login screens had many inconsistencies beyond just the UI design. The use of copy and labelling of buttons were different between both platforms. The Android login screen included a feature that iOS did not such as ‘Remember Password.’ On Android, a general Login button was used rather than on iOS which has either ‘Log into Practice’ or ‘Log into Trade’ depending on the type of account.


Design Process

Style Guide

During the process of developing fxTrade Light Mode, a new colour palette was built and added to mobile platforms. When creating the design for the new login screen I wanted to incorporate the new colours to have a better transition between light and dark mode.

Colours.png
font.png
 

Design Process

Design Iterations

When I was creating the new fxTrade login screen, I went through a few different design iterations. This process was quite challenging for me. I found myself trying to change the colours of the existing screen and not exploring new layouts. Since I was primarily using colours from the light mode theme, I kept designing the login with a very bright/white style.

I sat down with the rest of the UX team, and we brainstormed different styles and idea that could help make the login screen work for both light and dark mode. Within my design iterations, I not only explored redesigning the login, but I was also brainstorming ideas of how to show users new features within the app.

 
 

Design Process

Final UI Designs