Top Trader App

Client: Top Traders
Focus: To create a mobile app to assist Foreign Exchange ("Forex") traders to improve their performance by providing easy-to-digest and in-depth analytics, educational resources, and trading competition opportunities.
Time frame : 2 weeks
Deliverable : hi-fidelity prototype
Team Members: Jenika Ashely, Taiwo Akintayo, and myself
Tool : Figma

My Role


I faced many roadblocks and head-scratchers while working on this project. To start, I will take you through THE biggest challenge.

CHALLENGE : How do we display large amount of content and various features on a single page while maintaining functionality and ease-of-use for the user?

How did we overcome it?

Horizontal Scroll

  • Saves vertical space
  • Provides users with all the metrics they need in an organized and interactive fashion
  • Content cutoff indicates to the user that they can scroll left and right


  • Avoid the need for users to move between pages creating a seamless experience
  • Maintains the view of the screen allowing users to focus only the updated content

Interactive Information

  • Information on the graph, definitions, and tips updates based on the metrics applied
  • Enables users to analyze their equity curve based on each individual metric
  • Enables users to learn about Forex terminology and ways to improve

Drop Down

Towards the end of the project, the client informed us that users can have more than one account.

  • Users can easily change the brokerage account they want to look at without going back and forth

Freeze Pane

  • Allows users to see the column labels when horizontally scrolling is incorporated


CHALLENGE 1 : Overcoming the expectation of " Just making it pretty" and misconceptions of UX design and the design process.

How did we overcome it?

We explain what we can do for the client as a UX Designer and illustrate the design process using the Double Diamond during our first kickoff meeting.

We provided our client estimated time frame for 3 major milestones to update them with what we’ve been working on and why we performed each task. The milestone meetings also gave the client an opportunity to give us feedbacks.

  • After User Research
  • After Ideation and Wireframes
  • Mockup Deliverable

We also emphasized on the value of user research and why we do it before we dived into the research phase following our meeting.

In addition, we invited the clients to observe two contextual inquiry sessions .

CHALLENGE 2 : We didn't know a thing about Forex Trading prior to this.

How did we overcome it?

Secondary Research

Each of us spent an afternoon familiarizing ourselves on the Forex Trading. I performed the research activities including, but not limited to, opening countless tabs of articles I found on Google.

At one point, I found myself binge watching YouTube videos of “A Day in the Life of Forex Traders”.

Due to our time constraint, I suggested that we limited ourselves to one afternoon of research to prevent us from spiraling into the rabbit hole of analysis paralysis.

User Research

To understand the needs and motivations of Forex Traders, we conduct in-depth phone interviews with 4 interviewees provided by our client.

We synthesize the large amount of data we gathered from our user interviews to key insights

What are the sticky notes saying

Essentially, users want improve their trading skills and have more confidence in their trade through learning.

Google Survey

click here to access survey result

In addition, we created a Google Survey to understand general behavior of Forex Trader for the clients to send out to their resources.

The Results

CHALLENGE 3 : The MVP provided by our client was confusing to users.

How did we overcome it?

Contextual Inquiries

I started the process by determining where users might run into issues when using the first MVP provided by the client. We conducted contextual inquires with 4 participants. To keep our client involved and supportive of our process, we invited the Top Trader team to observe 2 of the contextual inquiries.

The task is to link their brokerage account to the app.

One participant completed the task without knowing that he did...

The insights we gathered from the contextual inquiry session was pivotal to our project. It gave us a better idea of how to redesign the app and mitigate any issue the users may face while using the app.

What are the main points?

User Flow

Our main focus is to establish a logical and intuitive flow for the app based on what we found in our contextual inquiries. The user flow is created by thinking how a user would go through the app to track their performance activity, search for learning materials, and connect with the community.

Top Trader User Flows

CHALLENGE 4 : We experienced scope creep and were unclear of the client's main priority and target audiences for the app.

How did we overcome it?

Why? Why? Why? Why? But why?...

scope creep

We asked questions to understand the whys of each feature and maintained constant communication with our client. Our understanding of the main goal and target audience for the app was reestablished after each client meeting.

1) After Kick Off Meeting : Our client wants an app that helps experience Forex Traders to track their performance.

2) After Second Meeting : Our client wants an app to track performance, motivate, and improve trader's performance for both experienced and new Forex traders.

3) After Third Meeting : In addition to what we already established, the client shared that the app's main function is Forex trading competition. Users must be able to track more than one trading account.

Our Emotions

Due to the nature of a 2 weeks project, we continue the design process based on our understanding after the second meeting and developed our problem/solution statement and JTBDs.

Jobs-To-Be-Done (JTBD)

The two Job-to-be-done to represent the two TopTrader’s target audiences, new traders and experienced traders.  Thus, each of the JTBD represents the pain points and the needs of the two user groups.

Learning how to say "No"...

We were able to implement some of the request our client wanted after the third meeting, including tracking more than one trading account and incorporating trading competition throughout the app.

However, we had to say "no" to making additional screens for trading competition due to the time constraint. We ensure the client that there are always opportunities to iterate further going forward.

CHALLENGE 5 : We had lack of users, more specifically Forex Traders, to test over our wireframes and mockups.

How did we overcome it?

Our plan was to go to the office of Top Traders and perform user testings with the Forex traders there. Unfortunately, that was not an option. Instead, our three main Top Trader contacts offered to visit us and participate in user testings.

Moment of Truth: Does it work...?

We asked the users to...

  • You are a new user and want to link your brokerage account to the App.
  • You want to explore the portfolio performance analytics.
  • You really enjoyed the app and want to upgrade to pro.
  • You want to find Forex video contents.
  • You want to reach out to a trader on the Leaderboard.

1st Iteration - User

Overall Changes
  • More vertical space
  • Increase font size

"Learn" icon was not intuitive

We forgot "Forgot password"

Shading was emphasizing the wrong info



Next Steps

  • Perform more user testings on the mockup and iterate based on user feedback.
  • Go through the design process for additional features requested by the clients.
  • Make changes based on feedback from developers.
  • Simplify the process for Brokerage Privacy Setting.

What could I have done differently?

This project has been a huge learning process for me. It was my first time adding a real client to the my UX mix. I got a taste of what it's like to work between the needs of users and the business needs and as you may have noticed at this point, we faced many obstacles during this process. Now that I a tad bit wise, these are a couple of things that I would do differently going forward.

  • We were able to establish trust with your client as we worked through the project. However, I think it is important for a new client, especially one that is unfamiliar with UX Design, to establish credibility and gain client's trust in the very beginning of the process. This could be done by briefly showing my client some of my previous works.
  • Show example of UX terminologies and the design process. Although we actively communicated to our client, we could do better with slowing down and explaining the concepts further by incorporating artifacts and examples.