Overview
VibeJive is a mobile application made for dancers of all levels, made by a dancer herself. This app is my senior thesis project for Mason Gross School of the Arts (Rutgers–University New Brunswick), and was originally going to live in an in-person installation. However, due to the COVID-19 global pandemic, I restructured this app to function as a brand that could be showcased in an online exhibition instead of a gallery piece. Read about this online exhibition more in this article
The app utilizes bright colors, clean minimalist typography, humorous language, and a simple UI/UX design to create an experience that is user-friendly, user-generative, and most of all, fun for dancers of all levels to not only learn about dance more in-depth, but also to engage in dance as an activity that channels creativity and emotion. The goal of VibeJive is to bring together a community of dancers from all different backgrounds, levels, and experiences to educate and understand each other's cultures through the universal language of dance. VibeJive allows for the exploration of different cultures and identities, encouraging understanding and empathy around the world. VibeJive opens dialogue and takes a step towards making people happier and more confident in their abilities. VibeJive creates good vibes for all its users.
Dates: November 1, 2019–May 1, 2020
Tools: Figma, Adobe Illustrator, Adobe PremierePro, Adobe Media Encoder, Adobe After Effects, HTML, CSS, jQuery

Challenges/Goals 
1. To design a UI/UX interface that is fun, user-friendly, and unique towards dance as an activity.
2. To educate and empathize with others by learning about different cultures and their dances.
3. To create a community through dance. 
4. To create a safe space for users to creatively express themselves, free from judgement and pressure to be "good" at dancing.
5. To spread positivity and encourage self-confidence towards users.

Design Process – Research
I started out this design process by building off on my research from my previous project, Dancer World. In my previous project, I research different ways young dancers (mainly collegiate-level) learn dance. I sourced my information through my peers who are dancers, my personal experiences on different dance teams in college, and testing out different ways to learn dance in a digital space.
The ways I built off of my prior research was through brainstorming with peers to come up with different scenarios, creating an archive of different TikTok POVs (Point of Views) for prompt inspiration and music, creating archives from different memes/posts from Facebook groups (subtle asian ravers, subtle asian dating, subtle asian traits, Subtle Depressed People Traits) for prompt inspiration, and dissecting different YouTube videos of dance styles I learned from my experiences on different dance teams (competitive and training) and my experiences at raves.

Design Process – Scope
I developed the scope of the project based on my research and challenges/goals, finalizing on the app using these methods for learning dance: 
Move Like (Prompt)
Gives users a scenario generated by the app. Allows for users to interpret how they would act in the scenario through their own choreography. Users can swipe through prompts by pressing the "New Move" button.
Match the #Mood (Prompt)
Gives users a general mood generated by the app. Allows for users to interpret how a certain mood makes them feel through their own choreography. For more context behind the mood, users should scroll down to see the accompanying scenario that explains it. Users can swipe through prompts by pressing the "New Mood" button.
Match the Vibe (Prompt)
Gives users a song generated by the app. Allows for users to interpret the song's vibe through their own choreography. Based off of this playlist. Users can swipe through prompts by pressing the "New Vibe" button.
Inspo (App-Recommended Dances)
Drop-down menu that gives users recommendations on what dances best fit the prompt of their choice. When users click on a dance, they can learn about the basic information about that certain style (Location of Origin, Emphasized Body Parts, Texture of Dance, Rhythm, and Music). 
It's Alive! (Record Videos)
Allows users to record themselves trying out different dance styles and/or make their own choreography based on styles they learned.
Dance Style Gifs
Gives users a visual on what a certain dance style looks like. Gives users inspiration on how to move their body like they're dancing in a certain style. Captions give the name of the style, the style family it falls under, and video credit.

