May I Have This Dance is a dance studio located in Chicago, offering
community dance classes and events tailored to various age groups.
Prior to initiating the project, we held a brief meeting with the founder, Nino,
to familiarize ourselves with his business and gain a deeper understanding of his objectives for the UX/UI redesign project. Nino's primary goals were to enhance the user-friendliness of their webpage and broaden its appeal to a wider audience.
Duration: 4 Weeks
Tools: Figma, Photoshop, Illustrator, Miro, Zoom, Maze, Slack
Team: Amanda, Minnie, Kat, Daniel
My Role: Preparation of Interview Guides, Conducting User Interviews, Research, Competitive and Comparative Analysis, Leading the Direction of Visual and Interaction Design, Prototyping, and Usability Testing.
INTERVIEW
GUIDE
Mind mapping proves to be an invaluable tool for brainstorming topics related to dance studios.
We utilized it to gather inspiration for writing the user interview guide.
INTERVIEW
We conducted remote interviews with three participants via Zoom, recording the sessions and converting them into transcripts that we would later use to synthesize the data.
AFFINITY
MAPPING
Using affinity mapping, we synthesized
the data from our interviews to identify trends that could later be translated into Persona & Problem Statements, aiding our understanding of users' behavior.
NA
Through affinity mapping, we identified trends in the data gathered from user interviews. This enabled us to comprehend users' behavior, goals, needs, and frustrations, ultimately leading us to create a persona named David. David serves as a reference point for developing user-centered design solutions for May I Have This Dance's website.
PERSO
Dave
60 - Chicago, Il - Retired
Dave is a retired high school teacher. He is an outgoing person who enjoys staying active by dancing He regularly attends dance classes and goes to the weekly dance socials. Dave enjoys mastering different dance styles but struggles to find information about upcoming dance classes and when they are being held.
Behaviors
-
Attends West Coast Swing twice a week
-
Uses Facebook (Meta) daily
-
A website with modern and exciting user interface
Goals
-
Find information about the classes scheduled each month
-
Look for current announcements
Needs
-
A calendar with class schedule
-
An easy & familiar website to navigate
-
A website with modern and exciting user interface
Pain Points
-
The current schedule is too difficult to use
-
The website isn't updated with relevant info
-
Overwhelmed by the amount of information on the website
USER FL
OW
From our user interviews, we gained insight into the struggles of May I Have This Dance web users, such as difficulty navigating the website and confusion in accessing dance class schedules and general class information—essential features for retaining web users and encouraging browsing.
Due to time constraints, we opted to begin the project by redesigning the homepage to improve navigation and implementing a new class schedule system. This approach differed from our client's initial vision for the May I Have This Dance website.
Convincing our client of our design decisions required presenting the gathered data, outlining our design process, and explaining our intention to create a user-centric website beneficial for long-term business success.
Following this consideration, we developed the user flow below to guide David along his desired path when visiting the website.
MID-FI
PROTOTYPE
After gathering ideas, we created wireframes using Figma. These wireframes were then transformed into Mid-Fi Prototype Usability Testings to ensure that we were developing a user-friendly product.
SKETCH
Since most of the team members in our group are interested in pursuing UI & Visual Design, I suggested that we hold a studio workshop and critique session. This would allow us to showcase our sketches and design solutions, inspiring each other to create a comprehensive product that reflects our collective effort and satisfaction.
In this section, we've displayed some pictures of the sketches to showcase our design process, along with wireframes that we will use to create a mid-fi prototype for usability testing.
We conducted usability testing sessions with four participants from our close network using Maze.co to identify any pain points users might encounter when visiting the website.
As a result, our users were able to complete 100% of the tasks we assigned them, with one minor concern regarding the functionality of buttons on the homepage.
Similar to our approach with sketching and mid-fi prototypes, we adopted the same methodology during the Visual Design phase, utilizing studio workshops and critique sessions.
Despite encountering challenges in deciding which color palettes would best represent May I Have This Dance as both
a community and a business, we collectively brainstormed ideas. Each team member experimented with several color palettes, aided by a mood board we assembled. After several trials, we reached a group decision to adopt a warm color palette that I had compiled.
This palette was inspired by the six words our client used to describe May I Have This Dance, as well as the ambiance of friendly conversation, familiar faces, and dimmed lighting reminiscent of a favorite local dive bar. Additionally, it drew from the atmosphere of a community ballroom where dancers can freely express themselves on the dance floor.
Recognizing the importance of familiarity, readability, and accessibility for May I Have This Dance's users, we opted
to use the Gill Sans and Roboto typeface for the website. This choice ensures that users can easily navigate and read all
provided information, as Gill Sans and Roboto is commonly used in other web platforms.
COLORS
TYPOGRAPHY
HI-FI PROTOTYPE
In this section, I aim to showcase the newly redesigned May I Have This Dance website alongside the previous iteration, illustrating the progress we've made.
With a user-centered design approach at the forefront of our efforts, we treated inputs from May I Have This Dance's users with utmost seriousness. We ensured their involvement in every step of our design thinking process and considered their feedback in every aspect of our design decisions.
Homepage
During our interviews with May I Have This Dance's users, we found that many had discovered the studio through friends and associates. They often visited the website to stay updated on events and the latest news but encountered difficulties locating this information. With this user pain point in mind, I conducted research on May I Have This Dance's competitors and other businesses offering similar services, such as Yoga Studios and Massage Centers.
Through this research, I uncovered insights indicating that businesses with similar user demographics often feature testimonials on their websites. Therefore, we decided to incorporate a similar feature on May I Have This Dance's homepage to provide users with a glimpse of the community. Additionally, we included sections for the newest updates and upcoming events to help users easily discover this information quickly and efficiently.
New Version
Previous Version
Class Schedule
May I Have This Dance's users also encountered difficulties when trying to access class schedules and information. They expressed frustration about having to navigate multiple websites to find this information. In response to this pain point and to provide a solution efficiently, we decided to design a calendar page system, a familiar and commonly used tool.
The calendar system we designed features state changes that allow users to view the calendar from three perspectives: daily, weekly, and monthly. This feature enables users to easily visualize class availabilities and levels through different color codings. Additionally, users can preview each class's information with a pop-up menu for a more efficient browsing experience.
New Version
Previous Version
Class Registration
May I Have This Dance's users typically have limited knowledge about dance but are deeply curious to learn more. With this in mind, we designed an informational page detailing the variety of dance classes offered by May I Have This Dance. These web pages will feature instructional videos showcasing dance moves, along with informational texts providing details about the class and any prerequisites students may need before registering.
New Version
Previous Version
