Overview
Dance Studio wants to put its best foot forward.....
Katy Bollywood Beats (KBB) was founded in 2016 by Poonam Singh Moriwal. Poonam's vision behind KBB is to create a dance community where kids and adults can learn Bollywood dance and have fun while learning. She wants to increase her reach and spread the spirit of Bollywood dance.
The Challenge
KBB currently has an outdated website and lacks the dance studio's spirit.
Poonam has to communicate with her current students and potential clients through Facebook and Whatsapp. Poonam has to remind the clients to pay monthly fees.
Poonam has to communicate with her current students and potential clients through Facebook and Whatsapp. Poonam has to remind the clients to pay monthly fees.
The Opportunity
Rebrand
• Create a responsive website and a new logo that embraces the essence of KBB.
• Create a responsive website and a new logo that embraces the essence of KBB.
Design a payment portal
• A payment portal for easy Digital self-service.
• A payment portal for easy Digital self-service.
Responsive web design
• The website provides all the information required to sign up for the classes.
• The website should display the spirit of the dance studio through the images and videos of their past performances on multiple devices.
• The website provides all the information required to sign up for the classes.
• The website should display the spirit of the dance studio through the images and videos of their past performances on multiple devices.
The Process
01. Empathy
Research Overview
• What, where, when, and how do people want to enroll in a dance studio?
• Are they able to book classes online?
• What devices do they prefer to search or browse dance studio websites?
• Find out pain points while looking for dance studio information.
• Analyze the competitor's website and determine what they are doing right and what they are not.
• Are they able to book classes online?
• What devices do they prefer to search or browse dance studio websites?
• Find out pain points while looking for dance studio information.
• Analyze the competitor's website and determine what they are doing right and what they are not.
Competitive Analysis
I looked at direct and indirect competitors in the Katy Bollywood Beasts Dance Academy’s surrounding areas. Some of the dance studio’s websites had an attractive hero image, while some lacked the same. Some websites' visual hierarchy and architecture information were weak as I had to look for CTA’s and other class information.
I made a list of the essential features of dance studios to see what the competitors were catering to the users. This study gave me an idea of what other studios are already using to make an easy and desirable user experience.
Understanding the User - 1:1 Interviews
I conducted 1-1 interview in person. I was able to understand the needs and pain points of the users. Their direct feedback gave me insight and information that I had not considered. I realized that different users have different approaches to completing the task.
Takeaways
1. Easy navigation with clear CTA’s
2. Information about the studio and the instructor is crucial for the users.
3. Validation of the studio through testimonials and image and video gallery.
4. Easy online enrollment and trial classes.
5. Less text and more visual representation.
6. Detailed information about the services offered.
2. Information about the studio and the instructor is crucial for the users.
3. Validation of the studio through testimonials and image and video gallery.
4. Easy online enrollment and trial classes.
5. Less text and more visual representation.
6. Detailed information about the services offered.
Empathy Map
Research insights
1. Responsive website.
2. Intuitive interface with an attractive landing page and hero image.
3. Easy onboarding and booking classes online.
4. A well thought information architecture for the ease of the user to access the desired information.
5. Gallery showcasing actual photos and videos of dance performances are important points.
6. Design should follow the visual hierarchy.
2. Intuitive interface with an attractive landing page and hero image.
3. Easy onboarding and booking classes online.
4. A well thought information architecture for the ease of the user to access the desired information.
5. Gallery showcasing actual photos and videos of dance performances are important points.
6. Design should follow the visual hierarchy.
02. Define
Persona
Firstly, I gathered the research information and developed two personas to understand users’ needs, experiences, behaviors, and goals.
Meet Divya Singh
Divya is a busy mom of two and is looking for a challenging dance workout studio as a stress buster. This persona was created based on the patterns uncovered in the users' interviews and empathy mapping.
Meet Kavya Pai
Divya is a busy mom looking for a dance studio for her daughter. She wants a studio that will provide opportunities to perform on stage. This persona was created based on the patterns uncovered in the users' interviews and empathy mapping.
Roadmap
Based on the users' research and project goals, I created the features' roadmap to identify and prioritize the features that can be solutions to Katy Bollywood Beats Dance Academy users' goals, frustrations, and needs.
I started to put together the information architecture of the site. The defined vital features for the site helped me create sitemap, task, and user flows to show how the website will flow.
Sitemap
User Flow
I created task flow and user flow to show the persona's (Kavya Pai) potential steps when she arrives at the Katy Bollywood Beats Dance Academy website. I created a happy path where Kavya could finish her task for a digitally seamless experience. Kavya’s task is to enroll her daughter in a class. Generating this user flow helped me understand which pages I need to build in low-fidelity wireframes.
03. Ideate
Mood Board
The process of rebranding was very challenging. I created a mood board, which helped me drive the color palette. Since it’s a Bollywood dance studio, I wanted the color palette to represent ethnicity. I asked the client which colors and images caught her eyes the most. It gave me a direction to create a color palette.
The client wanted a strong, graceful, and attractive logo. The client in our meeting told me she had no preconceived ideas about logos and asked me to present a few options. Since I didn't have any direction, I designed logos into three categories—contemporary, traditional with a modern twist, and traditional. The client liked the contemporary logo, and then I further developed it.
UI: Logo and Ui Kit
Wireframes
To create wireframes, I referred to the users' research to address the users' pain points, needs, and motivations. Initially, I hand-sketched out several different layouts for the home page. Once I finalized the elements and direction of the homepage, I digitized the sketch.
Key design considerations
1. It was important that I kept the UX best practices to promote a user-friendly and intuitive site.
2. Clear and Easy Navigation.
3. Impressive Hero image
4. Enroll Now CTA / Call Us CTA
5. Book a free trial Class CTA
6. Class schedule
7. Testimonials
8. Gallery
9. Clear information about the classes offered with fees mentioned.
10. Information about the instructors
2. Clear and Easy Navigation.
3. Impressive Hero image
4. Enroll Now CTA / Call Us CTA
5. Book a free trial Class CTA
6. Class schedule
7. Testimonials
8. Gallery
9. Clear information about the classes offered with fees mentioned.
10. Information about the instructors
Desktop And Mobile Wireframes
While sketching, I prioritized displaying the information sections based on the user interviews and competitive analysis.
1. Hero Image: From the research interviews, it was clear that the hero image was the key attraction for the parents. Parents mentioned that they like actual photos of the students performing. Hence I decided to add multiple hero images of different age group classes.
2. About the studio: Parents had also mentioned that they like to know about the studio and its approach. Hence it became my next priority to provide information about the class. The client wanted a video of the in-house dance classes to speak about the dance classes.
3. Classes: I created an opportunity for the users to view the different age group classes.
4. Testimonials: From the research, I learned that it is pertinent for the parents to read testimonials as they want to see what other parents have to say about the studio and the instructor. Therefore I created a carousel of testimonials for the users to read.
5. Image Gallery: In the interview, users mentioned that they like to see videos and images of the students performing on the stage. At the end of the landing page, I have created a carousel of current students' dance performances.
6. and 7. I added buttons at intervals to reduce scroll time and give users ample opportunity to view class schedules, book trial classes, and register for the dance class.
04. Prototyping
From the wireframes and UI kit, I created high-fidelity wireframes for prototyping. I created a journey for the users to search and enroll in a dance class.
Task: The user needs to find a dance class that suits their needs and age group and enroll in the dance class.
Task: The user needs to find a dance class that suits their needs and age group and enroll in the dance class.
New website design catering to the client's need to portray Bollywood dance flavor.
The current website lacks Bollywood dance flavor and actual photos of the studio performance.
05. Testing
Number of participants: 3-5
Age Demographic: 20-40
Personality trait: Prefers quick information on the mobile device. All are looking to sign up for classes for their kids.
Remote testing over a video call using the screen share option and think-aloud protocol.
Age Demographic: 20-40
Personality trait: Prefers quick information on the mobile device. All are looking to sign up for classes for their kids.
Remote testing over a video call using the screen share option and think-aloud protocol.
Test Objective
• Test the overall usability and the ease of navigation throughout the website.
• Test if the users can finish the task and the effort and time to complete the job.
• Test if it is easy to locate all the necessary information required to make decisions to complete the task.
• Identify any areas of the website that cause confusion or difficulty to the users.
• Test if the users can finish the task and the effort and time to complete the job.
• Test if it is easy to locate all the necessary information required to make decisions to complete the task.
• Identify any areas of the website that cause confusion or difficulty to the users.
Affinity Map
An Affinity map was created to find patterns and statistics for areas for improvement.
Prioritization Matrix
Prioritization Matrix was created to identify and prioritize which iterations will be made first depending upon importance and urgency.
Reflection
Katy Bollywood Beats Dance Academy responsive website is my second project. I was involved in every step of the design process from start to finish. I learned much from the project while working with a local business owner. Working with a client brings its positives and challenges. I learned how to communicate user-driven concepts and design and work collaboratively with the client. The biggest takeaway from this project is that I had to learn how to balance the stakeholder's goals and cater to the users' needs. I thoroughly enjoyed working on this project.
