Dancemaker

Shaping the future of dance education

Timeframe

  • September 2016

    July 2018

Roles

  • Product Manager
  • Design Principle

Tasks

  • UX Research
  • Prototyping
  • UI Design
  • Microcopy
  • Teaching

Tools

  • Sketch
  • Invision
  • Firebase
  • Python
  • XCode

Summary

Working hand-in-hand with students, teachers and administrators, I led the concept and development of an app for 92Y Dance Education Laboratory (DEL) to advance their mission of bringing dance into every New York City classroom.

I carefully guided the project from concept to implementation by facilitating user research, iterating through a series of interactive prototypes, modeling and developing a content database, designing a visual identity with cross-platform mobile interfaces, overseeing development, and leading app-related professional development classes for the community.

Challenges

The great unknown

This was a project largely without precedent. In order to workshop its hypothetical features with the community, we devised approachable entry-points and clear boundaries for the conceptual space so everyone involved felt comfortable to engage and contribute.

Boots, meet straps

Our shoestring budget necessitated a creative approach to interactions and content strategy. We sought efficient solutions to each objective without negatively impacting the quality of user experience or design polish.

Establishing context

DEL provides dance education training to teachers and students, empowering them to design and lead lessons for many kinds of classrooms and studios.

The DEL model is built with a clear structure and rationale, which I interpreted into a series of proposals for digital interaction through a process of research and collaboration.

The proposals served several purposes:

  1. Educate the client on the design lifecycle
  2. Identify requirements, dependencies and roles
  3. Provide a budget and timeline

Grid of pages depicting proposal document
Excerpts from one of several proposals

Listening & learning

At the onset of our design process, we worked with a panel of professional advisors to establish goals and determine avenues of concern. I led a series of discussions where we whittled our extensive initial proposal down to a clear, purposeful scope.

The most important change we made was to reduce the features of our MVP, focusing in on the “exploration” and “development” components of DEL's 7-part lesson structure. We made this change for two reasons:

  1. Teachers each have a unique way of working on and running lessons so it’s unlikely a turn-key lesson building walkthrough would satisfy most of our users.
  2. Reducing complexity in this case increases flexibility of application, an especially significant gain for an app designed to expand creative thinking and encourage imagination.

Exploring interactions

I assembled a series of wireframes and interactive prototypes to communicate the flow of interaction through several primary funnels. These funnels were meant to address the needs of our educator personas.

As our research evolved, I adjusted these prototypes to re-prioritize touchpoints, mitigate pain points and reinforce the underlying principles of DEL’s method.

We used Invision to share clickable prototypes with the team, which made for easy updates and pain-free behavior demonstrations.

A grid of 16 plain UI screens
Views from an early MVP prototype

A colorful grid of 11 different UI screens
Views from a prototype exploring new content

Finding the words

I crafted a tone for the app based on the DEL brand to inform the writing of help screens, UI labels and listings descriptions. This language was improved incrementally as our users provided feedback.

The niche lexicon of dance education posed another writing challenge: can microcopy bring casual users into relationship with esoteric concepts? What does it take to write language that is clear, precise and inclusive?

4 app screens with colorful graphics and short phrases
Early help screens

As with most questions, the answer came from our community. I talked with a breadth of users from expert to unfamiliar to better understand how they think about — and just as importantly how they talk about — the sequences we were building out.

From stakeholder conversations I established semantic bridges from familiar to unfamiliar terms. This helped us craft clear language that could reach several distinct groups, including dancers without teaching experience and teachers with no relationship to DEL.

A table of terms describing how phrases bridge the familiar and unfamiliar
Excerpt from bridging terms

4 colorful onboarding screens with illustrations
Onboarding sequence

Oblique Strategies

As the application’s features began to coalesce, I noticed a recurring pattern of approach that reminded me of something I’d experimented with before, Brian Eno and Peter Schmidt’s Oblique Strategies. Strategies presents a method of encouraging lateral thinking by subverting the prototypical relationships among ideas and actions. It helps us break out of our usual ways of thinking.

I sketched out a feature called the “Idea Machine” that would source thought exercises from the DEL community as an extension of the app’s main workflow. When I presented the feature to our team, we realized it could incorporate suggestions from the NYC DoE Blueprint for Dance, a document we'd been working to incorporate somehow.

The resulting module (now known as "Tips & Tricks") offered a novel, non-linear way for teachers to brainstorm institutionally validated lesson objectives for a given K-12 age cohort.

Three screenshots depicting the tips and tricks feature (originally idea machine)
Tips and tricks

Building content

After arriving at specifications for a minimum viable product, I extrapolated placeholders into an information architecture with a supporting content strategy the community could engage with.

Working directly with students and teachers, I built out a database of vocabulary terms. We held sessions at 92Y to brainstorm hundreds of action words and categories for the 'movement sentences' feature. This was also an opportunity to share our prototype with a broader group of teachers and discuss their impressions.

Subsequent the brainstorming sessions, I wrote python scripts to generate JSON documents from plaintext lists and CSV exports and uploaded everything to Firebase for easy API access.

Screenshot of portions of 3 spreadsheets
Organizing content

