Swing dance, the core and main focus of the Wannadance app. Even though the app will eventually expand to other dance styles, it was essential that the app’s look and feel had a strong relation to the themes that have been defining Swing Dance for almost a century: Class & Etiquete. Strong lines, gentlemen in suits, ladies in dresses, and all that jazz. All of these had a direct influence in the choice of colours, typography and the creation of our illustrated characters.
At this initial phase of the design process, our ideas are still blooming and require a lot of work. Wireframing serves to establish the relationship between elements, allowing you to decide on the app’s navigation, on the imagery and on all its calls to action. It worked as a tool that allowed us to improve the user flow and to make design decisions without consequence.
Subtle and classy are two words that should best describe Wannadance’s color palette. To achieve subtlety, we opted for a discrete palette with 80% black and a variety of light greys. Class was portrayed with the use of gold to represent the art deco movement that originated around the same time that Swing Dancing became a popular trend.
The font used for Wannadance is GT Walsheim. Inspired by the lettering of Swiss poster designer legend Otto Baumberger from the 1930s, it’s friendly yet precise characteristics made it a perfect solution for Wannadance. Reminiscent of the 1930s while being friendly, ideal for the social purpose of the app.
Creating our characters
Influenced by 1920s cartoons, our characters were created as an homage to those period ads that work so well in delivering an instruction by smoothly portraying emotions. Due to the visual impact and the need to have so many permutations, our character was first sketched by hand and then converted to vector using Adobe’s Illustrator.
Taking full advantage of the characters we created, in three easy steps we can quickly explain how the app works. 1. You feel like dancing. 2. You search for nearby dancers. 3. You find your dance partner and invite them to dance. With these onboarding illustrations the user can easily understand the purpose of Wannadance and make a conscious decision on whether or not to create an account.
Creating an account, or logging in should be an effortless task. However, influenced by the strong visual universe that represents the app, we opted for a less standard, yet straight forward start screen, using two, edge to edge, clicking areas that allows the user to make his decision: Create an account or log in. Once he does, the process takes a more habitual turn allowing you opt to create an account using Facebook or email.
Wannadance is a community of real dancers. This means that its about you and what makes you unique. Therefore, as you create an account it is essential to the foundation of the community that your favourite dance styles, your favourite songs and dancefloors, are defined on the go. That way its easier for you to invite someone for a dance that is better suited to you.
Find your ideal dancer partner that is closest to you. That is the core of the app and also the first automatic action that takes place the moment you log in. It immediately gives you a list of the nearest dancers with a quick resumed profile information about each one. See someone you like? “May I have this dance?”
Once someone accepts your dance request, there will be a match and you can start a conversation to organise your amazing dance night together. Via chat, you can exchange contacts, and get to know each other before you meet later on the dancefloor.
All your dance requests neatly organised in one place. Quickly browse the cards, discover more about the person and decide whether or not to accept their dance request. Once you do, you will immediately start a conversation with them.
Created with the sole purpose of directing the user to the app/play store, the landing page serves as an interactive platform that immediately asks you a simple question: Do you wanna dance? By accepting this formal request the user can quickly access the app store or browse the app’s main features.