THE WHAT

THE WHY

THE HOW

For this project I’ve been tasked to create a design system including: style guide, UI components, photography, iconography, typography colours, icons and guiding princples for HelloStake investing platform.

At the time of making, Stake was a fast growing platform that allows its users to invest in the stock market via their app available on both mobile and desktop. As the platform was growing and competing with other investment brokers like Hatch, Sharesies or Tiger investing in Australia, the company was rapidly evolving it’s UI and kept rolling out new functions. With the growing number of assets came growing need for for a design system giving designers and developers guideline and framework to build making changes and improvements to its digital products.

As there already have been publicly available resources, the direction for this project was quickly set by opening Developer Tools in my browser and analysing each individual element, to either replicated it or give it a form and correctly documenting it. In terms of organisation, I have compared different design systems open to public to get ideas of which structure will be the suitable for this particular piece of work.

Introduction

Stake is an online trading platform that connects Wall Street with investors from Australia and New Zealand. What sets Stake apart from other trading platform is the clean minimalistic user interface, mobile aplication and in-depth financial analysis.

Outside of the mobile application, Stake has other content channels (web platform, marketing page hellostake.com/nz and social media). The marketing page is linked to the Stake web platform and in most cases serves as an entry point for users visiting the web platform behind the paywall. The purpose of the marketing page is an advertisement of Stake trading services, overview of pricing plans, blog, careers page, technical support and login (paywall).  Because investors’ money is important, Stake offers a clean modern look that enables maximum user experience on both web based platform and mobile application. Keeping the platform’s interface transparent with easy access adds confidence to new and experienced investors, who can track their trades and market movements in real-time.  

In this design system I will guide you through the landing / marketing page and the web platform. Viewports in some sections will also include sizing for a mobile application. Stake offers standard trading services and basic analysis with a standard free account or additional premium analysis and data as a part of Stake Black paid membership. In this design system the two memberships won’t be differentiated.  

Guiding Principles

Stake understands the user’s perspective. With clear virtual language, Stake is transparent and accesible to all users. In the world of trading there is very little to no room for uncertainty, which is the reason why Stake offers an easy access and modern, minimalistic interface that makes trading easy for everyone.  

Transparency: White, black, red and green are colours that make clear statement. Stake aims to make a clear statement in digital world and promote it on its platforms. It should take only a fragment of a second to know what is happening with users’ investments and what their reaction should be. Stake clearly distinguishes good from bad and makes it easy to understand for all its customers.

Cleanlines: Stake designs a clean experience for its users who’s focus is aimed primarily on the subject of learning about the world of trading and learning how to complete trades. The most important goal for the development team is to eliminate all disruptions by delivering clean and elegant system.

Simplicity: Stake’s UI is minimalistic and purposeful. Each component, line and piece of information has a purpose that helps its users to make the right decisions. Appropriate information architechture and spacing are some of the most important attributes contributing to the simplicity of Stake website.

Marketing: Primarily done through the marketing page and social media. Content as articles and updates on stock market movements are being shared to wider audience without having to sign up. New content, updates and advertising is shared on Instagram, Facebook and Twitter

Iconography

Iconography  Visual representation of certain processes and actions is described better with icons than text. One small icon could replace a complex description of often very straightforward process. The aim of iconography within Stake’s UI is to guide user through processes without wasting time on trying to figure out what each icon represents. It needs to be taken into consideration that the platform visitors could be an experienced investor, an investor new to trading or a user who have not completed a single trade in their life. Every user should no matter of their trading experience know in a fragment of a second what each icon means and what context it creates within the website. Use of icons is identical on the marketing https://hellostake.com/nz/ to the web platform with only difference of icons being more tied to brand advertising.  

STYLE

Icons are at the forefront of Stake’s visual communication and because of that there is no better way to highlight Stake’s values than with a distinctive clean style. All icons should be minimalistic and simple. Whether it is black on white or white on black all icons should be clearly visible with appropriate contrast above 4.5:1 ratio to ensure proper accesibility. For the mobile viewport icons are refined in more playful way with a comic-feel to them.

USAGE

The way how individual icons are used on the website could be differenciated into two groups based on their purpose. The visual side of icons does not change within each group, however their size could change based on their placement within the page.   A) Icons in Fig.3 are functional icons that propt action. In this case icons redirect users to a different page and are often isolated. B) Icons in Fig.4 are only descriptive / illustrational. They are often used with additional information to give users a nicer experience. 

sizing

