Sway is a mobile app that uses UC Berkeley AI research ↗ to generate a video of how you dance any chosen dance. My goal was to create UI and additional marketing assets:
At the time when I was hired, a draft version of the app was already build, my role was to improve initial design. In addition, it was necessary to create an app icon, corporate colors and improve user flow, create promo assets and more.
People from 18 to 35, active users of mobile entertainment apps: Snapchat, TikTok, Instagram, Giphy.
Mobile app interface. Each variation of the app interface was recreated in Figma and tested on a real device screen. In order to create optimal interaction with the app, I created a user flow graphic.
Focus groups analysis allowed me to analyze and adjust the interface in accordance with the results.
While working on the interface, I worked closely with programmers, helping them translate the design into code.
Colors. Based on this analysis most popular apps among the target audience, I created a color wheel that allowed me to find which color scheme to choose for the app. The task was to make this app visually familiar to the audience, but at the same time slightly different in the palette.
Therefore, a yellow-orange palette was chosen.
App icon. Initially, the task was to create an icon that reflects: dance, movement, but at the same time represents a computer and artificial intelligence.
First I have an idea to create a dancing person or a robot. For this, I made many freehand sketches, chose the best that were discussed with the team. After that, the best options were translated into a vector using Sketch and Adobe Illustrator.
Each option has been tested on a real device to make sure that the icon has a fairly clear contrast, is clearly visible among others and has clear contours. I wasn't happy with the result and decide to change the icon to more obstract form and made an icon based on first letter of the app name. New version of the app icon represents a "s" letter, a digital avatar, and a thumbs-up gesture at the same time.
Layout for print ads. The layout was created in Adobe Illustrator. To make sure that the font size of each element has readability, I used a regular office printer on which I printed test versions of the layout and compared the result.
Video editing and animation. In order for users to learn how to use the app as quickly as possible, I created videos for onboarding. All videos were created in Apple Motion and Final Cut Pro.
Website. I got a task to create a webpage that fit all the content vertically. I created HTML/CSS code ↗ with an adaptive layout, which scale the page horizontally and vertically at the same time. If I made this site today, I would use React and GatsbyJS.
The app was released on the App Store ↗.
Sway Launches #CoolRanchDance in Partnership with Doritos: Join the AI Dance Challenge!↗.
The app entered the top of the best apps in the USA, ahead of Disney, Netflix, Hulu:
Doritos launched a special promo page ↗ where you can download the app and see examples of its use.