Connecting dancers with teachers and peers
Project Overview
Qoria is a budding social media platform that aims to connect dancers with teachers and peers. Dancing has always brought people together, and Qoria aims to take that to the next level by providing a network for teachers and professional dancers to share remote, asynchronous classes and by using visual tools to help correct movement.
Original Sign-Up Page
Our Sign-Up Page
The Challenge
Qoria reached out to the General Assembly UX Design program because they wanted help refining their user experience, increasing ease of use, and developing some new features to help connect and engage users. To do this, it was requested that our team use aspects of gamification and crowdsourcing intelligence.
Our Process
Research
Heuristic Evaluation
To determine the app’s current usability we ran a Heuristic Evaluation, which helped identify usability problems within the current design.
Splash Page
Brick background interferes with text, buttons, & logos, creating accessibility issues for the visually impaired and competing with relevant information.
Error Prevention
Membership types lack explanations, presenting an opportunity for users to err by signing up for the wrong membership type.
Aesthetic & Minimalist Design
Profile
Consistency & Standards
Profile features are a mix of public and personal items - this information architecture is unclear; is this a public or personal page?
Nav bar icons do not follow conventional placement
Aesthetic & Minimalist Design
Low contrast on selected nav bar element creates accessibility issues for the visually impaired
Consistency & Standards
Home
Aesthetic & Minimalist Design
Brick background interferes with buttons and text
Recognition Rather Than Recall
Elements of the upload interface appear disconnected due to visibility of the brick background in between input fields. This detracts from the clarity of the page’s function, creating possible friction for the user.
Settings
Consistency & Standards
Input fields with center aligned text and round corner radiuses do not follow design conventions and create the appearance of buttons
Consistency & Standards
Stylistically inconsistent input fields make the these look like secondary CTAs
Aesthetic & Minimalist Design
Gradient button blends into the background and lacks contrast, creatine issues for the visually impaired
Takeaways
On our initial evalutation we found multiple instances of accessibility issues, some confusing information architecture, and some deviations from design conventions & standards that create confusion for the user. This presented us with a few opportunities to increase the ease of navigation for all users, and make the app accessible to a wider audience.
User Interviews
Qoria had conducted some preliminary research among two main user groups: students & instructors. My team set out to dig a little deeper into the needs and motivations of these two key user groups.
Hover on the boxes to find out what we learned:
After conducting User Interviews we synthesized the information using an Affinity Map, which revealed some common themes in the needs and motivations of the dancers we interviewed.
Key Themes
My team and I began this project under the assumption that Qoria would be for professional dancers with a strict & driven practice schedule. The responses we got from User Interviews challenged that assumption by showing us that the majority of users dance for fun & community, and turn to virtual learning to supplement in-person lessons.
Define
Proto-Personas
We used the aggregated data from our User Interviews to construct two Proto-Personas. We did not have access to Qoria's full research data, so we used the data from our own research with the data that Qoria gave us to construct Proto-Personas; one for the student user base and one for the instructor user base.
Meet Michelle Castro. Michelle wants to make friends and socialize, learn the basics before attending an in-person class, and find quality instructors. How might we help Michelle engage with the community before committing to an in-person class?
Meet Danielle Myers. Danielle wants to make dance playful and accessible, make students feel welcome regardless of skill level, and give every student the attention they need. How might we help Danielle manage the varying needs of students with different skill levels in her classes?
Problem Statement
Synthesizing the primary needs of our two key user groups revealed that the needs of our two personas are well aligned; the student wants to learn from quality instructors and socialize, and the instructor wants to make every student feel welcome in the community and provide quality, personalized instruction.
Dancers need a way to connect, stay motivated, and gain inspiration online in a way that supports their in-person dancing.
Aligning With Business Goals
With the needs of the user defined, it was a good time to align the user needs with the needs of the business. This helped us to prioritize features that solve problems for Qoria and its users, maintain scope, and focus our energy on solutions that will support core goals
How Might We...
Keep students actively engaged in their classes, so they are not just learning in a vacuum?
1
2
Provide opportunities for student - student interaction?
3
Keep students who want to learn dance coming back to the app in a valuable and healthy way?
Ideate
Brainstorming
Clearly defined goals are the framework of any good brainstorming session, so with our targets in sight we conducted a Mash Up exercise. For those who haven't conducted one before, a Mash Up is an ideation method where participants pick two broad, unrelated categories and combine from the two lists to create as many new products, services or experiences as they can.
Mash Ups emphasize quantity. Starting with as many varied and often absurd ideas as possible paves the way to finding a unique and innovative solution. Below you can see the five ideas that we believed were the most viable and valuable.
We presented these ideas to some key stakeholders at Qoria and collectively decided to move forward with dance challenges and user subgroups. Based on user feedback and our initial audit of the app, we also decided to redesign the sign up flow in order to remove the burden of membership definition from the user.
Prototype
Mid Fidelity Wireframes
After putting together some user flows to define the steps users would take to achieve their goals, we began digitally sketching out our ideas in these mid fidelity wireframes.
Public Facing Profile
The Original
Our Solution
2
3
1
2
3
1
1
Profile features are a mix of public and personal items - information architecture is unclear. Is this a public profile or a personal dashboard?
1
All features are public facing profile features. Additionally, different profile types exist for the two types of users - instructor and student. Each profile has clear information and CTAs based on the type of interactions and posts available for each user group.
2
Low contrast on selected nav bar element creates accessibility issues for the visually impaired.
2
Higher contrast creates better accessibility for the visually impaired.
3
Nav bar icons do not follow conventional placement.
3
Nav bar icons follow design conventions and familiar placement for user expectations.
Home Page
The Original
Our Solution
1
2
3
1
3
1
2
2
1
Brick background interferes with text and buttons. This creates accessibility issues for the visually impaired.
2
Elements of the upload interface appear disconnected due to visibility of the brick background in between input fields. This detracts from the clarity of the page’s function.
3
This page follows common UI conventions of a feed page, yet only has the ability to post. In contrast, there is no page for viewing posts or classes within the app.
1
Although not visible in the mid fidelity prototype, we recommend discarding the brick background in favor of a solid color or gradient.
2
Elements of individual posts are connected by container boxes or defined by dividers and labels, creating clarity of page function. Additionally, we added a "Create" button that follows common design patterns and user expectation.
3
In addition to the "Create" button, we also added tabs to further add clarity and control to what the user is viewing on their home page.
Sign-Up
The Original
Our Solution
1
2
1
2
1
Brick background interferes with text and buttons. This creates accessibility issues for the visually impaired.
2
Membership types lack explanations, presenting an opportunity for users to err by signing up for the wrong membership type.
1
Although not visible in the mid fidelity prototype, we recommend discarding the brick background in favor of a solid color or gradient.
2
The potential to sign up for an incorrect membership type is replaced by a short questionnaire. This allows Qoria to gather quick and easy data on user intentions and guides users to the correct membership type without the cognitive load of deciding.
Style Guide
We kept Qoria's original color palette in the same family but removed the brick background to help with accessibility & legbility.
1
Usability Testing
To test our designs we conducted moderated usability tests over zoom. Participants were asked to complete three separate tasks: sign-up for an account, create a group, and create & send a dance challenge. During this process, participants were encouraged to think out loud and share their thoughts on all aspects of the flow.
Post-completion, participants were asked to rate their experience of each flow on a scale of 1-5, with 5 being usable and delightful, and 1 being unusable.
Sign-Up Questionnaire
Key Observations
-
Participants wanted to be informed of how much of the sign-up questionnaire was left, we needed to add some visibility of system status.
-
The questionnaire is mandatory, and some participants wanted the option to skip it. We needed to add some user control and freedom.
100%
Task Completion Rate
4.1/5
Average Usability Score
Average Time to Complete
1m 01s
Actions Taken
1
1
2
Add option to skip questionnaire
Add progress bar
2
Create a Group
Key Observations
-
Some misleading copy and labels caused participants to think that some labels were buttons and vice versa.
-
The option to skip adding a photo was placed in a nonconventional location, causing users to wonder what was being skipped.
-
In both of these examples, we needed to maintain consistency & standards by following platform conventions.
100%
Task Completion Rate
3.9/5
Average Usability Score
0m 57s
Average Time to Complete
Actions Taken
1
1
2
2
Misleading copy. "Group Settings" implies more than one setting. Participants found this confusing, and we decided to remove it entirely.
Proximity of "Skip" icon to notifications icon was confusing for participants. Move to conventional location beneath "Next."
Create & Send a Dance Challenge
Key Observations
-
Participants didn't understand the purpose of a challenge, or even what it is. We needed to provide help & documentation.
-
Participants did not realize the length of a challenge can be changed. We needed to increase the flexibility & efficiency of use.
100%
Task Completion Rate
4/5
Average Usability Score
0m 48s
Average Time to Complete
Actions Taken
1
1
2
This explanation page was added, users will see it before they create their first challenge.
Participants did not realize this could be changed - add an affordance to signify interactivity.
2
Iterated Prototype
Reflections
I believe that the solutions we designed are a good start to achieving Qoria's initial goals of connecting and engaging users, while also advocating real user goals and needs. Our updates to the interface give the app a new sleek & modern feel, while simultaneously increasing trustworthiness and usability.
Relying on Jakob Nielsen's 10 Usability Heuristics was a great way to audit the efficacy of the beta designs, and also gave us some assumptions that we were then able to verify through testing.
Acting as Project Manager was a learning experience for me, and I gained some valuable experience advocating for UX, supporting a team, maintaining deadlines, and communicating with stakeholders.
If we were to continue working with Qoria I would want to continue to build out opportunities for student-student interaction, refine the UI that we built, and brainstorm new ways to promote engaged learning.