Product Design

Tempo: The Comprehensive Mobile Dance Education App

Role

Product Designer

Target Audience

Dancers of all skill levels and ages

Focus

Finding a new skill - helping dancers of all levels learn and/or improve their skillsets.

Contributions

Tempo was my introduction to the UI/UX landscape during my time at DesignLabs UX Academy. Despite the initial challenges, it proved to be a very rewarding experience. Throughout this endeavor, I had the opportunity to design a dance education app from inception to fruition. From conducting thorough research to refining branding and creating wireframes, it was a journey that allowed me to hone my skills and embrace new perspectives.

01.

Research Plan Overview

Challenges + Solutions

Problem

Dancers at every level encounter difficulty in accessing resources that facilitate growth beyond physical movement. This challenge is particularly pronounced for individuals lacking access to local dance studios and a supportive community.

Proposed Solution

Introduce a mobile dance education app that provides resources:
- Short video lessons from various dance educators
- 1 on 1 mentorship with world renowned dance instructors
- Podcast-Style, videos that go in depth into a variety of dance related topics

Identifying Goals + Objectives

Research Goal #01

Learn about current obstacles for people interested in learning how to dance.

Research Goal #02

Learn about the motivation guiding more seasoned dancers in their career.

Research Objectives: “Newcomers”

  • Understand any obstacles people face when trying to get into dancing

  • Learn what topics related to dance people are interested in learning about

  • Determine what style of lesson plan/curriculum is best fit for dance students

Research Objectives: “Seasoned”

  • Understand the current cons of traditional dance education

  • Determine what style of lesson plan/curriculum is best fit for dance students

  • Understand how this product fits in the current dance industry/community

  • Understand the motivation and goals of dancers pursuing it as a career.

*Newcomers: Dancers that are new to their dance journey, mainly categorized as “beginners”
*Seasoned: Dancers that have confidently reached “advanced” and/or “professional” level.

02.

Discovering Insights

Market Analysis

By analyzing market trends and consumer preferences, I gained valuable insights into the distinct positioning of Steezy Studios, BB360, and Beniga Capsule. Through thorough research, I identified their unique offerings and target audiences, allowing for a deeper understanding of the competitive landscape within the dance education market.

Key Takeaways

  • All lack 1 on 1 Mentorship features

  • Majority focus solely on Choreography based education

  • Navigation on all platforms are easy to use

Interviews

Over the span of a week, I conducted 5 interviews with a variety of dancers, ranging in skill level, age, and location. These interviews played a significant role in the research process, as I gained a better understanding in the current state of dance education first hand.

Participants

  • Dancers eager to learn more about dance related topics (i.e leadership, history, etc.)

  • Dancers wanting to improve on their current skill level

  • Dancers lost in how they can further their career in this industry

Affinity Mapping

Following the interviews with dancers, I conducted affinity mapping to distill and organize their feedback into meaningful clusters. This comprehensive analysis provided a holistic understanding of their needs and preferences, serving as foundation for informed decision-making and solution development moving forward.

Key Takeaways

  • Dancers love 1 on 1 mentorship and connecting with others

  • Dance Education is best when its fun, intimate, and caring

  • Online platforms can be crucial for those without access to local resources

  • Dancers want to improve every aspect of their dance knowledge

Personas

In addition to previous analysis and research, I created 3 distinct personas representing the intended users of Tempo. These personas correspond to the beginner, intermediate, and advanced levels of dancers.

03.

Understanding the User Journey

Storyboard

Prior to diving into the design process, I created storyboards to map out the user journey and interactions within the platform. These storyboards served as a foundational step, allowing me to visualize and understand how users would navigate through the platform and engage with its features.

Sitemap + User Flows

Using valuable research insights and storyboards, I developed intuitive sitemaps and user flows for seamless platform navigation.

04.

Defining Tempo’s Visual Identity

After concluding primary research for Tempo, the next step was to establish the visual identity for the brand.

Logo Sketches

Values and key words that led early logo iterations: Growth, Learn, Inspire, Educate, Passion, Connect

Logo Kit

Logo Breakdown

Color Palette

For this color palette, the goal was to be colorful and dynamic while focusing on a shade of green. The thought process of the green was to encourage growth and concentration when navigating through the site. For the accent colors, I would utilize them more so only on the neutral colors so the contrast is high and the site still maintains that goal of being eye-catching.

Typography

During my search for font pairings, I decided on typography that evoked a minimal, modern, and unique experience. N27 was utilized as the primary font to add character to the product while still being legible. Proxima Nova was chosen in order to maintain a clean and accessible experience on a wide variety of use cases.

05.

Designing Solutions: Elevating Dance Experiences

In the wireframing process for Tempo, I initially developed low-fidelity wireframes to rapidly iterate and refine concepts, emphasizing layout and functionality. Incorporating peer feedback and user testing, I then iterated on these wireframes before transitioning to high-fidelity versions, adding detailed visual elements and interactions to accurately represent the final design.

Low Fidelity Wireframes + Peer Feedback

Initial High Fidelity Wireframes

User Testing

    • 3 Tasks were administers to 6 users for in-person testing

    • All tasks began with Log In/Sign Up to ensure 0 issues when trying to access the app

    • User is able to complete task

    • User completes task with 0 errors

    • User completes task in a timely manner

    • Low difficulty scores (1-10)

    • Positive user feedback

    • Users enjoyed the current state of my high fidelity prototypes

    • Each task was completed quickly by the users with 0 errors

    • The branding achieved the desired positive feedback

    • All difficulty levels scored below 4

High Fidelity Wireframes + Feedback

06.

Final Designs

Welcome Flow

Homepage

Mentorship Flow

Lessons

Podcasts

Profile + History + Saved

07.

Conclusion

  • Being my first complete UI/UX project, I learned a variety of new skills from research and analysis to iterating and prototyping in a foreign software.

    It was a challenging feat to say the least, but I am proud to say that I finished this project with more experience in a new industry and more confidence than ever as a designer.

  • Although I had expertise during the iterating and branding phases of this project, I definitely struggled during the research stages and wished I could’ve done a couple things differently.

    Just to name a few:

    • I wish I recorded the audio of my interview sessions to pull out some more insight and quotes

    • I would manage my time more efficiently, as I spent a little bit too much time on the branding and visual design phases

    • I would have loved to explored a desktop version where I utilized more elements of my UI kit

  • Check out the prototype: here

Other Work

Product Design

Transforming Full Swing Golf’s Online Presence

Graphic Design + Art Direction

A New Era: Westlake School for the Performing Arts Reimagined