Icon sizing is based purely on the placement of each individual icon. There is no specific directory or guidence for creating icons as long as they match requirements mentioned above. With the smallest icon size of 10 x 11 pixels (fig.5) and biggest of 18 x 32 pixels (fig.6) it is expected that placing will be appropriate to a website’s context and won’t disturb the information architecture on any page. There is no padding, border or margin applied to any of the icons. In terms of the sizing for a mobile viewport icons still do not have a united sizing guide and prescribed padding, border or margin as long as they fit into an information architecture and do not disturb other content on the page (Fig.2).

DESKTOP

MOBILE

Colours

Primary colours

The Primary colours of Stake’s website have a strong purpose within the overall system and branding. All four colours describe data in a different way that is easy to understand. Eerie Black is the most frequently used primary colour and it ensures the high accesibility. Turquoise Green and CG Red indicates rising or declining values. Green means that value of the the individual stock is increasing and red means that it is decreasing. This also applies to value of an undividual portfolio and overall market value. The colours from a marketing page are listed at the bottom of each section if they differ from the rest of the colours used across the platform.

Background colour & contrast

Background colours are light and the contrast varies between 2.59:1 and 21:1 where majority of the user interface is above 5.74:1 contrast ratio, which ensures clear and distinctive visibility for accesibility purposes. Use of background colours differ based on their placement. Purpose of background colours could be divided into 3 categories based on their usage:   1) To highlight the placement of the cursor 2) To differenciate different sections of the page 3) To increase transparency of various data

text colour

Like with primary colours, text colours usage varies based on information they carry across. The text colours are an extention of information directed towards the user. Jet colour is used for headings, titles and text body while Davys Grey for subheadings. Light grey is a colour used for microtext or text explaining various data processes. Cinnabar and Dark Sea Green collours are extentions of primary Turquoise Green and CG Red (primary colours) both are used for the purpose of further explaining the changes in the market values.

COLOUR OF DATA VISUALISATION

Graph line colours are indicators that explain the current value of various stock markets or the value of individual stocks. Although the graph lines indicate similar information as certain primary and text colours, they are diferent (CG Red and Cinnabar are replaced by Burnt Sienna and Turquoise Green and Dark Sea Green are replaced by Granny Smith Apple). This is another extension of primary colours. In this case these colours represent various market volatility on a graph, Rick Black FORGA 39 then represents volatility of an individual stock within graph on its own.

Buttons

Colours of the web platform’s buttons add more contrast to already distinguished colour families. The usage of these action buttons offers feedback to user in a way of changing colours. The colour of the buttons are light in default state (Mimi Pink or Honeydow), once the imput data is entered the buttons colour will change to rich and significantly darker shades (Medium Candy Apple Red and Medium Sea Green). This feedback notifies user about when they are able to proceed and take an action. More about buttons in UI Components section.  A different example is the dark Eerie Black colour that is a part of passive / non-action button that does not change or respectively is not enabled by any data imput.

Colour families, Tints and Shades

ui components

Input data

Desktop:

Size: 302.95 x 46 Padding: 12 x 6 x 12 x 6 Border: 1 Text: Universal Sans,14px, Light, #141414 Colours: Background: #F9F9F9 Elements: #9A0527  

Mobile:

Size: 151.5 x 8 Padding: 6 x 3 x 6 x 3 Border: 1 Text: Universal Sans, 14px, Light, #666666, #F9F9F9 Colours: Background: #141414 Elemements: #27B069 #9A0527  

buttons

Desktop:

Size: 302 x 38 Padding: 28 x 12x 28 x 12 Text: Universal Sans,14px, Regular, #141414 Colours: Background: #F9F9F9  

Mobile:

Mobile: Size; 151 x 33 Padding: 14 x 8 x 14 x 8 Text: Universal Sans,14px, Regular, #141414 #F9F9F9 Colours: Background: #F9F9F9,#141414 Border radius: 30  

Desktop:

Size: 212x50 Padding: 28 x 16 x 28 x 16 
Text: Universal Sans, 14px, Regular, #F9F9F9 
Colours: Background - 31AF6C 

Mobile:

Size; 151 x 33 Padding: 14 x 8 x 14 x 8 
Text: Universal Sans,14px, Regular, #141414 #F9F9F9 
Colours: Background: #F9F9F9,#141414 Border radius: 30  

Desktop:

Size: 303x48 Padding: 6x0x6x0 Margin: 0x6x0x6 Text: Universal Sans, 14px, Light, #F9F9F9 
Colours: Background - Green: 27B069 - 31AF6C, Red: F4CCD5 - C6002D 

Mobile: