React Stocks
Brown University ~ UI / UX Design ~ December 2020
In this project, I designed a web application used for purchasing stocks. While this site does not link to the stock market itself, it was a great way for me to hone my skills in Javascript and React. My primary focus for this project was implementing a well structured back-end and a clean, user-friendly front-end.
Overview
What is the goal of application?
This application provides users with an intuitive approach to purchasing stocks. Through a clean interface, this application guides user through filtering and sorting through the many possible stocks to buy as well as adding a given stock to their cart. Lastly, the user is able to checkout and is alerted of how much their selection of stocks costs.
What is the value to the user?
The stock market can be an incredibly complex space to navigate. This application puts the user first by providing a clean, organized arrangement of information. The user interactions are quick and easy with an emphasis on effective learnability.
Usability Principles
Card Design
Given that there are so many different of stocks to invest in, it was important that the formatting was consistent across all of them. In my card design, I utilized bolding, opacity and size to create a tech hierarchy. While the site is fairly minimalist, lacking in color, the green "Purchase Stock" button incentivizes the user to click.
Filtering and Sorting
With 12 individual stocks available on the application, it was clear that the user needed some way to filter and sort the data. By highlighting the active selection, users can see what filters are currently in use. The "Sort By" button is a dropdown as to separate it from the filters.
Learnability
To aid in learnability, I kept my color palette fairly minimalist, except when using green to highlight important actions the user may want to take. This is applied to initially putting stocks in the cart, going to the cart, and checkout. This consistency helps users learn the site quickly and be a more efficient navigator.
Deployment
Please find the link to my deployed site below.
Deployed Website