This was a project compelted to showcase skills and practice an end to end product design task. As most experience and work has been completed for client and through full-time roles the confidentiality of the work means it cannot be showcased on my portfolio. By completing these projects that are curated using fake product briefs it gives the oppurtunity to present work and skills.
To create a user-friendly stock market analysis tool for a desktop trading application. The tool is part of a fictional trading platform aimed at amateur traders.
To create a user-friendly stock market analysis tool for a desktop trading application. The tool is part of a fictional trading platform aimed at amateur traders.
To analyze stock market trends to make informed trading decisions. Current Pain Points focus on the difficulty in understanding complex market data and analysis tools.
Kevin had a basic understanding of the trading app but was not confident when it came to understanding the more complex data related to stocks and analytics. This resulted in frustration and hesitation to use the features within the platform. Many stock trading platforms can be overwhelming due to the vast amount of information they present and the data is constantly updating. If the user only has a basic or novice understanding of stocks to begin with then it will be very difficult to get their heads around what everything means and keep up with. There is a high level of risk associated with this as it is linked to money so if the user is not fully confident in understanding this could leave to uninformed decisions and mistakes resulting in loss of money.
In order to make the application more successful users need to feel empowered to make crucial financial decisions with their stocks. By introducing an easy to understand analysis tool that will help and guide users to these decisions this will drive business and help the app stand out from its competitors.
Would be beneficial to market / advertise the feature on their website as well as displaying the actual product and functionality.
Amateur traders find it difficult when using trading platforms to understand all the information presetned as it is typically "jargon" heavy with acronyms and data that is overwhelming if you are not aware what it all means. This results in a lack of confidence using the platforms and may deter many users. Not only are users loosing out but businesses will loose customers if they only target their information at industry experts and will not gain any new custom from other demographics.
Design an accessible and informative stock market analysis tool. Key areas and approaches to this are broken down below.
In order to achieve the goals for this project the below features will be explored and created
The fun part! Hunt for inspiration and ideas
This may be completed earlier in the process but always useful to revisit once more research carried out
Begin putting together user flows, task maps and stucturing the Information Architecture
From sketching to high fedelity designs - this is a huge portion of the project! Continuous testing and feedback is beneficial here
An initial scan of similar products and inspiration from platforms like Dribble is always a useful place to start any project to get an understanding of industry standards and patterns before diving into further detail and analysis. Once the initial brainstorm is done I like to group my findings into the screens / sections that will be designed based on the initial user need-finding sessions.
To gain a better understanding of competitors and the current market a SWOT analysis was carried out to identify what each company was doing well, not so well and if there was any areas for improvement within our platform.
From doing this it was clear that most platforms shared the fact that analysis of stocks and trading is a very content heavy with so much data to be presented at once. However this provides oppurtunity for the platform to stand out from competitors if there can be a better balance found between displaying the relevant information and not overwhelming the user.
Before starting on wireframes it is important to work some some user flows and putting together the pieces of the Information Architecture. It can be all too easy to jump into designing but it is important to not be distracted by design elements and think how the user will get from point A to point B and the various aspects that could impact their journey and what the system will do to handle that. Since this project was focused around one main use case of users analysing their stock information this was used for the task model to consider what screens and steps will be required to allow the user to reach their goals.
Once the IA and user flows had been decided it was time to start sketching out some ideas.
The sketches were then used as a base to start creating some digital wireframes that allows you to easily swap through different elements and ideas to see what works. It's good to get feedback at this stage before high fidelty designs are created as this will save alot of time if everyone is aligned at this stage.
The main purpose of this screen is to provide a top level overview of the users current stocks and their performance/health. It also provides an area where they can keep updated with a live feed from articles and experts that could inform decisions. If the user wants to view more information they can utilise the quick view panel which means less information needs to be presented upfront and using the method of progressive disclosure they can view more without leaving their current flow. This would be particularly useful if they wanted to skim through many stocks at once.
The main purpose of this screen is to allow users to view all information relevant to that specific stock. This will be divided into sections that will best allow the user to learn about the stock without being overwhelmed by information.
This was not in the original brief but after speaking to some users and from doing other competitor research I found this could be a useful feature to implement in to the product. By having stocks side by side and allowing users to visually compare could better inform them and their financial decisions.
In the interest of speed to convert the low fidelity wireframes into high fidelity mockups I used the Shadcn component library on Figma as this utilises Tailwind which would be the chosen css library to build the product. Various chart libraries were used also such as Charts.js and Rechart.
Following a user feedback session with the wireframe designs it was decided to add some more elements to the dashboard that was previously thought.
More filtering and search functionality: Allow user to filter down the information and quickly switch between different views. This was achieved by using tabs as navigation to switch between different views in addition to standard filtering system that will allow user to refine results. Live feed from experts: It was noted this would be useful to see on the dashboard view and not just on the single portfolio page.
Originally one of the features requested was hover details that would reveal more information when user hovers but during user testing it was identified this caused more visual clutter and was not very responsive. However it is a useful feature and something that was requested so was amended to only show very minimal information as the user preferred to use the quick view panel for more information anyway.
From viewing various platforms I noticed that they were either very complex and detailed with outdated UI or they visually looked impressive with animated charts and striking interfaces but there is something to be said about finding the balance between these two things and this is what UX/UI designers always strive for. More often than not this is much easier said than done and personally functionality must always prevail. .
An improved onboarding journey would empower users by taking alot of the thinking off their hands by using a questionaire that could help set up their profile on account creation and suggest stocks that are relevant to their interests / goals of using the platform. For example if their reason for signing up is because they are mostly interested in long term stock options these will be suggested to them.