Design process of Coinbase Exchange

Design process

Samo Drole | @samodrole

PRE DESIGN

When i started working on project Exchange, there was already functional backend and also some other elements which are needed for trading. So after our initial discussion about design i first started with research.

RESEARCH

Existing Exchanges at that time

User groups

Since we already knew what features and components we are going to use i wasn’t interested in that.

For this approach i used user examples. A user examples is a way to model, summarize research about specific user group. Each user example represents a significant portion of real users and helps designers to understand targeted audience. I create two personas which are key for our exchange.

EXISTINGEXCHANGES

How other exchanges use colors for different type of communications.

How they solve layout for displaying components and how they solve problems with different user flows/user experience ( e.g. too many dropdowns or complex navigations and How they display different message to users).

EXAMPLE USER #1

JohnOccupation:Professional trader and Technical Analyst

Demographics:Male, 35-45 years old, English as a first Language, lives in San Francisco

Behaviour:Trades with several exchanges, understands trading terminology , trades high volume positions.

Trading frequency Tools complexity Trading amount

NickOccupation:Engineer

Demographics:Male, 23-35 years old, English as a first Language, lives in San Antonio

Behaviour:Trades on one exchange, occasional day trader, reads trading blogs, passionate about bitcoin

Trading frequency Tools complexity Trading amount

EXAMPLE USER #2

GOALS

Easy to use

Full width layout (not acting as a standard web page)

Clean design

Interface needs to be easy to use (even if you are not an expert, you should know how to use the interface)

layout should be full width (not acting like a webpage with limited width and center orientated)

clean design, which means no extra ornaments or design elements where they are not needed (mostly data driven design)

WIREFRAMES

The next step was creating Early low-fidelity ideas using wireframes and start thinking about layout and different elements interaction.

During early wireframe process I always try to play with different ideas which are just guidelines for final design, where i usually made some changes and final decisions.

DESIGN

Based on goals the whole idea about design was simplicity and clean minimal design with 3 colors.

I started with light theme for whole layout using green and red for communication different buy sell informations. And during the process i changed quite a few typefaces.

DESIGN

Sidebar is visually separated from the main content. I tried to create an element that is important for users since we display balance and panel for buy/sell.

DESIGN

Main content is adaptable and scrollable based on content. I tried to use more space between elements for better overview.

UX TEST

Later on in December we launched our first internal version. At that point we had exchange with fixed sidebar on the left and scrollable main content on right ass you saw in design.

While i wanted that user would always have easy acces to buy/sell panel, this didn’t work for all panels in the main content, and i wasn’t thinking that it would be a problem when i design it.

*early work in progres HTML file

FINALDESIGN

Based on early tests i decided to make changes in layout and trying to improve user experience on some other panels.

Better layout, dark theme, removed some space i had it before, used smaller font size and made the whole interface more compact.

CURRENTDESIGN

layout is fully responsive based on user display size, with no scrolling of a whole interface but you can scroll data in panel itself.

THANK YOU

Samo Drole | @samodrole