Robinhood
Robinhood is an automation product, developed internally, sending rewards, surveys and custom messages to our players within the games.
When certain players do not receive the reward they deserve in the game, or when external intervention is required, Playstudios' LIVE department employees uses it to manage and analyze prizes distribution through predefined or custom SQL queries, created in the product..
After realizing that there are various problems in the product, mainly in terms of the user experience and flow of use, I teamed up with the people responsible for the product in the company and together we set out to improve the product.
My Role
UX, UI and Product Designer
Product Research, Data Exploration, Competitors Comparison, User Interviews, Generating Insights, Sketching, Wireframing, Prototyping, Testing and Visual Design.
Softwares used
Kick-off Meeting
Together with the product manager, we created the new product requirements document (PRD) for the new Robinhood app, which includes 3 main aspects:
* Infrastructure- updating the development infrastructure of the product to reduce the level of bugs to a minimum and to provide renewed confidence to the users of the product.
* User Experience- general improvement of the user experience, Flow and the product interface, while providing transparency to managers and new users.
* Brand Values- implementing new capabilities in the product and communication with new areas in the company and in games such as the loyalty program and the cross promotion mobile portal.
The Challenge
The biggest challenge for me was to understand how the product works and how to use it. The product is complex, built mainly for data people, who write code and SQL, things that I am far from dealing with in my day to day. I knew that only after I understood the product at its core, would I know how to improve it and truly understand the pain points of our users.
Another challenge was to change a product in the first iteration after six years of product development. The users, on the one hand, knew the product very well and it was a bit difficult for them to accept changes, on the other hand, there were sore points that required quick attention.
First Product Research
The first thing for me to do was to open the product for the first time and use it, try and go through all the scenarios that users go through and understand the existing problems from first hand.
In the picture: part of an automation process in the early version of Robinhood, a protocol for scheduling a reward and the user flow.
Exploring The Data
These two graphs, exported from "MODE" data product, resamble a high and growing usage from our users from the one hand, and also that errors and human mistakes accures regularly in the product (second graph), that means that the POC is high enough to design and develop a new version of it.
User Interviews
The next step was to map the users who use the product from within the company, follow their usability and understand where their difficult points are in the product.
Below are some of the user interviews and the users' pain points I gathered.
Competitor Analysis
In the gaming environment, there are similar products corresponding to Robinhood that provide similar solutions to companies. I tested some of them to see how the user flow works, how to use them and what are their important features.
Here are some of the examples.
Generating Insights
After collecting all the information, I began to generate insights while thinking about actions that could address our three KPI'S: improving the user experience, engagement and ultimately also increasing the company's revenue. Here are just some of them:
Competitors Analysis Insights
User Interviews Insights
First Sketches
After examining the insights from the research together with the product manager and the developers, and after understaing the capabilities of the studio at the time, we mapped out the features that would go into the updated version of Robinhood, and I started sketching it on my sketchbook.
Wireframing the Solution
One of the essential steps in the process, was the transition of the sketches to the computer. It was important to deploy the right resolutions according to the user research from this stage, in order to understand what size the elements could really be, on the screen.
In accordance with many user requests, we have created an information center that will function as a dashboard on the home screen of the new Robinhood.
The users receive important information immediately in the form of vital indicators of how many prizes have been sent/not sent, the amount of money sent today, a monthly event calendar, information on the latest reward sendings and the accessibility of the most common task in the product - creating a new reward request in a convenient way.
Another crucial request was a place where users can view and manage all reward requests, track them, and get valuable info about them (Monitor tab).
That way, many mistakes can be avoided in advance, so the users can act in a smarter way in the product.
New Request Screen Flow
One of the essential operations in Robinhood is creating a process of sending a reward to a user or a population of users.. The following screens show this process in the new version of Robinhood, after understanding the users' needs.
I divided the screen into three, navigation on the left, in the upper part a clear timeline of the entire process and in the lower part the user's action area, where the information changes in relation to his progress in the process.
After selecting the source of the logic (the group of players who will receive the message or prize in the game), the user arrives at the selection screen of the specific logic, which will accompany him throughout the process. He will be able to select it manually from the search bar, or choose one of the common options.
By clicking on "Show logic table", the user is exposed to all the logics that exist in the system, from which he can manually select a logic as he sees fit.
After choosing the logic, it will appear clearly to the user and offer him to select additional specific parameters for the logic he selected.
When the user advances in the process and needs to determine additional parameters for sending the prize, the product will know how to validate each field, where the user will make a mistake.
After finishing setting the parameters for the sending, the user will be able to perform an internal test ( called "Dry Run" ) and check if it is correct.
During the test, the user can view the logic request code and receive an indication that the test may take several minutes.
When any problems are discovered in the test, Robinhood will know how to accurately diagnose them and send the user to exactly the right place, to fix them and perform the test again.
When the test is finished, the user will reach a screen where a detailed summary of the test will be presented, including what problems may arise if the test is run in real time.
The next stop will be determining the time to send the reward or the personal message to the players in the system.
Before sending the request definitively, the user will receive an overall summary of the entire process, to verify himself and to avoid mistakes.
After completing the entire process, the user receives a cute indication that he has finished and references to see his request on the monitor screen, where all the requests are centralized, or to send a request for a new reward/message.
Design Process
Creating a design system is critical to product continuity. Designers who will work for Playstudios in the future, will know how to design new elements within the product easily while simply transferring the materials to the dev team. I created one style guide with information about the fonts, colors, spaces and other design guidelines.
Inspiration
Aside from the competitor user interfaces I tested, which influenced the overall design of the new version of Robinhood, I researched complex systems design on inspirational design blogs like Dribbble and Muzli.
Design Solution
After usability tests on the characterization prototype with the users I spoke with in interviews, all we had left to change in moving from characterization to design were mostly minor things.
The feedback was good, and we could move on. We wanted to keep the green color that led Robinhood at the previous version in order to maintain engagement and identification with users, I designed some new icons, we introduced new features such as the ability to send additional inbox items that serve other and new departments in the Playstudios- and we were off!
Click on the video to watch the flow of using the new version of Robinhood
Hands Off -
Developing the Design
Working with Figma on a daily basis made my job very easy, already in the early stages of the work alongside the fact that I could share new characterization screens with system users and test the prototype with them in real time.
The development mode "Dev Mode" helped the developers who worked with us, see all the new screens in code configuration, css, color numbers, spacing and other important elements in the user interface I built, and in the end to get the final mockup of the product, which we improve in iterations together with them, to this day.
In accordance with our data security, a complete prototype can be sent separately.
Results
Since the development of the new version of Robinhood went live, we could see in the reports from our data department that human errors in the product dropped significantly from less than 1% (reached 8% at the peak). The amount of money saved is significant, in terms of tens of thousands of dollars a year.
Robinhood users today know how to tell that their overall experience with the product has increased significantly, it can be seen that they stay longer in the product and perform more tasks.
We received a lot of good feedback after the release of the product and to this day in the corridors of the company, you can occasionally hear random people talking positively about the product.
My Takeaways from
Robinhood Project
Working with a diverse and often changing team is essential for understanding other aspects of the company and understanding the products in a more comprehensive way.
The initial understanding of the product helped me to understand how the product works, but only when I got the full picture of the product and the problems from the users' side, I realized that I really know what to change and what needs to be done immediately and in the long term.
Iterations can be very simple in the first stages of the characterization and do not have to be designed at a high level, but only to answer the critical problems in the first stage.
Making the World a Better Place
The realization that my work caused a change in the company, even if only for a small group of people in the first stage, made me feel really good.
The knowledge that even one person can influence and change is excellent and will always give me a boost in the future :)