BrainStation x Robinhood Hackathon
As part of BrainStation's curriculum, one of the final deliverables is to complete a 24-hour hackathon with a cross-disciplinary team. For this particular cohort, BrainStation partnered up with Robinhood. Robinhood is a commission-free investing tool that makes it extremely easy for investors of all skill levels to jump in and begin putting their money to work. That being said, Robinhood was founded based on one simple concept - to open the doors to the financial markets and make them accessible to everyone. They aim to make trading intuitive, affordable, and inclusive to achieve their vision where anyone in the world is able to invest, regardless of their knowledge or status. I should also mention that signing up will also net you a free stock!
This industry sprint project put our understanding of the process to the test and was a great experience and opportunity to apply the practices that were learned over the course of the bootcamp. The project also provided a chance to experience the reality of working in a cross-disciplinary team; tackling a very real problem that Robinhood faces.
Project Type
Industry Hackathon
Nov 18-19, 2021
Timeline
24 Hours
Role
UX/UI Designer
Tools
Figma, FigJam
The Team
UX/UI: Adriana Wong, Jeremy Tang, Rachel Verdoorn, Yakuta Izzy
Web Dev: Chris Martin, Maria Galindo, Sasha Sirota
The Problem
Despite Robinhood's effort to make investing more accessible for anyone that is interested; they were experiencing an issue with engaging users and encouraging them to take the leap and gain control of their financial freedom. As such, the problem space that was presented to us is as follows:
Robinhood was looking to engage new and existing users by sparking their curiosity around cryptocurrency and online trading. They were looking to:
- Educate users and demystify the world of cryptocurrency
- Leverage consumer behaviour information to better engage new/existing customers
- Illustrate why and how individuals can take control of their own finances
- Establish Robinhood as the preferred platform for crypto trading
HMW Question
A How Might We question was provided by Robinhood for this particular hackathon to better narrow down the scope of the challenge.
Research and Proto-Persona
Due to the 24-hour time constraint for this hackathon, the team decided it was best to proceed with secondary research and did not conduct any primary research. Through our research we found that only a small percentage of millennials actually qualify as 'financially literate' and a majority feel anxious, stressed and nervous about their personal finances. This issue tends to be more prevalent when there is a lack of personal finance education in the school system and when there is a lack of discussion in an individual's family about the topic.
Proto-Persona
As we did not conduct primary research due to the time constraint, we did not have enough information to create a fully developed persona. Instead, the team opted to create a proto-persona with some minor pieces of information that we already had regarding the goals, motivations and pain points/frustrations of both Robinhood users as well as potential users.
Gina is a millennial based in Brooklyn who lives by herself and doesn't really have anyone to talk to regarding personal finance and investing. Her Dad has always mentioned the importance of saving; however, Gina never really gave it a second thought and as such, she does not consider herself financially literate.
Pain Points:
- Worried about her long-term financial plans and her future
Goals:
- Learn more about cryptocurrency
Motivations:
- Wants to feel more secure in her future
- Wants to become financially literate
Sketching and Wireframing
Before deciding on a concept that our team would build for this hackathon, we first decided to do a round of Crazy 8's (an activity where each team member has a sheet of paper that is divided into 8 sections with a minute for each section to sketch or write notes of potential concepts and solutions). For this activity, we also included our Web Dev teammates so they can generate their own ideas and have a better understanding of the UX process. Through this activity, many potential ideas were generated and the team agreed collectively and selected the concepts that could be the direction that our solution could go. From the ideas and concepts generated, we decided to focus and attempt to incorporate the following:
- Revamp of the desktop website to include more interactive and engaging elements
- A brief quiz to engage and test the consumers' knowledge
- Feedback through positive reinforcement and providing more details after an attempt to answer
- Display informative tips on the website that the consumer can learn from and use to answer
- Potentially include a leaderboard to engage consumers through competition
- A focused blog with up-to-date information and news regarding investing and cryptocurrency
- Ability to contact support or an advisor for more information
- Masterclass videos and post-video mini-quizzes to engage the consumer
Mid-Fidelity Wireframing
Once the concepts and direction of our solution had been decided upon, we diverged and the UX/UI team began translating elements and creating the mid-fidelity prototype of the revamped Robinhood website while the Web Dev team observed the process and began to prepare the code for the solution. We kept the current Robinhood branding in mind as our solution was not a redesign and incorporated their current desktop website into our mid-fidelity prototypes.
- The colour scheme of the Robinhood Home page and Crypto page remained constant throughout the revamp
- Our team decided to keep many of the existing elements to avoid redesign/rebranding
- Colour palette
- Button styles
- Text (font, size)
- Logo
- Illustrations
- Website copy
- Also considered using existing elements to create a 'Robinhood Coin' to symbolize and represent their Cryptocurrency page
Mid-Fidelity Prototypes
Two near-identical mid-fidelity prototypes were created featuring the main feature/solution that our team wanted to focus on for the Robinhood Crypto page; an interactive mini-quiz to help engage the consumer and make the experience and bits of information more memorable to develop their interest to learn more. The key differences between these two prototypes are how certain information is displayed and how much of it is visible to the consumer at once. The differences exist in the "Learn The Basics of Crypto" banner indicated by the outline below. During the process of wireframing, our Web Dev colleagues had a more visual representation of what the solution may look like through the wireframes and constant communication with the UX/UI team and began coding the build blocks of the website.
The first prototype on the left displays less information and helps maintain a simplistic and clean overall visual in addition to keeping the interactive mini-quiz more casual. This puts less pressure on the consumer as they go through the quiz and learn more about cryptocurrency. The prototype on the right displays slightly more information in the banner, contributing to a busier overall visual but contains brief definitions of basic terms in cryptocurrency that also show up in the mini-quiz. This contributes to a slightly more serious vibe overall; however, the consumer is exposed to some information beforehand that they can learn from regardless of whether or not they decide to interact with the quiz.
High-Fidelity Prototype
As mentioned previously, our team decided to keep Robinhood's branding in mind so the UX/UI team proceeded to gather resources such as the illustrations, font and colours that were used on both the Robinhood Home page and the Crypto page to begin injecting into our prototype.
Some further considerations were made regarding the two versions of the banner in the mid-fidelity prototypes and the team decided to instead have the sellings points of Robinhood in the banner to better capture the consumer's attention and interest. This would also steer away from the slightly bulkier appearance of the more informative banner, which consumers may skip over. The team wanted to keep a simple and very casual webpage that could be digested easily as the consumer is introduced to cryptocurrency. We have also included additional features (informative blog-style posts, masterclass videos, or even contacting an advisor) that can be accessed via the cards under the interactive quiz so that consumers may readily choose to continue their journey into the world of Robinhood and cryptocurrency.
Accessibility
As Robinhood is aiming to be the preferred platform for cryptocurrency trading, it is important for the website to be accessible to all potential consumers to maximize its reach. Our team decided to conduct several accessibility checks to ensure that the website would be able to meet WCAG AA standards at the very least.
Contrast Ratios
We conducted contrast checks for the website and its elements to ensure that they would meet the WCAG standards. This was important as the website needed to be accessible to all consumers so that they are able to clearly see the information that the Robinhood Crypto page really wants to display. Contrast checks were conducted for the following elements:
- Hero banner and CTA buttons
- CTA text and button
- Second banner with selling points of Robinhood Crypto
Contrast checks were required for these particular elements as the colour scheme of the majority of the website is reflected in these elements. For example, the CTA buttons on the website consisted of either #000000 and #FFFFFF (black button with white text) or #FF5A87 and #000000 (pink button with black text).
Colour Blindness
As Robinhood is trying to be the preferred platform for crypto trading, the team felt it was necessary, to run colour blindness checks to ensure that the colour scheme applied is fully accessible to all consumers. The different variations of colour blindness that we checked for were: Tritanopia, Tritanomaly, Deuteranopia, Deuteranomaly, Protanopia, Protanomaly, Achromatopsia, and Achromatomaly.
Key Learnings
Communication
- The most important thing that a team can do is to communicate their thoughts and ideas to really bring out the potential creativity of the solution
- Communicating in a cross-disciplinary team and keeping everyone updated on the progress and when to expect hand-offs played an important role in the team understanding what steps needed to be completed, as well as the next steps that were required in order for the project to progress
- Discussing each other's strengths and weaknesses during the initial stages of the hackathon really streamlined the process for our team as it helped us understand who would work well in a certain area
Prioritize what to work on
- Given the time constraints for this hackathon, our team was pressured to trim certain processes in order to be able to have a functioning product by the deadline (e.g. proto-persona vs. persona)
- Circumstances for every project may differ, potentially requiring a different variation of the process to complete
Next Steps
- Further development of additional features (such as the ability to speak with an advisor) to build a better experience for consumers
- Conduct user testing for the website
- Continue discussions with Robinhood's teams to confirm viability of the website