joyfully new.png

Project Timeline:

May - November 2019 (Ver 1)

December 2020 - January 2021 (Version 2)

Passion Project


Solo Project






User interviews

Market research

Low-fidelity wireframes

High-fidelity wireframes

User personas

Information architecture


Being on three different dance teams at UIUC has taught me a great deal about how to become a better dancer through constant practice and review. Even though all of these dance groups focus on different dance styles, one factor that connects all of them is the sincere love for dance. When we dance, we don't simply focus on what looks right - we also focus on what feels right.

When we use dance as a form of self-expression instead of constantly comparing ourselves to what looks "right," we are fully able to embrace what makes dancing so enjoyable in the first place.

Version 2 Screens

X - 3joyfully ver 2.png
X - 11joyfully ver 2.png

Warm-Up - Users can focus on fundamental skills and stretches before learning choreography. Although this section is labeled as a "warm-up," users can revisit this section any time for a "cool-down" or to strengthen their fundamental skills.

X - 7joyfully ver 2.png
X - 10joyfully ver 2.png

Learn - Users can add videos that they would like to learn choreography from by uploading their own from their phone's library or through a link. Videos are ordered by the date that they are opened, but the date shown is when the video was added to Joyfully. When a video is selected, the screen enters a horizontal mode with a settings menu. This menu includes 3 options: mirror the video horizontally, speed up/slow down, and add a video for side-by-side comparison.

X - 5joyfully ver 2.png
X - 6joyfully ver 2.png
X - 12joyfully ver 2.png
X - 2joyfully ver 2.png

Reflect - Users can add their own videos to reflect on by adding a video from the Learn library or by uploading their own video. They can also share this video with other users by linking them to the feedback page. This screen can also be viewed horizontally. Like the Learn menu, videos are sorted by the date which they were opened last.

External Interactions

Email Template 5.png

A critique I received was to consider ways to encourage users to keep revisiting the app, such as notifications and emails. I was inspired by Duolingo's methods of encouraging language practice.

User Interviews

I interviewed dancers with varying amounts of experience to understand why they enjoy dancing. Based on these interviews, I was able to pinpoint three main categories as to why people enjoy dance. 

One of the largest insights that I gained from these interviews is that dance isn't just about the physicality of learning and executing the choreography - it is also about one's mentality, the connections they gain, and the emotions that they feel. 

One of the main subjects that was mentioned in these user interviews was confidence. Confidence grows from how one feels about their dancing and being comfortable with themselves, which doesn't have anything to do with how "perfectly" they can dance. Because of this, I wanted to center Joyfully more around self-reflection and give the user tools that they can use to grow as a dancer both mentally and physically. 

Revisiting "ChoreoMe"

I reflected back on my first UIUX exploration, ChoreoMe.

Its main components were:

  • Learning

  • Reviewing 

  • Critiquing 

While these are very important aspects of dance, its view was from a purely technical perspective -- there were no motivations that enticed people to keep dancing, other than to keep practicing to dance "perfectly." 

ChoreoMe's dance journey also focused on comparing oneself to original choreography videos in order to improve. A beginner dancer ay not be able to pick up on comparison details as well as an experienced dancer. To assume that a dancer can improve by simply comparing themselves to others is unfortunately idealistic.


Instead, an effective way to improve one's dancing is by strengthening foundational techniques. Most beginner dancers do not know where to start with foundations because they are not given the tools to practice them. One of the changes that I wanted to make for Joyfully was to incorporate exercises in order to strengthen foundational techniques. When dancers are able to apply these foundations to their movements, this enables them to become more comfortable with themselves while learning choreography. 

Market Research

I searched "learn to dance" on the App Store to see what kinds of dance apps already exist. After going through each app, I realized that there is a lack in apps that raise self-awareness of one's dance growth. The apps listed below feature tutorial videos made specifically for the app, but there is little freedom for people who want to learn choreography outside of the ones featured. 



  • Users can learn speed up and slow down videos to learn at their own pace

  • Instructors create their own videos that explain choreography step-by-step

  • Keeps progress of classes that the user has started and which they have not

  • Variety of different dance styles and instructors

  • Offers video tutorials for basic techniques


  • App is free to download, but is not functional at all without a paid subscription ($99.99/year or $19.99/month)

    • Users might invest their money in actual dance classes at this price​

  • All choreography is pre-made, so users cannot learn other choreography that is not made for the app




  • Users can follow along with pre-made videos for popular songs

  • Users can make their own choreography to share

  • Choreography has easy, medium, and hard modes

  • Users can record videos directly from the app

  • When following a dance video, there are highlights at the bottom that let the user know which moves are coming up


  • Limited songs on the app

  • Choreography is only created by other users on the app

  • No speed up/slow down/mirror options 

  • Advertised as a dance community app- not for self-growth




  • Users can follow along with tutorials different dance techniques by instructors

  • Front and back view tutorials - no need for mirroring

  • Beginner, intermediate, and advanced modes


  • Users cannot learn their own choreography

  • Variety of different dance styles, but still limited 

    • Hip hop, salsa, bachata, footwork, house​

    • Missing: Ballet, jazz, contemporary, etc.

  • Videos are not mirrored

  • Only 15 videos on the app

