design process of coinbase exchange
TRANSCRIPT
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