UX DESIGN INTERNSHIP • 6 MONTHS

Artboard 4.png

Dancejo is an early-stage B2C SaaS start-up that aims to build an online dance platform to virtually teach and learn dance. 

Frame 698.png
 

Overview 

About the startup
Dancejo is an early-stage B2C SaaS start-up with a small team of 12 people. The core product focuses on improving the experience of teaching dance online. The platform helps dancers build professional school profiles, host their dance school online and share assignment videos after every class. 

About the team 
During my internship, I was part of a small, cross-disciplinary team with 8 amazing people. I worked closely with founders, product managers, engineers, and the marketing team.

Role 🙋‍♀️

UX Design intern

Duration ⌛

6 months, October 2020 - March 2021

Tools 🛠️

Figma, Illustrator, Photoshop, Miro

Jump to the case study
 
Artboard 10.png

Being the only Product Designer on the team, I wore multiple hats and handled a variety of responsibilities. I got the opportunity to do a bit of everything. 

User research and interviews 

  • Conducted user interviews and interacted with early adopters to define product goals and vision

  • Hosted product demos for potential users 

  • Conducted usability testing sessions with existing product users to improve the core product experience

Visual design

  • Created custom illustrations and revamped the company's landing page

  • Designed iconography for the player panel

  • Redesigned the user interface by changing the colors and typography

  • Proposed designs for dark theme

Product design 

  • Shipped new features based on customer feedback for both web and mobile app

  • Designed user flows, wireframes, and high fidelity responsive prototypes

  • Assisted the Product Manager in defining the product roadmap and strategy while also maintaining the product backlog

Establishing a design system

  • Initially, developed a comprehensive UI style guide for the initial stages of the product 

  • Later, established a design system and created reusable components for faster development and optimized workflow by following Brad Frost's Atomic Design principles

Artboard 11.png

During my 6 months, the product was in the early stages of development and we shipped multiple features to increase user adoption. I created end-to-end user experiences based on customer feedback and worked on product features from ideation to implementation.

A glimpse of some interesting projects I worked on —

Public school profile pages for dance teachers 

A dance portfolio for schools to build an online presence, share their story and attract new students. 

Visit a mock public school page

Challenge 
While YouTube, Instagram, and Facebook are widely used by dance schools for marketing, how might we bridge the gap between what these platforms offer and what dancers really want to showcase about their schools?
How might we build a school public page that is exclusively made for dancers? 

Approach and solution 
To design a profile page exclusively for dancers, the first step was to understand what is it that that dance schools want to share to get more students. After synthesizing the insights from users and product goals of scaling, we decided to launch the MVP of this feature. The first version allows teachers to showcase their performances, add batches and host free demo classes. 
 

Redesigning the landing page to drive more users

Designed a landing page that resonates with the energy of dance and looks premium to appeal to dance teachers. 

Visit the live site

Approach
From the different personas of users that engaged with the platform, we decided to focus on converting dance teachers and schools through the landing page. 
As professional dancers, they have great attention to detail and a keen sense of aesthetics. To appeal to such a target audience, the landing page had to look premium and resonate with dance.

Process
Considering the time constraints, we had to fast-forward the conventional design process. After understanding more about the target audience, I directly started developing visual themes for the landing page by exploring different layouts, colors, typography, imagery, and illustration styles. We decided to go with a sophisticated, clean, and dark-themed landing page with custom illustrations.

Management of students submissions by the teacher

Designed the user flow for a dance teacher to view all student submissions and evaluate the video assignments 

Frame 71.png

Challenge
Once a teacher shares an assignment video with the entire batch, how might we design a user flow for the teacher to easily manage all the student submissions received?

Solution
Organizing the submissions into three categories makes it easier for the teacher to get an overall idea of the student's participation and manage the submissions. The teacher can easily click on any student's submitted video and evaluate it. 

Dancejo mobile player
Optimizing the experience of learning any choreography and practicing it on your phone

Case study below

 

CASE STUDY 

Optimizing the Dancejo player experience for mobiles

What is the Dancejo web practice player?

The practice player has unique features to practice dance online. Any learner can practice next to the dance instructor's pre-recorded video by seeing their video side by side. The player features allow users to flip the video right and left, see their own video and allow users to learn in slow motion. Users can also record their dance routine and submit it to their dance instructor for feedback. 

Frame 697.png
Frame 696.png

Defining the problem

How might we ensure the best practice experience on a mobile?

How might we optimize the usage of space on a smaller screen?

Understanding how a user interacts with the mobile while  practicing dance

​

  • Users generally place their mobiles 2-3 ft. away from where they are dancing

  • They record their videos and then come close to see their recording.

  • They usually record multiple videos at the same time 

  • The back camera captures higher quality video than the front camera, so sometimes users dance while facing the phone's backside. 

  • Users occasionally ask someone else to record the video for them. 

Approach taken based on insights

​

  • Considering the mobile device can be used in two modes, portrait and landscape - the first step is to identify the most optimized ways of showing two videos parallelly on a small screen 

  • The playback of the recording should be quick and easily accessible because users would keep coming back to the mobile to view their recording multiple times in one session. 

Desktop - 4.png

Finalized for the MVP of the mobile player based on time constraints and development cost

Establishing the user flow

Wireframing

Desktop - 5.png

High fidelity prototype

 

ffff.png
 
qw copy.png

Reflecting on the experience...

As this was my first industry experience in the UX space, it was very exciting for me as there was a lot of on-the-job learning. Working on the early stages of the product, I developed an understanding of the agile methodology of development and learned how product decisions are made considering the user needs, business goals, and tech constraints. As I worked closely with developers and designed user flows from ideation to execution, I realized how important design systems and reusable components are to ship features faster. On a professional note, I learned how to collaborate in a cross-functional team, navigate through ambiguity independently, and most importantly, embracing failure to succeed faster.