In this case study, I will try to capture my working process and how I did the redesign of Qume Exchange. I hope you can learn one or two things after reading this, and you can also help me find a few problems in my workflow.

The Challenge

The task was to deliver a modern, clean and professional-looking trade platform. And the big challenge is the fitting elements in one screen without scrolling. In this app, there is a lot of elements like order book, buy/sell section, depth chart, candle bar chart, and a few others. So, I had to find a way to fit everything on one page and also I had to think about the clean and professional looks.

Less frustration & cool design process

The deadline for the project was so tight that sometimes I had to spend more than 55+ hours a week. So, I made some additional rules for the project to complete it successfully. These processes helped me a lot.

1. In every 72 hours, I wanted to talk with the Qume team for more collaboration.

2. I noted everything in my notebook while we were in the meeting.

3. If any ideas appear in my head while we were talking in the meeting, I tried to design the rough sketches in the meeting time and showed them instantly and tried to include their inner thoughts within my idea. It helps me to spend quality time on design and everything was neat and clean when sharing among the team.

The Qume Exchange Background

Qume is the world’s fastest Crypto Derivatives Exchange platform. They are 100x faster than the leading competitor with the ability to manage 100000 TPS per market while maintaining stable APIs. And they are globally distributed enterprises with offices and personnel in New York City, San Francisco, Hong Kong, Singapore, Bahrain, London, & São Paulo. So it was a great experience for me.

Research🧐

In this project, they had their existing UX, and the UX was identical except for a few tweaks. Following discussion with the Qume team, I did some research based on their user reactions and also analyzed some other competitors. The major changes were on the account pages and some other inner pages. Another notable change was on the trading platform, which was mostly on the user interface.

Understanding the Problem

As the task was redesigning the web application which will be based on crypto trading, the first thing that goes on my head was — the users will spend considerable time on this platform. For this reason, my first motive was finding a color that would be eye-friendly that will be cool, smooth and draw the eyes of the users. So that the user can spend as much time as possible on the screens. On the other hand, I had to use a lot of text content in the application. So, the second thing that is necessary on the application was the contrast that is adjusting everything on the screen. It was quite challenging for me.

What methods did I use?

As I said, there was a lot of elements and object on the application to fit in. So, I had to find out a way — First I tried to use the bootstrap grid then I realize it won’t work. Then I tried to study the golden ratio and experimenting to find out how to work with it on the web. After a few hours of research, I figured out the process and techniques. To make it clear as I get — the golden ratio is called the Golden Canon Grid on the web. We need to create a grid-based layout according to our needs. After pointing out all the elements and resources for this project, I started working with the golden canon gird. Thus at first, I prepared the grid in my notebook to figure it out if it works or not.

Solution for an account and inner pages.

First I started with the account page. Here needs to work not only with the UI but also on the UX. When I got the project, it had only one simple page for maintaining the account page. All you can do — change your password and add your name, that’s all. But it’s not enough, right? Yeah, even a simple blog website provides more functionalities here.

For this reason, I tried to design a complete account page with KYC verification, API keys, Trade history, Order history, Affiliate, Deposit, Withdraw and the Balance profile. The UX part was modified by me with the collaboration of their team. We combined the concept strictly to get the best result. After finalizing the UX, it looked something like this —

As we finalized the UX part, we started to play with the UI. First of all, our time frame was too short. So, it was necessary to complete the whole project. Hopefully, with the hard work, it took seven days to complete all pages including receiving the feedback. You will be surprised that in the account page, we designed a total of 19 pages. You can take a look at all the designs from here.

Started the most vital page: Trade page

After finishing the account and other inner pages, we started the main and the most important page that was the “Trade Page”. Maybe you have a question in your mind. “If the Trade Page is the most vital page in your project then why you started this after completing all 19 pages?” Yes. It is very essential when you are working on a complex project. Because when you have a tight deadline, and if you finish the easiest part of the project first then you can completely focus on the tricky page without thinking about the rest of the task.

Before we started the Trade Page we set a deadline. And the deadline was 15 to 18 days. As I said, for the Trade page we choose the Golden Cannon Grid — after the notebook sketch, I tried to create the grid in the sketch application and showed it to the CTO and Head Of The Product of my project. Btw, I worked directly under CTO and Head Of Product. So, it was quite easy for me to understand what they are looking for. So after the meeting, we decided to go with this Grid technique.

Discussing with the CTO and Head Of The Product of my team, I worked with the trade page for more than 3 days and came with the first concept. My teammate liked it. But still, we find out some issues that were necessary to fix. We arrange a meeting with CTO and Head Of The Product that lasts approximately two hours. We find out the exact issues with the concept and how we may get the solution.

First Concept

Again, I started to work following the feedback. I worked day and night for another two days and came into with nearly the final concept. You can take a look at the design from here.

Updated

After all, we did another meeting with the whole team and find out more issues. Doing deep research, we find out that there are some problems with the color. The color is good and trendy enough but it needs to be more eye-friendly.

Furthermore, I started exploring with new colors that were the dark UI which is good for reading, trendy look and eye-friendly. After another two days of research and practices, I came up with another new design with fresh color adjusting with a few changes.

But it was still not eye-friendly.

After researching another night, I came up with a good color-combination which was attractive, modern, reading and eye-friendly as well as creative.

We liked this color

Still facing some problems.

With a lot of time, research and practice we came up with something good but still, something was missing. But what is missing? I was confused? So we call another meeting to find out the hidden problems. Following the discussion, we decided to remove the Line Flat Style. At the same time, we added Gutter between different elements. But adding the Gutter, we noticed — again there were some major color issues.It needs to work with the color again which will be suitable enough. Yeah, after another try we found something exceptional. The entire Qume team liked it very much. They were so happy with the final design which indicates that it will add some bonus in my remuneration 😉

Final design

Is my work done here… Surprisingly No!

No, man! The work was not finished yet. They really liked my work and offer me to redesign the landing page for the same platform. In general, I was over admired too. Anyway, I was happy that I made someone happy. The requirement was very simple. They wanted something very natural and clean. So, after listening to their requirements carefully, I spend another 2–3 days and did something like this. They choose the idea but still necessary to solve some other silly issues. Finally, within a day, thus, we finished the whole project.

Some bonus work

When I was hired their requirement was simple. A complete redesign of the system and nothing else. But, when I started my work I figure out on the first day — actually it’s a big project. I need to do something exceptional.

For this reason, I designed a design system for the Qume Exchange. The system helped me a lot especially when I explore with fonts, and colors. If I had to change every element one by one, I could have died. 😂

So to make the process easier, I build the design system for the Qume Team. But why am I telling it as bonus work? I gave it to the team for free after when I hand-off the design files.

Hand-off time

The process of Handing-off the design is very important. You need to provide the design to your client so that the developer can work smoothly. For hand-off, first, we started using Invision impact.

But the developers faced some problems in invision impact. (Although our design collaboration was super cool with Invision). Thinking about the developers, I used Zeplin as a hand-off tool. And they really liked it.

What does Qume Exchange think About me?

“Eftakher was an extremely talented and meticulous designer who consistently delivered high-quality results on very tight timelines. He was able to get up to speed and learn our product quickly and was always responsive and adaptable throughout the design process. I would recommend Eftakher’s work to anyone looking for efficient, professional design work.”

Spencer Kim, Co-founder & Head of product at Qume Exchange.

Estimate Design Timeline

• Meeting — 20+ Hours

• Planning — 48+ Hours

• Research — 40+ Hours

• Design — 50+ Hours

• Final Touch — 20+ Hours

Total Time — 180+ Hours