Sway promo on App Store Twitter page
FOR: HUMEN Inc. SAN FRANCISCO, CALIFORNIA.

UX/UI work for AI-powered mobile app.

Goal

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:

  1. Create an iOS app interface
  2. Create an app icon
  3. Create a website
  4. Create a layout for print ads
  5. Create video clips and animations

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.

Target Audience

People from 18 to 35, active users of mobile entertainment apps: Snapchat, TikTok, Instagram, Giphy.

Research

  1. Color palette analysis of popular mobile apps to attract nessesary target audience
  2. Analysis of prototype tests on focus groups

What I Did

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.

User flow

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.

Color palette

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.

Initial icon concepts

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.

Sway icon sketchesFinal version of the icon

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.

Postcard design

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.

Result

The app was released on the App Store .

Sway 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:

Top of the best apps in the USA

Doritos launched a special promo page where you can download the app and see examples of its use.

Portfolio.