Based in Madrid, Spain
Loading amazing data...
Introduction
In 2015, I launched an MVP that iterated over the years, and by 2020, it became Roostfy, the largest freestyle platform in the world. Currently, Roostfy has over 3 million downloads on Google Play across more than 80 countries, boasting a 4-star rating with over 9,000 reviews.
Role
Head of Design
Date
July 1, 2015
Responsabilities
Lorem Ipsum
Time line
1 month for the MVP. Then 5 years iterating.
Value proposition.
When we developed Roostfy in 2015, we were filling a great need presented by the entire freestyle community. At that time there was only the official Red Bull App, but users were not satisfied with the product and kept asking for features and improvements. Our platform entered the market in 2015 as an MVP and currently, after 5 years and many iterations, it covers all the needs of users, such as training, competing online, live battles, etc.
Research.
Field study
In this phase of the research is where I empathize with the user and begin to understand their needs. In this field study I use a sample of 15 users and use two methods to collect the information: direct observation and qualitative interviews.
Direct observation I do it in their natural environment (in parks, in squares and at home) to understand how is the real process of the user during their tasks.
The output I get from this phase are
the two main archetypes
who use my product.
Diary study
In the App there are certain functionalities that require a continuous use by the user in order to correctly analyze its usability, therefore I decide to use this method to test those functionalities.
For this study I have 10 users, who have to fill in a document daily during the use of the App with the following information:
Tasks performed
Feelings
Goals
Frustrations
Usability testing
For the usability testing I recruited 10 users , following the good practice of testing with 5 users from each segment defined in the field study and interviews.
The usability test plan consists of 10 tasks, objectives, location, business case, etc..
See it
here
in detail.
Analysis and feedback
In the mobile app market there is only one competitor: Redbull. My analysis starts by downloading the App and reviewing all its functionalities and how they cover them from the user's point of view. The next thing I do is analyze all the reviews (positive and negative) on Google Play to find out the desirability of the users and what their biggest frustrations are.
A/B testing
Since I launched the MVP many of the iterations were validated through this type of testing.
The standard methodology is to test the new design with about 10,000 users to see what impact it has relative to the control group.
In this example, the average daily usage of a new functionality is measured by cross-referencing the data from group A with that of group B.
The experiment had a 98% increase in the average usage of the redesigned functionality, which was a great success.
| Day | A (current) | B (redesign) |
|---|---|---|
|
One |
8 |
15 |
|
Two |
7 |
16 |
|
Three |
10 |
22 |
|
Four |
9 |
16 |
|
Five |
11 |
20 |
Design decisions.
Online league
The first difficulty comes with one of the most complex functionalities of the App: competing for an online league every month.
The challenge here was to get a correct distribution of information and functionalities on the screen, from what I could perceive in the interviews with users.
Several testers said the same, so the goal was to show five functional blocks of the league on a single screen, while maintaining a good user experience
“Even professional league websites are hard to understand […] I have a hard time finding the information I want.”
Live battles
The second difficulty came with the App's most powerful functionality: live battles between users. These battles take place in turns of 60 seconds. While developing the user tests I saw certain problems that needed to be solved to achieve a perfect user experience, so I decided to implement certain visual and functional details on the screen.
“During the battle it is not clear to me whose turn it is.”
“Sometimes my opponent’s microphone makes a lot of noise when it’s my turn.”
| Problem | Solution |
|---|---|
|
Opponent noise during your turn. |
Programmatically mute the user who does not have the turn. |
|
Inadequate volume of the opponent’s voice. |
Volume controller in the area of the opponent’s layout. |
|
Inadequate volume of your music. |
Volume controller in your area of the layout. |
|
Not knowing whose turn it is. |
Increase the screen size of the person who has the turn and slightly darken the camera of the other. |
Voting method
The process of filling the cart is undoubtedly the most frustrating for users in usability testing, even leading them to give up by closing the App (testing Uber Eats). This is due to the tasks of editing products and navigating between categories. These two tasks should be simple and intuitive, otherwise they are blocking the completion of the order.
Information architecture
Roostfy became a platform similar to a social network, so the information architecture increased in size and complexity. At this point I decided to implement a four-tabbed navigation menu that would be responsible for encapsulating the four functional blocks of the platform.
Design System.
Colors
The primary color is a low saturated red to avoid excessive contrast on the black background. The secondary color follows the same concept as the red, but in this case in the yellow range. Its purpose is to take care of secondary actions.
Components
This is a crucial point to save future labor and gain consistency throughout the product. The whole interface is studied following the laws of Gestalt psychology to ensure a correct visual perception by the users.
Typography
In this product I decided to use Android's default font: Roboto. It brings me the typographic cleanliness I need on the screens, since the reading is white on black.
| Typestyle | Weight | Size | Line height |
|---|---|---|---|
|
Heading 1 |
700 |
24px |
36px |
|
Heading 2 |
700 |
20px |
30px |
|
Body 1 |
500 |
16px |
24px |
|
Body 2 |
500 |
14px |
20px |
|
… |
… |
… |
… |
Graphics
All graphics, both illustrations and color icons, have a flat design to bring cleanliness to the interface. Color icons are used in areas where more visual information is required than is provided by a black/white icon. Line icons are used in areas such as the side menu, bottom tabs, top menu, etc.
Animations
The animations follow the same visual pattern as the graphics, and are used at certain points in the App where some dynamism is required. The illustrations are created in Adobe Illustrator and the animation process in Adobe After Effects
Complete interface.
