To the rhythm of history

Step 2 of 2: Building the idea

The journey continues! In my last post I talked about the first part of this project, where I guided you through the investigation process I had to take to get to this point. If you want to get the whole understanding where does Step Back come from, do not doubt to read the first part clicking on this link. However, some refreshment will come in handy to situate ourselves again.

The origin of Step Back remains on the question I made to myself of how could dance training be improved. This was the beginning of a journey of new findings, leading me to have a deep understanding on what users feel, think and behave when it is about learning to dance. With all the investigation I created Step Back to give a solution to the current pain points of our users:

• The feeling of embarrassement is ever present when insecure users don’t have a control of the technique. They don’t like to show their dance abilities in front of other people, because of what they might say.
• Due to the pandemic situation, dance schools had to stop their face-to-face dance lessons. However, the most popular solution, but not the best one, is to keep on doing them through live streaming formats. A way that most users aren’t satisfied with, when the connection doesn’t work well they lose the thread of the class.
• An other format that has been stablished for long time is the recorded classes, which it also has been used during the pandemic, but this way the user doesn’t have the teacher to correct them. Something that could be harmful for the students as they could hurt themselves when not doing it right.

Gathering those findings as well as the concept of learning by understanding the history; Step back is not just a home dance school, it is also the ticket to travel to the origins of each style. The digital academy is created to make easier to learn to dance for everyone, specially the beginners but advanced dancers are also welcomed.

Time to pick up again your bag and follow me to the next adventure, the creation of Step Back!

Usage cases

Before defining how is going to be the interface, I made a list of all the possible usage cases of the interface. I needed to know how is going to be used in order to get ahead of users offering them what they really need. As at the end it was an extense list, I selected the three most helpful ones.

• The user who wants to start learning a new style, goes over the styles menu and selects the one they want.
• The user who wants to continue with their started classes, they go to the “My classes” section to select the one which they want to continue.
• The user who wants to see their progress and how they have been improving, they go to the “My achievements” section to remember what they have achieved up to that moment and see what they are missing. This is how they motivate themselves to keep practicing.

Structure

As in dance classes, when creating a digital product you have to take step-by-step. In this case we can’t skip to the visual part if the structure it is not defined yet, how could you paint on nothing?

Sitemap

The first step is to create the skeleton of Step Back, in other words the information architecture. Depicting all the sites that this TV app would have, helped me to have a clear idea of what I will have to create in the following sketching phase.

Great ideas don’t work if there isn’t an adequate user-centered design. It is important to take into consideration our users from the very beginning, so that we provide them with a great Step Back experience. The sitemap benefited me to make a logical organization of different tasks that users will be able to do in it. Not only that, but also to construct a less profound structure, making it easier for user’s cognitive load.

Sitemap

Flowcharts

Next step, how are users going to interact with this information?

I used the task flow type to concrete the interaction design at a conceptual level. Flowcharts are sequence of user’s actions, which allowed me to take into consideration and realize every step that users will have to take in order to accomplish each goal in the interface.

Every usage case is a goal that could have any user when interacting with Step Back. However, it’s not possible to prototype all of them, for this reason the three usage cases that I mentioned before became goals when making the task flows.

• A task flow of the user who wants to start learning a new style.

• A task flow of the user who wants to continue with their started classes.

• A task flow of the user who wants to see their progress and how they have been improving.

• At the end I added another task flow of a unique functionality of Step Back, even though it wasn’t going to be prototype. This task flow is about that user who wants to train with their dance partners remotely.

Moodboard

We already know what things will be able to do users in Step Back and how’ll they do it, we’ve made sure they have a full experience without lacking anything. But how will they see it?

Step Back is a modern brand that wants to be tuned with the designing of the moment. The minimal aesthetic is all the rage nowadays, so Step Back couldn’t be any less. At the same time, this type of aesthetic helps the brand to be more neutral, something that it is important as it has plenty of themes and different histories for each style. What also contributes to the neutral aspect is the black themed tone that the brand has.

Step back has to be neutral when users are in the general areas, but once they are inside a style they take a trip to the past to discover its unique essence.

Sketch

Although the style was already thought, I couldn’t start designing it. I first draw the sketches to focus my attention on usability.

This time sketches were made raicing the clock. This put me in a challenging situation as I had to think really fast which elements were the most important in each site.

Wireframes

Sketches started to gain form.

