Why am I hired?
SGX hired me as the Lead UX/UI designer
- To create foundational documents
- Redesign the platform’s UI to address usability issues.
- White-label for different clients.
How Long did I take?
Jan 2023 - current
Phase 1: Foundational Documentation
Phase 2: Redesign
Phase 3: Whitelabelling
Who were my target users?
Traders, developers, product owners, project managers, clients.
What was the problem?
The lack of design and documentation led to navigation problems, bugs, and confusion for users, developers, and stakeholders who needed clear guidance.
The platform had many UX problems.
Clients wanted to customize the platform for their brand, but this was hard without a solid design foundation.
What was the goal?
- Improve Maxxweb by rectifying UX issues
- Make MaxxWeb easier to use, more visually consistent
- White-label for clients to fit their brand.
Dark Mode
Project Background:
MaxxWeb was originally built without any design documentation or Figma files. Without these resources, users, developers, and stakeholders didn’t have anything to refer back to if they needed clarity on features or flows.
My task was to redesign the UI to give it a modern look and improve the user experience by solving these issues.
MaxxWeb - Redesign
MaxxWeb is a forex trading platform owned by SGX that allows traders to place & manage orders.
It’s a web-based trading platform that works on any browser without installation.
The platform is mostly for white-labeling, so clients can customize it to fit their brand, making MaxxWeb flexible.
Process Followed
I used both User Centered Design (UCD) and Design Thinking.
UCD helped me focus on what traders need & fix UX problems, while Design Thinking allowed me to solve issues like navigation and branding.
Empathise & Research
UX Audit & Inspcetion
What I did
Reviewed the MaxxWeb UI to find design issues and areas for improvement
Checked the design against best UX practices
used the inspection mode on the web to inspect the styles of every element on the interface
What I Got (Sample)
Input fields had missing error messages
Tooltips were missing for certain elements
Inconsistent styles(colors & spacing) across the themes
Tabs didn’t have active states
Pods in different sizes - led to a cluttered layout
Redundant animations made pods move & leading to accidental clicks
Elements I inspected on web were inconsistent
Usability Testing
What I did
I conducted testing with real traders observing how they performed key tasks on MaxxWeb
Took notes on areas where users faced difficulties.
Gathered feedback on the overall usability
What I Got (Sample)
The simple order window panel had unnecessary white space when dragged & had no drag indicator.
Missing tooltips confused new users
Overlapping Elements led to interaction issues
The pod moved unexpectedly due to animations, which led to accidental clicks
User Interviews & Survey
What I did
Reviewed the MaxxWeb UI to find design issues and areas for improvement
I checked the design against best UX practices.
What I Got (Sample)
Input fields had missing error messages
New users wanted to see tooltips for places where they were not clear/used to
Users did not like the movement of the pods
Traders wanted the active states for tabs
Defining problems & Documenting needs
After conducting a UX audit, usability testing, user interviews & surveys,
I defined the key user pain points and documented solutions to address them.
Sample UX problems identified on the landing page
Navigation and Interaction
- No active tab highlighted that made vigation confusing
- Simple Order window blocked other parts and left extra space
- Overlapping elements due to tight spacing
- Pods moved unexpectedly with different sizes and animations
Visual style Consistency
- Colors were used inconsistently across the interface
- Spacings between elements & components were inconsistent
- The footer didn’t stay fixed, disrupting access
Validations and Guidance
- Missing error messages for incorrect inputs
- No tooltips to explain fields and features
Sample Pods with UX problems
Ideate & Develop Solutions
Brainstorm Ideas
Discussed ideas to solve key UX issues after sharing user feedback with traders, product owners, and developers. Using a whiteboard, we sketched and prioritized solutions to implement in the design phase.
Sketch Solution
Started with hand drawn sketches based on prioritized ideas from the brainstorm. Shared and refined these with traders for feedback, then finalized with the team to address all user pain points. Took photos of the final sketches as references for Lo-Fi wireframes.
Sample sketches done in the initial stage
Information Architecture
Created site maps, user flows, and task flows to organize the platform and make navigation easier for people to understand the application. These helped map out how users move through the platform and perform tasks. This setup provided a solid foundation for the wireframes and guided the entire redesign.
Site Map
Developed a site map to visualize the entire structure of MaxxWeb
User & Task Flows
Collaborated with product owners to understand the workflow.
Below are two sample task flows representing the most common tasks performed by traders for logging into Maxxwe, placing and managing orders
Login flow to Maxxweb
Placing an orders
Navigation and Interaction
Highlight Active Tab: Added highlights to clarify navigation.
Simple Order Window: Redesigned as a popup to prevent blocking.
Spacing: Increased spacing to reduce overlap.
Pod Stability: Standardized sizes and removed animations for stability.
Visual and Color Consistency
Consistent Colors: Applied a unified color scheme.
Sticky Footer: Made footer fixed for easy access.
Validations and Guidance
Error Messages: Added messages for incorrect inputs.
Tooltips: Introduced tooltips for guidance on features and fields.
Develop & Design
Lo-Fi Wireframes
Created Lo-Fi wireframes in Figma based on the sketches to form the layout and flow. Shared with traders for feedback and adjusted as needed. Confirmed with developers for technical feasibility.
Sample Lo-Fi wireframe of Dashboard
Sample Lo-Fi wireframe of Pod variations
Sample Hi-Fi wireframe Dashboard
Hi-Fi Wireframes
Created light & dark themed Hi-fi wireframes by applying styles and components to the Lo-Fi wireframes. Incorporated colors, typography, spacing & elements like icons. This created a visually consistent design aligned with MaxxWeb's brand.
Sample Hi-Fi wireframe of Pod variations
Styles & design system
Style Guide
Visual Guidelines - Set colors, typography, spacing, and icons for different themes
Design System - Created reusable components & variables
Themes - Used variables in Figma to create Themes and white-label client branding colors
Theme variable mapping
Test & Results
The entire application UI was tested with real traders, and the design was iterated based on their feedback, accessibility checks, and usability improvements. This process ensured the interface was user-friendly, efficient, and met traders' real needs.
Samples of a light version other screens of Maxxweb
White-labelled versions for clients
MaxxWeb is currently white-labeled for various clients, customized to meet their branding requirements. Certain UI features are enabled or disabled based on client preferences.
White labeled Maxxweb for Mashreq bank
White labeled Maxxweb for First Abu Dhabi Bank (FAB)
White labeled Maxxweb for Emirates National Bank of Dubai (ENBD)
White labeled Maxxweb for Emirates Islamic Bank (EIB) - subsidiary of ENBD
Challenges & Learnings
🔴 Challenges faced
- Lack of design documentation made me work on everything from scratch
- Delayed user interviews with overseas clients due to differences in time zones
- White-labelling with client’s preferences caused readability and accessibility issues - had to explain to them about the design choices
🟢 Learnings
- Setting up a clear design system early on saved time and ensured consistency across white-labeled versions.
- Designing a mobile platform helped me improve my design skills
- Regular feedback sessions with stakeholders helped align the design with client expectations