Spire

Trading Inc

Spire is a day trading platform that optimizes your ability to trade easily and comfortably.

Until now, Spire only had a desktop app that was complex and highly functional. I worked at the forefront of the mobile app design to translate the functionality of the desktop app into a portable format. This helps traders feel at ease because they can trade no matter where they are. 

Internship: May 2019 - Aug 2019 

Level Up: Skills Acquired!

Ideating and Sketching

UX Research and
UX Design

Presenting Ideas and leading design meetings

Communication

and bouncing ideas

Xd

Prototyping in Adobe XD

Id

Documenting in 

Adobe Indesign

Who Are Spire's Users? 

Spire Traders are: ​

  • All qualified traders (successful training on the Spire Desktop Trading App) 

  • Day traders. Highly stressful because stocks are volatile

  • Value customizability, speed, Information access, and efficiency

The New Spire App Should: 

  • Have seamless navigation between ordering, viewing stock data, and managing positions  

  • Reduce stress (they can now manage stocks away from their desktop)

Final Products! 

By the end of my internship (4 months), the app has not been completed. However, I was able to complete a blueprint for the designs of the app and set a standard for behaviours of elements that will be reused in the design of future pages.

THE GOAL OF THIS APP IS TO GIVE 1600+ TRADERS ACCESS AND MANAGE TO THEIR STOCKS NO MATTER WHERE THEY ARE. Day traders often work long and highly stressful hours, so leaving their stocks unattended is unsettling. 

Overview

This video shows an overview of what the app may look like. Although this is not the final, it gives guidance when designing each screen.

Sign-in Screen 

This one is pretty self-explanatory. A very simple and clean sign-in screen that has text fields and a remember me function. 

Open Positions Screen

An open position is a fancy way of saying stocks you have. This screen is meant for users to manage their open positions and track their activity. 

Making The Blueprint: The Spire App Overview

The purpose of creating an overview is to be able to envision the app on a high level and create consistency between every page. 

 

** Screens above showcase consistency between different screens  (not final)

Some Design Decisions:

  • Relocated flattening action to a less prominent position to prevent accidental flattening. It is also an infrequently-used action, so it does not always need to be available 
     

  • Reduced top header functionality to prevent confusion and overlapping functions (limited by screen space)
     

  • Labelled the navigation bar to identify the page because of the icons (e.g. open positions) does not have a predefined icon like "favourites" (e.g. star/ heart). 

Sign-in User Flow And UI - Screen Specifications

Initial designs that didn't make the cut:

Obviously, not all designs are going to make it to production. Some screens got voted out for visual reasons (e.g. background colour decreased readability) or for functionality reasons (e.g. a gradient logo can double as a loading animation). Here are some examples of potential sign-in screens that got ruled out:

Final Top Two Contenders:

Major Differences

Decreased Screen Clutter:​

  • Box fields that contain icon text

  • Welcome message removed

  • Simplifying Icons 

  • Better spacing to separate each element 

Saving Time: 

  • Removing intro animation from earlier designs to save time from waiting (They value SPEED!)

 Version 1 

 Version 2 (Final) 

Graphics Specifications For the Sign-In Screen 

The following slide deck includes the layout of the sign-in screen. It outlines where every element is relative to each other so that it can be scaled and adjusted according to the different screen sizes. 

Open Positions UI & User Flow - Screen Specifications

Final Top Two Contenders:

Major Differences

Changes To Improving Semantics 

  • Changed pink and teal red and green to create consistency with desktop UI

  • Removed boxes around dropdown, the tappable area is implied

  • Changed flattening action from red to purple because deleting and flattening is different

  • Added error indicators that guide users to show them the state of their stocks

Changes To Improve Information Display ​

  • Reorganized card layout to be able to include more information 

How It Works:

Open positions are the stocks that you own. 


Here's a general idea of how the open positions page works. The purpose of this page is to manage the stocks that you have purchased. 

Version 1 shows all the possible interactions on this screen.

 

Version 2 illustrates one way a user could sell all of their open positions.

Version 1 

Version 2 - Final 

Check out

my resume

Send me an email

View my 

instagram

© 2019 by Emily Yang