Screen Shot 2019-11-05 at 3.23.48 AM.png

Flow Map + Wireframing

I created a flow map to get a sense of what basic functions I wanted for the app and the components that go into them. I used terms that appear friendlier (ex: "Reflect" instead of "Critique") to decrease intimidation. 

joyfully map.jpg

Study for Video App Layouts

The layouts for video apps are mostly similar, so I studied layouts from Vimeo, Dailymotion, and YouTube. When users use Joyfully, I wanted the layout to be familiar to apps that they have used before for less confusion. 




  • Text is different sizes for hierarchy

  • Timestamps are included

  • Clean layout for easy reading


  • All text is bold

  • Only 2 lines for title text - when there is overflow text, it is indicated by ellipses despite having room for 3 rows

  • Left-aligned timestamps are separate from other text to the right of the preview image

  • Dates and views of each video are unknown



  • Hierarchy of text with bold, thin, and grey

  • Video share button to the right of each video

  • Timestamp is right-aligned and closer to the text

  • Text is top-aligned to the preview image

  • Dates inform when the video was posted

  • Sorting categories are clearly displayed at the top


  • Video views are unknown

  • Video share button takes up more space than it should on its own (it could be vertically oriented)



  • Views, date, creator, and title are all present

  • More space for long titles with 3 rows

  • Hierarchy for text with different two text sizes and colors (black vs light grey)

  • Light grey background instead of completely white for better readability ​

  • Time stamps in bottom right corner of video preview

  • Share button is vertically orientated to allow for more space for text


  • Even though a lot of video information is available, it may look cluttered

When deciding what information to include for Joyfully's video lists, I decided that only the title, date, and duration of the video were the most important for the app's function. For better readability, I was inspired by YouTube and Vimeo's top-left aligned text, as well as YouTube's light grey background for more comfortable readability. 

Low-fidelity Wireframes (version 1)

Android - 1joyfully.png
Android - 9joyfully.png

I created low-fidelity wireframes to implement the functions I wanted the app to have, as well as the general layout after studying the information hierarchy of YouTube, Vimeo, and Dailymotion.

Android - 11joyfully.png
Android - 4joyfully.png
Android - 13joyfully.png
Android - 6joyfully.png
Android - 2joyfully.png
Android - 8joyfully.png

Version 1 Screens - Notable Changes from Version 2

Android - 16joyfully medium.png
Android - 3joyfully medium.png
Android - 4joyfully medium.png

A change that I implemented in the version 2 of the app was to add titles for the menu at the bottom, which are missing in version 1.

Android - 3joyfully medium.png
Android - 17joyfully medium.png

In version 1, users can add videos to the "Learn" page by the '+' button at the bottom right, which expands to allow options for users to upload their own videos or paste a link from the internet.

Android - 13joyfully medium.png
Android - 6.png

For videos in the 'Reflect' section of version 1, comments partially block the video on the right side when in horizontal fullscreen mode. In version 2, comments are only visible in portrait mode.

Android - 7.png
Android - 8.png

When users select a choreography to learn, the toolbar with options to mirror, adjust the speed, and compare videos are hidden in version 1. Version 2 is adjusted to account for video width and video scrolling accessibility.

Project Recap

For this project, I wanted to focus more on how the user can enjoy and be motivated to use app rather than simply focusing on function.

To do this, I explored:

  • The Love of Dance - why do people dance/why do they keep dancing?

    • Interviewing dancers of different backgrounds and experience to find out what they value

  • Existing Apps - apps specific to dancing and general video apps

    • Research opportunities in the market and keep a consistent layout in relation to familiar apps​

  • Visual Design - text placement, hierarchy, color, shadows 

    • For clear and aesthetically pleasant design

Future Explorations

After talking to peers and recruiters, this is some of the feedback that I would like to focus on as I continue to work on this project:

  • If this app were to actually be developed, what is some of the back-end work that would go into it? Talk to developers about what is and isn't possible.

  • Try to make a working prototype that dancers can actually test, and then see what improvements could be made  from their real-time feedback.

Through this project, I re-evaluated the user experience compared to the version of this concept, ChoreoMe. While focusing on what makes dance enjoyable, I investigated the visual layout of different video apps. I also experimented more with color and readability compared to ChoreoMe. The ChoreoMe prototype was created using Adobe Xd, so with this project, I also had the opportunity to become more comfortable with Figma. While I challenged myself to experiment more with visual interface design for this project, there is still a lot more than I have yet to learn.