Wireframes are the bridge that we need to walk across to get to the final design. In this step, we gave a logical structure to the design in order to create an easy navigation, while making more concrete the content that is going to be in each site.

As the TV applications adapt their design depending on where the user uses it, I based it from Apple TV. In that way, I followed their layout guides that are uploaded in their web, in this sense every site of Step Back is based on the four columns organization.

Wireflow made through Overflow

Corporate visual identity

The name Step Back comes from the idea of going back to past as the user will experience during their dance classes. At the same time, the name plays with the dance concept “step”.

On the other hand, the concept of going back it is also expressed with the background element, which it is easy to recognize and also gives a wink to digital classes. In that way, the Step Back graphic logo represents the main concept that the brand was made to be.

The corporate palette it is composed by 4 main colors, as the dark theme consists on graduating the transparency of the white forms on black background. The colors that are most used when it is about dancing themes are purple and pink, that is the reason why I chose them for the Step Back branding. However, their tone is tailored made for the brand, this is due to the modern aspect it gives to the interface, specially when adding a graduation between them.

The typography that it is used is SF Pro, it was taken from the Apple TV design guide, which it fits perfectly to the minimal aesthetics of the brand.

When it is about the buttons, the interface has two type. The ones whose aim is to call the main action are filled with color, as it captures the attention. The secondary button it is used to make the user understand that they can click on it, specially is used when they hover it.

The iconography respects the modern and minimal style, all of them have to respect the same aestetics. Any of them should have fills, only borders at 2,7 width.

Prototype

With the style guide on the side, I started to add colors to the black & white wireframes. The visual stage it is not only about painting and drawing, interaction design it is also created to make a predictable prototype.

I created a high-fidelity prototype so it gives the feeling of being a real software, therefore I could get a higher quality feedback during testing.

Guerrilla test

At this stage the prototype is tested by possible future users to detect those errors that I couldn’t see when designing it. Doing the guerrilla test helped me to prevent possible errors before the real product is produced, saving unnecessary expenses and helping to make a better final product.

When conducting the test I asked the five users to do 3 general paths:

1. Start to learn a new dance style, specifically Salsa.
2. Find the following salsa class that they have to do.
3. Revise that salsa class that didn’t go well.

The results were positive, most f them recalled the interface is intuitive because it is familiar to them as it’s similar to Netflix. Some of them expressed they would enjoy having it at home, including one of them said the test made him want to dance.

However, everything can improve, so does my prototype! There were some blocks with the design and the information architecture.

• At first sight they can’t figure out which silhouette is the teacher and which they are.
• When they read at first the “bonus content” they don’t understand the concept. They image different things far from what it actually is.
• There are confusions between the content “my classes” and “progress”. They think that both could have the same things.

I could identify some patterns with some of the users:

• When asking them the second path, the one they have to find the following salsa class, they go directly to the home page. They thought it would be a “keep dancing” section, such as Netflix with “keep watching”.
• They found difficult to understand what was the graphic demonstrating.
• An other pattern related to the graphic, is that the hover action it’s not intuitive for them.

All the participant in the test gave me valuable suggestions in order to improve, they created a long wishlist plenty of original ideas. However, I highlighted the three that were the most said.

• They feel as the interface needs to motivate them to keep dancing. They think it is necessary to add the games strategies to capture their interest. They want challenges and competitions between other users.
• They would also like to have a brief summary of the previous class to refresh their minds.
• They miss having a level test when starting a style. Someone could be high-leveled and wouldn’t like to be forced to dance the basic steps.

Conclusions

To conclude, it could be said that the idea of a dance school in a Netflix format could work. However, I agree with the users, it would be necessary to adapt it more like a game to generate a higher engagement. Users could overcome themselves through personal challenges, but also could compete with other users to raise their ranking position. A healthy competitively always helps to maintain the interest and motivation.

To transform the prototype into a real digital product, I planned the actions that would have to be taken. In short term, the basic problems that appeared in the user test should be solved, such as making certain elements of the interface more understandable. In medium term, new content should be developed offering a high-fidelity level test and an accurate and entertaining summary of the last class.

In order to give a complete experience, in long term, the inferface should take a turn into a game that assures users to have an adecuate dance education. A real opportunity for the great dance academies to make themselves be heard, while sharing their professional knowledge in a more entretaining way inside each home.

An the journey comes to its end.

Thank you for reading me! Hope you found interesting the process that I went through to find a solution for the dance field. See you in the following post :)