Level Up: Skills Acquired!
Ideating and Sketching
UX Research and
Presenting Ideas and leading design meetings
and bouncing ideas
Prototyping in Adobe XD
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)
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.
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.
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.
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:
Decreased Screen Clutter:
Box fields that contain icon text
Welcome message removed
Better spacing to separate each element
Removing intro animation from earlier designs to save time from waiting (They value SPEED!)
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.