ROLE
UX Designer (Research, Visual Design, Interaction Design, User Testing)
DURATION
4 weeks
TOOLS
Figma, Pencil & Paper
SCOPE
Web design, logo design, branding
SOLUTION
CHALLENGE
-Refresh Professional Arts Academy's visual and brand identity.
-Build out the appropriate screens alongside existing Venmo design to integrate the new feature.
-Build out the appropriate screens alongside existing Venmo design to integrate the new feature.
Pro Arts Academy is a performing arts studio catering mainly to children, providing dance, musical theatre, and vocal classes. How do I provide them with responsive website that enables users to book dance classes in bulk?
PROJECT SCOPE
How can Professional Arts Academy Users have an effortless booking experience?
Research: Dance Moms isn't just a show!
SECONDARY RESEARCH
I started with a quick industry overview. Who's attending these studios? What does the competitive landscape look like? Here's a sampling of what I learned:
The industry comprises studios that offer classes for dance and other performing arts, including and not limited to: ballet, jazz, hip-hop, tap, latin ballroom, voice lessons, and acting classes. Some take in extra revenue through selling tickets to performances, selling merchandise, private lessons, and running intensives/summer camps.
The industry comprises studios that offer classes for dance and other performing arts, including and not limited to: ballet, jazz, hip-hop, tap, latin ballroom, voice lessons, and acting classes. Some take in extra revenue through selling tickets to performances, selling merchandise, private lessons, and running intensives/summer camps.
- As of 2019, the market size in the U.S. was $4 billion (IBIS World)
- The industry is highly fragmented, 98.9% of the companies operate from a single
- location, and the top four companies account for less than 10% of revenue ( PR Web)
- 79.4% of dancers and choreographers are female (Data USA)
Secondary research for Pro Arts clarified that the customer base for studios is female-centric, and the market is super fragmented. This emphasized that I should be investigating local direct competitors.
IN A NUTSHELL
COMPETITIVE ANALYSIS
Considering the studio market is so fragmented, local academies and newer streaming services that provide digital accessibility are viable competitors.
This competitive analysis allowed me to determine what features to include that users have come to expect and where to diverge to maintain a unique brand identity.
It was clear that Pro Arts would need a more responsive experience, intuitive online booking, and clear communication about streamed classes to match and supercede competitors.
This competitive analysis allowed me to determine what features to include that users have come to expect and where to diverge to maintain a unique brand identity.
It was clear that Pro Arts would need a more responsive experience, intuitive online booking, and clear communication about streamed classes to match and supercede competitors.
I analyzed local competitors and streaming services that provide equivalent or analogous alternatives for Pro Arts' patrons. I compared their features to illustrate what industry expectations are for studio sites.
IN A NUTSHELL
PROVISIONAL PERSONAS
Using the market research and competitive analysis, I generated some quick provisional personas.
This helped to determine what demographics were important to recruit from for interviews, and to begin considering their pain points and goals.
The key customer segments to focus on appeared to be dancers themselves and their mothers.
This helped to determine what demographics were important to recruit from for interviews, and to begin considering their pain points and goals.
The key customer segments to focus on appeared to be dancers themselves and their mothers.
I recognized the demographic research pointed toward young women/girls who dance and their mothers being the primary patrons of a studio like Pro Arts. These proto personas are guides for interview recruitment and the beginning of the definition process.
IN A NUTSHELL
USER INTERVIEWS & EMPATHY MAP
Focusing on their booking experiences and general expectations of studio environments, I interviewed 5 existing studio patrons based on the provisional personas to assess their similar and dissimilar behaviors and attitudes. A few key questions were:
I determined commonality within the empathy research results through through the below empathy map, I synthesized the empathy research into the following insights:
- Tell me a bit about your personal history with the studio.
- How and how often do you book classes at the studio?
- How do you decide what classes to book?
I determined commonality within the empathy research results through through the below empathy map, I synthesized the empathy research into the following insights:
I found 5 dancers and dance moms to interview about their experience at their studio of choice re: class selection and booking. To determine implicit needs from the interviewees, I assembled the below empathy map to find common pain points and behaviors.
IN A NUTSHELL
which indicated the following needs
These clusters were then synthesized into insights
To have an intuitive website experience that isn't glitchy
Many customers struggle with booking on their studios' websites and resort to calling
To have organized scheduling options with clear updates on potential changes
To be able to book mulitple classes in one go without confusion
Many customers struggle with intense scheduling of dance and other activities
Many customers bulk buy their classes for the entire year or semester
Define : "A problem well put is half solved" - John Dewey
CREATING A PERSONA
The empathy research allowed me to develop a persona that reflected the interviews and secondary analysis, including her goals, frustrations, needs, and motivations. With Cynthia as reference, I could ensure that I was taking Pro Arts' users into account at every subsequent step of the design process.
Cynthia loves enabling her daughter to advance her craft, but really struggles with unclear scheduling and glitchy booking on her studio's website.
Cynthia loves enabling her daughter to advance her craft, but really struggles with unclear scheduling and glitchy booking on her studio's website.
Through empathy research I found that classes are frequently purchased in bulk by dancers' parents. I created a persona that's an amalgam of the parents I interviewed to ground the process in her needs.
IN A NUTSHELL
POV STATEMENTS / HMW QUESTIONS
Using the insights from the empathy map, I generated statements that included the determined user insights and needs. These point-of-view statements encourage focusing on the correct challenges that users are facing. I could then convert them into 'how might we' questions that spark brainstorming solutions to the user needs, bridging the gap between the user's outlook and the deisgner's.
I converted the needs uncovered in empathy research into 'how might we' questions for me to answer through brainstorming and the eventual solution. This sparks actionable ideas!
IN A NUTSHELL
USER & BUSINESS GOALS
Before determining what features to design- and prioritize - I wanted to ensure that the goals of the business were being taken into account.
I drew on my MA in Entrepreneursip to determine the business goals in the venn diagram, and included the user goals from the persona to see if they aligned.
Truthfully, any opportunity to reiterate the user goals is a welcome one during my design process.
I drew on my MA in Entrepreneursip to determine the business goals in the venn diagram, and included the user goals from the persona to see if they aligned.
Truthfully, any opportunity to reiterate the user goals is a welcome one during my design process.
I used my MA degree to zero in on the business goals, acknowledging them and aligning them with the user goals from empathy research. I used this diagram to ensure the solutions I ideated would help both user & business.
IN A NUTSHELL
FEATURE ROADMAP
After brainstorming answers to the HMW questions, I was then able to list all of the viable solutions as features of the Professional Arts Academy site and determine the development strategy.
Within the product roadmap is not only these features, but their categorization based on factors like ease of implementation and priority. The 'must haves' comprise the MVP.
Within the product roadmap is not only these features, but their categorization based on factors like ease of implementation and priority. The 'must haves' comprise the MVP.
The feature roadmap organized the brainstormed solutions/ feautures into priority categories based on ease of and confidence in delivery. 'Priority 1' determined the MVP for this project's timeline.
IN A NUTSHELL
Ideate
SITE MAP
With the feature roadmap completed, it was time to organize the information architecture of the site.
A key part of this stage was the site map, which provides the structure of the site's pages.
You can follow how the user might access several of the features in the roadmap through the navigation bar by using this deliverable.
A key part of this stage was the site map, which provides the structure of the site's pages.
You can follow how the user might access several of the features in the roadmap through the navigation bar by using this deliverable.
Like many responsive sites, it was clear the navigation bar and its offshoots would be pivotal to crafting an intuitive experience. I developed this structure and the rest of the information architecture through this site map.
IN A NUTSHELL
TASK FLOW
If the site map shows the access to the site's pages, the task flow illustrates the actual journey between them to complete a task. As the empathy research demonstrated the need for a thoughtful booking experience, I used a taskflow to examine how this process would look for Cynthia from a couple of different entry points, like signing in before booking.
Going back to the user's needs, I generated these flows that illustrate how they would fulfill those needs using the above site map - like Cynthia booking in bulk through her existing account.
IN A NUTSHELL
USERFLOW
The above task flows were then combined and developed to create this userflow, which shows the many variations the user's journey may have while booking classes and checking out. While each flow culminates in the same checkout process, users might find the class calendar through different means, for example.
While the task flows pinpoint a couple of flows, this userflow encompasses variations in the booking and checkout journey, i.e. if a user checks out as a guest.
IN A NUTSHELL
Design
LOW-FIDELITY WIREFRAMES
Time to sketch. Now that I knew what the user journey looked like, creating the lowest risk template of the site's UI was next on the docket.
This is where the site really started to come into focus.
This is where the site really started to come into focus.
These sketches are the beginnings of realizing the final prototype.
IN A NUTSHELL
MID-FIDELITY WIREFRAMES / PROTOTYPE
After getting the preliminary ideas down on paper, developing mid-fidelity wireframes provided structure that took actual dimensions into account, including tablet and mobile. Here are a couple of pages that made up the wireframes in desktop, and then a responsive page on each type of device.
These pages were then linked together to create a prototype - allowing for user testing of the proposed task flows.
These pages were then linked together to create a prototype - allowing for user testing of the proposed task flows.
Utilizing Figma, I created mid-fi wiredrames that expanded on the structure of the lo-fi but focused on creating something digitally testable.
IN A NUTSHELL
Testing & Beyond
USER TESTING
The mid-fi prototype had to be tested for usability and unforeseen frustrations. This was accomplished through in-person/remote testing with a moderated task:
'You're booking this semester's classes for your daughter Rachel. Please book all of the advanced jazz and advanced ballet classes offered for teens.'
All of the 5 participants in the user test were aged 30-65 and have previously booked dance classes for their children, aligning with Cynthia (our persona).
The following comprised the objectives of the user testing:
-To observe the general navigability of the site.
-To determine what features are helpful to users.
-To determine which features are frustrating for users.
-To identify any unforeseen issues that prevent users from completing the task.
'You're booking this semester's classes for your daughter Rachel. Please book all of the advanced jazz and advanced ballet classes offered for teens.'
All of the 5 participants in the user test were aged 30-65 and have previously booked dance classes for their children, aligning with Cynthia (our persona).
The following comprised the objectives of the user testing:
-To observe the general navigability of the site.
-To determine what features are helpful to users.
-To determine which features are frustrating for users.
-To identify any unforeseen issues that prevent users from completing the task.
The prototype was tested for usability and unforeseen issues by 5 participants analagous to Cynthia through a moderated task involving the checkout flow.
IN A NUTSHELL
TEST FINDINGS & AFFINITY MAP
Testing provided important quantitative data:
Test Length: 3:30-5:30, Averaging at 5 minutes.
Task Completion Rate: 100%. All participants were able to complete the task.
Error Free Rate: 100%. All participants encountered areas of the test where they got stuck in one way or another, but these were all problems with the prototype or slips- like forgetting the task specified the difficulty of classes, or not noticing the actual number of classes selected.
The affinity map below shows the observations from the user test grouped together by common comments/issues.
These provided insights from which I derived recommendations for improvement.
Test Length: 3:30-5:30, Averaging at 5 minutes.
Task Completion Rate: 100%. All participants were able to complete the task.
Error Free Rate: 100%. All participants encountered areas of the test where they got stuck in one way or another, but these were all problems with the prototype or slips- like forgetting the task specified the difficulty of classes, or not noticing the actual number of classes selected.
The affinity map below shows the observations from the user test grouped together by common comments/issues.
These provided insights from which I derived recommendations for improvement.
Quantitative data from testing included 100% task completion and error free rates. Potential improvement was noted through qualitataive observations collated through an affinity map.
IN A NUTSHELL
Recommendations
Insights
60% of the participants struggled to either find the advanced labels or didn't even notice the different difficulty levels
Make selected classes more visible by bordering the selected classes in a thick stroke
Participants struggled with noting how many classes they selected
Make the class level more prominent in the hierarchy of the class card by making the type a heavier weight
RECOMMENDATION IN ACTION
This is before and after the implementation of the second recommendation "Make selected classes more visible by bordering the selected classes in a thick stroke". Although this change in the greater UI scheme of the site seems small, it can be really impactful for users.
Below is the before and after the application of the second recommendation for improvement. There is a marked difference in the visibility of the selected classes.
IN A NUTSHELL
VISUAL DESIGN (LOGO & UI KIT)
After iterating on the mid-fidelity prototype, it was time to define the visual design of the site and incorporate the branding- including a logo redesign. This part of the process called on my previous experience in content creation and branding to establish a cohesive aesthetic direction, starting with determining the brand attributes.
I determined specific attributes to ground the visual design against as it was developed.
IN A NUTSHELL
Professional
Approachable
Artistic
Modern
Cultured
Inspiration for the redesign actually came from the original logo (shown below)- the teal/cyan read as cultured and artistic, but still professional if used deliberately. While collating a moodboard, line drawings of dancers repeatedly resonated as artistic but professional and modern. And I paired two typefaces ('Audrey' and 'Spartan') to communicate a cultured feel while maintaining a modern sensibility. These elements all contributed to the new logo, featuring line-drawn legs en pointe in 2nd position, reminiscient of the letter A- for 'Academy'. The new logo is cleaner, more contemporary, incorporates the type that the user encounters throughout the new site, and is more responsive.
Every visual design choice, (type, iconography, color, etc.) referenced the above attributes. Here is the new logo accounting for these characteristics as inspired by the original.
IN A NUTSHELL
Using the brand attributes and new type and color discoveries, I fleshed out the rest of the visual design including several modular elements like CTA buttons and drop down menus. These are compiled into this UI Kit, a tool that encapsulates the visual design of the interface for future handoff and reference.
This UI Kit compiles all of the major visual design decisions alongside specific modular components for easy reference and handoff.
IN A NUTSHELL
HIGH FIDELITY WIREFRAME / PROTOTYPE
With the UI kit and mid-fidelity wireframes complete, it was then possible to apply the former to the latter to see the final product for this project: a high fidelity prototype. This would take the user through the same class-booking journey from the usability test as realistically as possible without the site being fully developed. Below are some of the high-fi wireframes and a video of the prototype in action. Feel free to click through it yourself here.
By applying the UI Kit to the mid-fi prototype, I had made a hi-fi prototype. See the difference below and a walkthrough of the booking/checkout flow!
IN A NUTSHELL
MEASURING SUCCESS
In any design project it's imperative to determine criteria that indicate whether the design made active change.
Quantitatively, I would measure whether there is an increase in online membership and how the ratio between online booking and in-person booking changes.
Quantitatively, I would measure whether there is an increase in online membership and how the ratio between online booking and in-person booking changes.
I would measure the following KPIs: increases in online membership and online booking (as opposed to in-person).
IN A NUTSHELL
REFLECTIONS
I hadn't anticipated learning quite so much abut user-centered design through grappling with calendars.
The empathy research made it abundantly clear that users book classes in bulk, and also struggle to keep tabs on their kids' schedules. In truth, most studios use an embedded booking platform geared toward making the studio managers' lives easier, but not their customers.
In my growth as a user-centered designer, I saw this as an opportunity to change this process to better serve studio patrons. By designing a booking system that is a calendar in and of itself (rather than having separate pages for schedules and booking), I fostered a user experience that takes into account their need for clear scheduling.
Though this is a bit more difficult to design in a responsive way for different devices, I believed serving the user was worth the struggle. The first and final responsive mid-fidelity wireframes of the calendar booking page can be seen below. The final version features collapsible days of the week, filtration options, and class tiles.
The empathy research made it abundantly clear that users book classes in bulk, and also struggle to keep tabs on their kids' schedules. In truth, most studios use an embedded booking platform geared toward making the studio managers' lives easier, but not their customers.
In my growth as a user-centered designer, I saw this as an opportunity to change this process to better serve studio patrons. By designing a booking system that is a calendar in and of itself (rather than having separate pages for schedules and booking), I fostered a user experience that takes into account their need for clear scheduling.
Though this is a bit more difficult to design in a responsive way for different devices, I believed serving the user was worth the struggle. The first and final responsive mid-fidelity wireframes of the calendar booking page can be seen below. The final version features collapsible days of the week, filtration options, and class tiles.
The main challenge of this project was using my user-centered brain to improve upon the embedded booking platforms used by studios.
I learned that calendars are tough to design responsively, especially when combined with a booking platform! Below you can see the difference between the initial design and the new version which is more responsive.
I learned that calendars are tough to design responsively, especially when combined with a booking platform! Below you can see the difference between the initial design and the new version which is more responsive.
IN A NUTSHELL