Kat Arroyo (She/Her)
May I Have This Dance
Overview
My team and I were brought on by the owner and manager of a local social dance studio, May I Have This Dance, to help with the studio's website. May I Have This Dance opened its doors in 2002 on the northwest side of Chicago and has been thriving ever since. The problem is, the website had also remained the same since 2002 and was in need of a redesign.
May I Have This Dance has so much to offer! The owner was adamant about keeping all the information on his website that was there, so we focused on the information architecture as well as updating the look and feel of the site.
Duration.
6 weeks
Role.
Me (UX Researcher)
Amanda (UX Researcher)
Minnie (UX Designer)
Daniel (UI Designer)
Tools.
Figma
Miro
Optimal Workshop
Maze.co
Method.
User Interviews
Card Sorting
Wireframing
Prototyping
Usability Testing
User Research
Stakeholder Discusion
The stakeholders had some guidelines to go by, but otherwise gave us free rein. After having a few meetings with the owner, we understood he wanted his website to keep all of its content, but to be arranged in a way that was more user friendly. He also wanted to address the website's dated feel as it hadn't been changed since the early 2000's. His hope was to attract more users, especially younger users, and get them signing up for classes and dancing in the studio.
User Interviews
We obtained a list of dancers from the studio that volunteered for user interviews. We wanted to hear from the users themselves and discover their pain points when using the website. We asked the users questions like:
-
Why did you choose MIHTD as your dance school?
-
How do you feel about the MIHTD website? What do you like/dislike about it?
-
What do you use the MIHTD website for?
-
How do you feel about the schedule page?
Synthesis
Our user interviews were extremely insightful and provided valuable information about the current website and user experience. After transferring our notes to sticky notes and arranging them into an affinity map, we were able to see some clear and strong trends. We had several key findings that we needed to address:
-
Users were overwhelmed by all the information on the website, hindering them from finding the class schedule page
-
Users prefer websites that are more modern and up to date
-
Users have difficulty finding what they are looking for on the website
-
Overall, users feel frustrated by the MIHTD website
Affinity Map
Persona
After synthesizing the data from our user interviews, we were able to identify the key issues our users were facing. We were also able to get a clear sense of who our user was. Meet Dave:
Now that we understood Dave's needs, we were able dive into the problem space and focus our approach. For the scope of this project, we would focus on the information architecture, the schedule page, and the visual design of the website. We used the following problem statement and 'how might we' statement to guide us.
Information Architecture
Card Sorting
Since information architecture was a major concern, we decided to create a card sort to redesign the global navigation. We wanted to see where users would expect to find all the available information on the dance studio's website. We asked 20 participants to arrange the different parts of the website's navigation into a way that made sense to them. These participants represented the typical user of the website, ranging from ages 20 to 65.
From the card sort data, we were able to propose a new global navigation represented by this site map:
User Flow
Now that we had the new layout of the global navigation, we could start to visualize how Dave would move about the website to find the class schedule page and sign up for a class. We created a user flow to represent Dave's actions and decision points while using the website.
Mid-fi Wireframes
Using all of our research, tools, and methods, we were ready to go into several design studios and start sketching some solutions. Our big takeaways were that the users and the dance studio needed a website that was modern, familiar, reflected the values of the studio, and they needed an easier way to view the class schedule to register for classes. Once we collaborated as a team and worked through these sketches, we transformed them into testable mid fidelity wireframes on Figma.
Home
Class Schedule Page
(Calendar View)
Class Schedule Page
(List View)
Class Information Page
Usability Testing
Overall, our wireframes tested really well. We asked 4 participants to test our wireframes through a series of tasks. All of our tasks had a 4/4 success rate, meaning all of the users completed the tasks with little to no difficulty. There were not any misclicks, however we did gather a lot of information and suggestions from our users about the look and feel of each page. We used these suggestions to edit our frames before moving on to our hi-fidelity wireframes.
Each task and our edits are outlined in the frames below.
Task 1: The user will discover the landing page
We asked:
What are your thoughts and feelings about this page?
1
2
3
Our users wanted:
Implement more white space between the different elements on the page.
Move the "Find a Class" button towards the top of the page for more visibility.
Clearly label the "Why People Love Us" element by enlarging the title and moving it closer to the picture.
1
2
3
Task 2: User will view the schedule page
We asked:
How would you find out when classes are held?
1
Our users wanted:
Add time scale on the left-hand side of the class schedule.
1
Task 3: User will view the schedule through different state changes
We asked:
How would you view this schedule in a different format?
1
Our users wanted:
Add a weekly and a daily state change option.
1
Task 4: User will select a dance class to view more information
We asked:
How would you view more information about a class you want to sign up for?
1
Our users wanted:
Reduce the amount of information in each class element.
1
Task 5: The user will register for a class
We asked:
How would you sign up for this class?
1
Our users wanted:
Add a register button toward the bottom of the page so it is easy to access instead of scrolling back up to the top.
1
Style Guide
In order to give the website a familiar and modern feel, we created a style guide to use in our high fidelity designs. Users described the studio as welcoming and friendly, so we took this into consideration when choosing the color pallet and typeface.
Prototype
Using everything we learned from our user research, usability testing, and the new style guide, we were able to put it all together and demonstrate our solutions and what the website could look like in our high fidelity prototype. Take a look at the before and after of the May I Have This Dance website below.
Before
Reflections and Next Steps
Throughout this project, I really got to practice different methods to get buy in from stakeholders. We were often met with resistance from the studio owner and it was important that we found ways to show him the data from his users as well as the positive impact some of our design decisions could have on business and getting new dancers in the door.
To further this project, I would like to conduct usability testing on the filtering options we included on the schedule page. I would also like to do more user research on the current registration process as this was a major concern for both the business owner as well as the users.