import csv
import json
import itertools
import pandas as pd
from time import gmtime, strftime

data = {}
with open('sources/dance-maker.json') as json_data:
   data = json.load(json_data)
	
# ------------------------
#    Actions & Themes
# ------------------------
themes = {}
actions = {}
with open('sources/vocab.csv') as vocabCSV:
   action_items = csv.reader(vocabCSV, delimiter=',')
   for row in action_items:
      theme = row[0]
      themes[row[0]] = {'description' : row[0], 'tags' : [ row[0] ]}
      for x in row[1:]:
         if x > "":
            if x in actions:
               actions[x]['topics'][row[0]] = True
            else:
               actions[x] = {'topics': { row[0] : True }}
data['action-topics'] = themes
data['action-words'] = actions

# ------------------------
#        Resources
# ------------------------
resources = []
with open('sources/resources.csv') as resourcesCSV:
   bookmarks = csv.DictReader(resourcesCSV, delimiter=',')
   for row in bookmarks:
      resources.append(row)
data['bookmarks'] = resources

# ------------------------
#      Idea Prompts
# ------------------------
categories = {}
categoryKeys = []
with open('sources/idea-categories.csv') as categoriesCSV:
   cats = csv.DictReader(categoriesCSV, delimiter=',')
   for row in cats:
      if int(row['count']) > 0:
         categories[row['key']] = { 'name' : row['category'], 'description' : row['description']}
         categoryKeys.append(row['key'])
data['idea-categories'] = categories
data['magic-8-categories'] = categories

ideas = []
with open('sources/ideas.csv') as ideasCSV:
   next(ideasCSV)
   prompts = csv.reader(ideasCSV, delimiter=',')      
   for row in prompts:
      p = {
         "text" : row[0],
         "attr" : row[1],
         "categories" : {}
      }
      for count, c in enumerate(row[2:]):
         if c == 'TRUE':
            p['categories'][categoryKeys[count]] = True
      ideas.append(p)
data['ideas'] = ideas
data['magic-8'] = ideas

actionsFile = open('actions.txt', 'w')
for action in actions:
   actionsFile.write("%s\n" % action)

filename = 'exports/dance-maker-' + strftime("%d-%m_%H-%M",gmtime()) + '.json'
with open(filename, 'w') as outFile:
   json.dump(data, outFile)
Basic data processing script

I also produced documentation and schedules for content generation, with guidelines meant to scaffold on DEL’s programs and professional development courses.

Six pages from a document describing how to manage content in the app
Basic content strategy documentation

Painting pixels

Borrowing from DEL’s visual identity, I came up with a set of basic principles that would define the app’s look & feel. I conformed our wireframes to this style in a Sketch file for developers to reference.

I designed a preliminary logo and app icon for DEL to provide feedback on. Subsequent discussions gave me the clarity I needed to produce a more refined icon. The result drew inspiration from a Laban Movement Analysis chart, one of the conceptual cornerstones to DEL’s methodology.

A lateral series of progressively more complex icons
Design progression for the updated icon

I also designed basic illustration elements and other assets to supplement information, interactions and identity.

An illustration of colorful machinery
An Idea Machine illustration

Implementation

I worked closely with our developer throughout the implementation stage to clarify and revise almost every detail of the application, from custom algorithms to pixel polish. We were able to build a native iOS app that responded live to content updates, worked reliably across a variety of devices and generated the analytics we would need to provide meaningful improvements over the product’s life. After some testing and design updates, we followed up with an Android app that incorporated learnings from the initial release and conformed the UI to Material guidelines.

Pseudocode

We discovered a mismatch between how our movement exploration "shuffle" function worked compared to user expectations. Teachers we spoke with said they prefer to scaffold their lessons in a linear way, progressing from less challenging descriptors of Body and Space before moving into Effort qualities and Relationships. Our completely random function was a usability trap for inexperienced users to fall into.

We didn't have sufficient resources to rebuild, so I worked with advisors to understand the related pedagogy more deeply. I realized that I could provide an algorithm to weight our shuffle behavior to retain a sense of unpredictability while favoring the foundational categories. This saved us precious development time without compromising the funnel's integrity.

Outcomes

App in hand, we returned to the community for a series of presentations and workshops. I led a variety of exercises and discussions around the intentions and techniques of using the app before and during class. We consolidated feedback and first impressions, brainstormed next-steps and considered the implications of the product at both the individual and systemic level.

Sharing the project with students, dancers and educators was an invigorating experience. As we made dances together with the app, I reflected on how much good can happen when a group of open minded people tried something new and challenging together.

A colorful room with 8 people dancing in swooping motions
Dancing with CMOM staff

We built something useful that students and teachers around the country understand and enjoy using. By grounding the experience in clear written language, we also found a way to expand the audience of the underlying concepts and increase engagement with DEL’s pedagogy.

Unexpectedly, teachers of ELL students (English Language Learners) have shared their success using the app to build on language concepts during creative exercises, suggesting new possibilities for the future.

Dancemaker is available on iOS and Android. It’s been featured in the press (Backstage, Broadway World,) presented at NDEO, and incorporated at 92Y, the Children’s Museum of Manhattan, The Yard, and in classes around the country.