Case Study: SPRING Analysis

Furthering Autism research through a quantitative approach to research and analysis.

Client: MIT Media Lab

Project: Spring Analysis (Autism Resource Group)

Involvement: Design Sprint Facilitator | UX | Visual Design | HTML/CSS Templates

Project Timeline: 4 weeks

Background

The SPRING research group at the MIT Media Lab is focused on furthering Autism research through a quantitative approach to research and analysis.

They developed a smart learning device/toy (SPRING) that is focused on optimizing learning and cognitive development in children with Autism.

In addition, the smart SPRING device acts as a research platform when it paired with other sensors and videos of the research sessions.

SPRING Analysis Project

Following the development of the SPRING devise, the next step was to build a SPRING analysis application to: 1) collect the multiple time-stamped streams of data during the child’s interactions with SPRING (video of play session, child heart rate, EDA data, etc) and 2) arrange the data to allow researchers to analyze findings and correlations in the data.

Design Sprint

We kicked off the project with a one week Design Sprint (based on the Google Venture Sprint model). I facilitated the Sprint and was joined by the client and 3 thoughtbot software engineers.

Understand

We started the Sprint by gathering information, knowledge, and history of the project; defining the problem statement; identifying key features and functionality; and mapping the primary user journey through the app.

PROBLEM STATEMENT

How might we visually synchronize video, physiological data, and physical data from SPRING so that we can observe physiological, behavioral, and cognitive phenomenon in children with Autism.

With the problem identified, we talked through the current workflow of data management and the data sources (accelerometer, electrodermal activity, heart rate, videos of sessions, etc), and requested features.

Challenges

Several questions and challenges the emerged early in the discussion, including, syncing start times across each data sources, plotting results, data security and speed, and the challenge of syncing and analyzing a video of the session along with up to ten streams of additional data sources.

Additionally, because of the size of the grant funding this project, we only had 4 weeks to design and build the platform.

Identify Critical Paths

Once we determined the problem-to-solve and exposed challenges and risks, we defined the Critical Path — the step-by-step map of the user’s most critical experience from start to finish.

We established two key Critical Paths:

1. The Creation Experience — the researcher creates a project and uploads video and data that was collected during the session.
2. The Exploration Experience — the research team analyses the session data, scans for points of interests, and exports portions of the video/data for further research.

Step-by-step user journey through the app.

Diverge & Converge

Day 2 and 3 of the Design Sprint were focused on generating many ideas on how to solve the problem (diverge) and then narrowing down those ideas to a single approach (converge).

This phase involved sketching and ideation exercises (e.g., “Mind Mapping”, “Crazy Eights” and “Storyboarding”). Finally, as a group, we narrowed the ideas down to one Final Story Board and identified the views to be prototyped.

For our final story board, we had to eliminate many nice-to-haves and fiercely prioritize and focus on the MVP functionality in order to complete the project within timeline and budget.

Quick sketches allowed the group to generate lots of ideas quickly.

Story Boards maps out the UI/flow in more detail.

The Final Story Board narrows down all the ideas into one direction that will be prototyped.

Wireframe Prototype

Following the Sprint group exercises, I prototyping the main user flow using Sketch and importing it into Invision app for testing.

Wireframes of the primary views.

User Testing

The client reviewed and tested the prototype in Invision. Since the MIT research group were the primary users, we opted not to do additional user testing. After making a few small changes, I moved to high-fidelity designs.

Visual Design & HTML/CSS

Because of time constraints, branding and visual design exploration was minimal. As child-focused of the project, we opted for a brand direction using primary colors and a simple and friendly aesthetic.

The researcher plays the video from the SPRING session with the child. The data streams are time-synced with the video so physiological changes (based on data) can be observed in relationship to what is happening during the session. Sections of the video can be highlighted and exported for further statistical analysis.

HTML/CSS

After establishing the look & feel and defining the base style guide, I built out the HTML /CSS templates using Bourbon (SASS library) and Neat (grid framework). I worked closely with the front-end developer to design the different types of graphs and javascript-heavy interactions.

Conclusion

We successfully design and launched the initial product in 5 weeks, with the hope of further grants to continue work and add additional functionality.

The initial release was piloted by the MIT Autism Resource group and allowed the research team to more quickly analyze video (interactions between child and researcher) and session data (accelerometer data, electrodermal activity data, heart rate) in order to further qualitative Autism research and optimize learning and social, cognitive, and motor development in children.