Design Process – Structure 
After developing the scope for this project, I sketched out a flow chart to flesh out the details regarding the app structure.
Design Process – Skeleton
After developing the app structure, I created some sketches and wireframes for the app.
Design Process – Surface
I wanted the aesthetic choices behind this app to reflect the energy of dance as an activity. I also wanted my aesthetic choices to appeal towards a younger audience (target ages: 10–35), the biggest demographic of people who are actively involved with dance. I resolved these challenges by designing the app around these elements to help make a UI/UX experience that creates an optimal and fun digital learning/creative environment:
Bright Colors
Gives the app a fresh, contemporary feel. 
Gradient Backgrounds
Helps move the eye through text pages, emphasizes brand colors, and creates visual interest.
Minimal Buttons
Visualizes and directs user flow.  
Minimal Icons
Visualizes concepts such as Location, Main Body Parts Used, Texture, Rhythm, Music in an easily identifiable manner.  
Geometric Typography
I used the typeface GT-Walsheim in the weights Medium and Bold for the main typeface. I picked this typeface I wanted something that conveys the formal aspects of dance (i.e. body shapes). For accent type (used in the buttons on prompt pages), I used the typeface DIN Condensed in the weight Bold. For this typeface, I wanted another geometric typeface that pairs well with GT-Walsheim and lets it be the star.
This style guide is the reference I used to design the whole aesthetic of the app, which also helped me in creating an identity.
Design Process – Identity
The identity is the name of the app with shapes in the main brand colors "moving" behind it. This reflects the nature of dance at its core: an activity where the body moves in different ways. To start this process, I sketched out some ideas for a logo:
And then I made some digital sketches on Illustrator. I kept refining until I got the best one.
Final Designs
Supplemental Designs – VibeJive Website
Coded from scratch using HTML, CSS, and jQuery. Gives users information about the features unique to the VibeJive app. Encourages users to dance using this app. Allows users to access Figma prototype.​​​​​​​
Supplemental Designs – VibeJive Promotional Video
2D animation made using Adobe After Effects. Gives users information about the features unique to the VibeJive app. Encourages users to dance by using this app. Allows potential users to see the different types of choreographies they can create by learning different styles from this app.
Supplemental Designs – VibeJive Promotional Stickers
Free promotional stickers made using Adobe Illustrator functioning as a way users can remember this app even when not using it.
Reflection
This project was the most involved project I have done to date, not just with UI/UX and graphic design, but on a conceptual level as well. These are some thoughts I have on this project after finishing it:
On COVID-19 and Restructuring 
Restructuring this project to fit an online platform after preparing for six months for an in-person exhibition was frustrating and a lot of work to do within the span of a month and a half. Looking back, the extra work put in during that 1.5 months made the project stronger on a conceptual and surface level than the project I originally conceived for the in-person exhibition. My original idea was to show the Figma prototype on an iPad and have gallery viewers dance to the prompts in a designated space in the Mason Gross Galleries. I realized because of the pandemic that this project lives more as a brand that has the potential to reach out to lots of people, and the overall message of this app gets hindered by living in a singular space for a limited amount of time.

Responses from Dancers
This project was very well-received by my peers who are dancers. The aspects they liked about this project are the colors, the language, and that it encourages them to get up and dance instead of sitting around. They liked the colors because they said it makes the app interesting to look at and unique because it's something they've never seen before in an app. They thought the language was funny and relatable, and that the prompts made them inspired to go create a dance on their own. Some suggestions I got from these dancers are to: 
1. Add a back button on prompt pages so users can go back to prompts they like (but may have accidentally swiped on).
2. Get better quality videos for some of the gifs used.
3. Make the Dance Style captions on the Dance Style Gif screens take up less space on the page (or be able to click or animate it in) so that you can see the full body of the dancer(s).
4. Add a feature where you can add a new dance style.

Responses from Non-Dancers (Non-Designers)
This app was also very well-received by my peers and family who are not dancers nor designers. The aspects they liked about this project are the same as my dancer peers, which are the colors, the language, and that it encourages them to get up and dance instead of sitting around. Their suggestions for this project were the same as my dancer peers, but they also made these suggestions for me to make this project better:
1. Make it easier to get back to prompts from Inspo pages.
2. Make the navigation of the app after the Dance Style Gifs screens be easier to navigate.
3. Make the device camera accessible from the app.
4. Define some of the slang terms used in the prompts.

Responses from Designers
This app was also very well-received by visiting critics for the Design Thesis show and Design faculty reviewers. The aspects they liked about this project are the same as my dancer and non-dancer (non-designer) peers, which are the colors, the language, and that it encourages them to get up and dance instead of sitting around. They also liked that I was able to make a whole brand around this project and that the amount of work and attention to detail in this project was impressive. Their suggestions for this project were the same as my dancer and non-dancer (non-designer) peers, but they also made these suggestions for me to make this project better:
1. Touch more on the community aspect of dance; create a platform for this app where you can meet other dancers, similar to a Zoom party.
2. It can get easy to get lost. Add a back button or a visual cue to know where your place is in the app ("breadcrumbs"). The way this could be represented is through a minimal back button or a minimal icon (i.e. 3 bars in brand colors that takes users back to the home screen).
3. Map out an in-depth structure for users who want an in-depth experience of this app and a quick structure for users who want to use this app for fun.
4. ID critical touchpoints in regards to different structures: write down what buttons certain users are going to click and write down the goals for this. Aesthetically, this can be represented by thumbnails or hierarchies (i.e. if someone feels a certain type of way, add thumbnails for moods).
5. Figure out a streamlined experience for this app.
6. Show screens of the app on the promotional video.
7. Show screens of the app on the promotional website so that it functions as a walkthrough of the app.
8. Add multiple gifs for a certain dance style. This is to isolate different parts of the body to teach users exactly what to do with those parts of the body.
9. Add a feature where you can share your choreographies with friends on social media, but still be able to keep the learning component.
10. Add a feature where users can submit their own dances. They would do this by submitting basic information about the dance they are submitting (Location of Origin, Emphasized Body Parts, Texture of Dance, Rhythm, and Music) and a gif of the dance in action.
11. Add an editing feature where users can fact-check information.
12. Refine the icons to be more stylized and in-motion. A resource given to me for inspiration was Keith Haring's work.
13. Do beta testing via a Zoom party by sending the prototype out and see if people can follow along with the app.
14. Think about ways to integrate this app to real-life; consider the relationship between body and screen (concept: our attention is divided between our phones and real-life). Some ways that were suggested to me to portray this concept of divided attention was to have less text, more iconography. 
15. Refine responsive elements for the website. 
16. Get the app developed and put on the App Store!

Check Out My Other Works

Back to Top