Deliverable
A responsive website
Role in the Project
UX Researcher, wireframes, mockups, and prototype designer
Timeline
2 Weeks
Platforms and Resources Used
Figma, Adobe Suite, Rotato, Human Interface Guidelines, Material Design, and Figma Community Members
THE PROBLEM
Dancers, directors, choreographers, and dance students are constantly taking notes and journaling in different loose papers and notebooks. They usually misplace these notes, which makes learning and the application of feedback challenging. At the same time, dance students need a platform in which they can access resources easily.
THE SOLUTION
Introducing JotDance a responsive website for the dancer, choreographer, dance student. The website is a central hub of information and a place for note taking and journaling.
The Process
I started this process by doing research on other platforms in the market. At the same time, I conducted interviews with different key stakeholders that fit the essential problem description. I was interested in understanding how real users experience the solutions that are in the market and how these solutions frame their work and the user experience.
Key Interview and Research Insights
No dance centered offers
Although there are a number of dance websites and journaling platforms. There are not platforms online that are centered in the market audience that this website plans on targeting.
Potential users grow exponentially
There is a growing number of dance students in the USA. According to research conducted by statista.com the number of dance students grew from 21.4 million to 26.2 million in the last decade.
All in one place
Interviewees mention that is challenging to keep notes and corrections in one place making recollection and growth difficult. They mention the need for a platform that allows them to write notes, add images and videos, and share those insights with others.
Moving into the digital era
Most of our lives have moved into a digital form. This is the exception when talking about dance education. Dance has remained pretty much in the same way as it has been for the last 100 years.
Research Insights Outcomes
The initial research process and set of insights allowed me to identify the following basic user needs that I wanted to address:
A platform in which dancers can take notes and label them for faster recollection.
A platform that allows social interactions, where users can share information and post messages
A platform that is a central hub if dance related resources and information.
Base on this information I created two main user personas:
Priya Mehra
ABOUT
Age: 38
Profession: Dance Instructor
Racial Background: American Indian
Motivations
Priya teaches ballet to a number of students between the ages of 14 to 50. She likes to take notes in class about her students so then she can give effective. written and verbal feedback.
Pain Points
Priya needs a platform in which she can take notes, edit them, and share them with her students. Keeping track of a number of physical journals and notebooks is not only taking a tool on her back as carrying books is heavy but also is difficult as she is normally changing bags.
User Persona
Malcolm Freeman
ABOUT
Age: 13
Profession: Dance Student
Nationality: American
Motivations
Malcolm has just started to dance and he is eager to learn technique and get better. He is constantly taking notes in class and researching for videos and content for new tricks. He attends a dance studio that has multiple performances a year.
Pain Points
Malcolm struggles at keep track of dates and corrections in one place. He normally forgets important deadlines as he does't look at his notebook before class.
User Persona
Paper Wireframes
I created the first set of wireframes following the information architecture that I envisioned during the creation of user personas and user journeys. They needed to contain areas for journalling, notifications, resources, and searching.
Digital Wireframes
To design the digital wireframes, I mixed the elements that I liked from the paper wireframes into a layout that has multiple options for the user. It was also important that the user has multiple opportunities to create entries and recollect prior made ones.
Low-Fidelity Prototyping
This low-fidelity prototype comprises two main layouts: a tiered cake design for the homepage and a bento box arrangement for resources. Additionally, I've incorporated elements of both layouts in certain sections, such as journaling. There, the map view is presented in a bento layout, while the journaling content adopts a tiered cake structure.
Branding
I initiated the branding process by conceptualizing and crafting a brand identity for the project. It was crucial to ensure that the branding appealed to a broad spectrum of ages and genders, evoking excitement and a welcoming atmosphere. This became especially evident during the research phase, as many existing options in the market tended to be either uninspiring or overly feminine.
The color palette was curated to evoke excitement, particularly resonating with younger users through vibrant, toy-like saturations reminiscent of gaming aesthetics. Simultaneously, neutral tones were incorporated to establish balance and imbue a sense of maturity, catering to older users' preferences.
The name 'JotDance' and the logo, featuring a dancer on a papyrus, were intentionally crafted to evoke inspiration for users to write about dance. Furthermore, the colors were selected from the aforementioned palette to maintain consistency and cohesion with the brand identity.
Fonts were selected to merge Serif and Sans Serif typefaces, blending modern technology with the timeless essence of journaling.
After crafting the initial mockup of the homepage (on the left), I evaluated the utilization of color and negative space. The overall appearance of the page seemed cluttered and overly youthful, potentially alienating older users. With a focus on color and space in mind, I developed a second version (on the right), which ultimately became the predominant aesthetic of the site.
Usability Studies'
Key Insights
Too many decisions
Users mentioned how pages are busy with information and potential decisions that they need to make. Is easy to get distracted from the primary goal.
Juvenile
Adult users mention that the site feels too juvenile to them and that it's challenging to identify with it.
Colors
The site seems to have difficulties balancing colors and pulling users attention to the sections that matter the most.
Home menu
The home menu is missing elements in order for users to access features easily. They are forced to remember where things are.
Usability Study Insight Outcomes
The insights obtained during this phase presented me with a critical decision: to either persist with my original concept or prioritize user needs and reassess my design. Opting for the latter approach, three major outcomes emerged:
Firstly, I recognized the importance of simplifying the site's layout and enhance clarity, reducing distractions for users.
Secondly, while my initial adjustments to the color scheme were a step in the right direction, I realized the need for further refinement to fully align with user preferences and expectations.
Lastly, I acknowledged the necessity of establishing clear display of the information architecture to facilitate seamless navigation for users across the site.
Based on this reflections, I created new paper wireframes:
New Mockups
I developed new mockups to reflect the redesigned layout that originated from my paper sketches. While maintaining consistency with the color palette, typeface, logo design, and selected iconography, I simplified certain sections from the original version and introduced entirely new layouts for others.
Impact
Innovating and bar setting
Creating community
Encouraging personal reflection and growth
Educational
High-Fidelity
Prototyping
The new high-fidelity prototype of JotDance caters to both experienced adult dancers and young dance students more effectively. Enhancements were made to the user flow to streamline the journaling process. Additionally, I redesigned the text box to provide users with more formatting options and simplified access to the labeling system, reducing the number of steps required.
Key Features
Find notes easily
Users can find previously created notes by accessing the calendar feature or by created labels on
the search section.
Journaling in the center
The homepage is welcoming and encourages the user to start journaling, which is the solution to the main user problem that drove the creation of the site.
Creating Community
Users can share thoughts, notes, and insights with others by using the message feature.
What is next?
If this journaling platform were to become a reality, I would take the following steps to continue improving the user flow and features:
-
Collaborate with developers, engineers, and other designers to gather feedback on the design and features.
-
Explore integrating AI into the journaling experience, with an emphasis on labeling, recollection, and its integration with resources and sharing.
-
Expand system integration to incorporate studio or dance company portals, allowing for enhanced communication and collaboration between communities.
-
Conduct ongoing usability studies to understand how users are experiencing the system in real-world applications.
Mockups
After finalizing the branding decisions for the site, I proceeded to create mockups for each wireframe. During this process, I prioritized the 'bento box' layout, drawing inspiration from it for all sections.