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.
Nov 18-19, 2021
UX/UI: Adriana Wong, Jeremy Tang, Rachel Verdoorn, Yakuta Izzy
Web Dev: Chris Martin, Maria Galindo, Sasha Sirota
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:
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.
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.
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:
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.
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.
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.
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.
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:
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).
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.
Prioritize what to work on
Connect with me