Bolt

Bolt Markets*
2021
Main Product Designer

I have worked on it project as Main Product Designer, from the first conversations with the client to the delivery of the project. All under the organization of an agency team.

My role has included product level decisions and design, wireframing, branding, UI design, handoff and support to the engineering team during the development phase.

Tool: Figma

Bolt markets app

Overview

Bolt's purpose is to make Canadian capital markets news more accessible and convenient. Bolt will enable users to easily stay-up-to-date with their favorite companies, see market performance, share their thoughts through discussion with other users, and see a curated feed of mainstream media coverage on the macro concepts that they find interesting.

Bolt users are individuals who are interested in keeping informed about the ever-changing landscape of Canadian capital markets. Investors, business news enthusiasts, traders.

The problem is that there’s no other app focused on Canadian Markets that aggregates all of this data in one place, nor do they have a modern interface.

The goal is to create one modern, beautiful, easy-to-navigate app.

Bolt markets UI Library

Blockframes

I work together with the product manager on a feature list to enumerate each of the functionalities that the product must have. Once we have this, I move on to work on the Blockframes.

Here I’ll define all views it should have, the content and the interactions of each one. This is not visual at all, I use a simple system of blocks and colors to differentiate navigation, actions, content, status, etc. This is an optimal way to test user flows and information architecture as well.

Bolt markets blockframes

Wireframing

After the work of the previous phase, it is now easy to work on a more realistic prototype, defining how I'm going to organize that information for the user.

I like to make high fidelity wireframes, sometimes I even use some color, like in this data graph. But that really depends on each project, I always try to understand as much as possible each product, the goals, the type of users, understanding the business is key to design well.

Bolt Markets Wireframes

UI Design

The first step to give the product an identity was to create a UI library. Select a color palette, a typography and from there, build the final look and feel for Bolt.

I knew I wanted a yellow color for primary, so I contrasted it with a dark blue background. The project font is Work Sans, a super flexible typeface with monospaced characters for numbers.

The final result is a modern, dark mode interface, with emphasis on graphs and data.

Bolt markets screens
Bolt Markets Screens
Next
Guide