Explore thousands of trading opportunities
all in one platform.
A UI Case Study of an "all-in-one" app that allows users to explore the world of online trading.
Overview
CCTrader, is a trading app that allows users to invest in international stock exchanges anywhere, anytime.
​
Carrying its prestigious “award-winning app” title, CCTrader offers direct market access intended for knowledgeable and experienced individuals taking their own investment decisions. As the Lead UI designer, the primary goal was to fine-tune the user interface experience of the app without altering the backbone of the code. Allow me to run you through the work process.
Client
CCTrader
Project
Product screens redesigns
Role
UI Design Lead
Tools Used
The Challenges
Outdated UI
By collaborating with the lead user experience designer, researcher and multiple users of the platform, we identified the pain-points and used that data as an opportunity to iterate the experience accordingly. This would give us the upper hand to fix what was necessary. In a highly agile market of rising stars within the trading app market, the user interface of CCTrader was looking and feeling outdated and needed a little bit of a refresher.
Technical Constraints
One of the key challenges I encountered during this project was working within the constraints of the existing CCTrader app codebase, which presented certain limitations. As a result, I was unable to fully redesign and restructure the UI as I had initially envisioned. However, this challenge provided an opportunity to develop creative solutions within the given framework. Below, I outline the approach taken to address these limitations effectively.
The Process
My Role
I was entrusted to lead the project, and freshen up the user interface. I worked closely with the user experience designer who had been working on the app ever since I joined the company, so working with him would be very fruitful to help (i) understand the product better and (ii) collaborate together to polish the app without wasting any unnecessary valuable time and designs that might not be needed. I was also in touch with developers to identify my restrictions and ask questions that would eventually lead me to pinpoint what I can change. This of course didn’t stop me from challenging the key players involved.
User Flows
Below are a couple examples of flows related to onboarding, logging in the app and opening the app as a first time user. Designing for the user experience began from sketching out a typical user journey based on the accomplishment of specific tasks within the app. Once the user journey had been established, we began to unpack the design flow for general and specific use cases.
Understanding the UI challenges
The data gathered from the focus groups suggested that the overall app design felt a little dated (for younger audiences) but wasn't a show stopper for serious investors. Certain screen layouts felt confusing and suggested that the experience be smoother and better in how the content is presented to users. This came out mainly in sections where users had to place new orders and the portfolio section. These sections felt a little overwhelming to some, especially when compared to competitor apps.
​
In addition to the new orders and portfolio screens, we also took a shot at challenging the dashboard screen, adding of funds screen, onboarding screen, and markets screens (new feature).
​
Below are a few examples of the app screens before the refresh.
Login
Dashboard
Add Funds
Portfolio
New Order
Wireframes
The low-fidelity wireframes were developed to help visualise a clear difference. This step was crucial as it gave us a glimpse of what was yet to become, before heading straight to the high-fidelity mockups. Simple prototypes were of great use in identifying components for framing the design system. It was also a great space for the team to give initial feedback before we stepped into concentrating on the main visual design.
At this stage, I would already start identifying a few of the components I would be needing and the variants, states and cases for some of them. These would include; buttons, fields, tabs and icons.
Add funds
Dashboard
Portfolio
New Order
Review Order
Place Order
User Interface & Experience
Following are design solutions developed and tested based on the data gathered from the focus groups
Solution 1
New Dashboard Features
By completely redesigning the dashboard, we have managed to introduce a design system that would be applied to other screens. A new look that enjoys consistent iconography, new button layouts, logo ticker icons, and improved overall padding.
Before
After
Solution 2
New Order Experience
From the focus group data, we gathered that the "new order" screen was the most "intimidating". Therefore we've created a system that guides the user step by step to placing an order by grouping the steps into pods. This turned out to be an "easier to follow" experience during the testing phase.
Auto-Balance Statements
The slider design allows
users to quickly and easily input the number of shares wishing to order.
Clear Order Breakdown
Users now have a transparent quick overview of their balance when placing an order.
Market News
The market news section is a great feature for users to get more insight before closing an order.
Solution 3
Organised Portfolio
Using simple aligning methods and tab functionality, we've developed an experience that clearly outlines and expresses the portfolio's value. All of the data is viewed as the user scrolls downwards rather than sideways.
Before
After
Solution 4
Markets & News
Designing a framework that provides investors a portal to market news is key to the behavior and decisions of their investments. We've solved that issue by designing a system that links market news through an API directly to the app.
News Tabs
News can be quickly filtered by the use of the tabs according to the interest.
News Categories
In addition, we've categorised news according to market industry and trends.
Key Takeaways
Challenge everything
The key factor throughout this exercise was to always challenge what seems to be out of one's control. Throughout this exercise, the team was constantly challenged due to the nature and restrictions of the code, but through clear understanding and continuous communication, we have stepped out of our comfort zone and delivered what was asked for in the focus groups.​
Better overall experience
A major win during the testing phase was that users enjoy the simplicity of the updated UI design and does not feel complicated and/or overwhelming. This was more evident with the younger audiences. The mature investor found that the market news section was very fruitful to their investing needs.
App of choice
It turned out that a substantial amount of users feel confident enough to use CCTrader as their app of choice for their investing needs. They've stated that the app serves a better purpose than competitor apps such as Degiro and Trading212.
