Nell Shaw Cohen: Educational Media Design

Daydreaming.com is a website and mobile app in development that generates customized pairings of video and music to fuel creativity, inspiration, and joy.

Custom Daydream search in alpha. Visual design by Brendan Ward.
Early draft of interaction flow.

What I Did:
Experience Design

Project currently in development; started July 2015.

Overview

My client John Lowell presented me with a question: how could we reinvent daydreaming for the web?

With this open-ended premise as a starting point, I've worked with John to design a web experience that offers curated, customized pairings of video and music that inspire daydreaming. Users select from several moods and subject matter to generate a unique playlist tailored to their preferences. They can swap out the video or the music to find a combination they love, then save it to their account or share it with friends.

Working closely with Daydreaming.com's founder, I've lead User Experience Design and Content Development on this project from its inception. My process has included recruiting and conducting one-on-one interviews with user testers; designing and building a fully interactive digital protoype; hiring and managing team of content curators; and revising and testing our alpha, which was created in collaboration with a visual designer and web developer.

"I've worked with Nell throughout the stages of website concepting, design and development. She's extraordinary in all ways: extremely smart, imaginative, diverse in her way of looking at things, friendly, thoughtful, and thorough. I came to her with the shell of an idea and she went about ideating and iterating in a process that was impressive and thoroughly enjoyable."

—John Lowell, Founder of Daydreaming.com
and Senior Director of Business Development, Media at Monster Worldwide


Design Process: Highlights

1. Background Research, Synthesis, and Ideation

My first step with this project was to research key benefits and functions of daydreaming, which formed the basis of specific user goals. Then, I ideated several divergent design solutions for these user goals.

I synthesized twelve benefits and functions of daydreaming (left), then linked six of these benefits to a specific user experience goals (right) guided by cognitive science resea

Guided by a handful of key research questions, I searched social media for words and imagery associated with daydreaming and read summaries of current cognitive science research about daydreaming.

Synthesizing my research, I identified key benefits and functions of daydreaming, then grouped these together in connection with several possible user experience goals for Daydreaming.com.

Then I rapidly sketched several different concepts for web-based user interactions in response to these user experience goals. After presenting and discussing these ideas with my client, we decided to develop my premise for a mood-based "daydream generator": based on user’s preferences for mood and subject matter, daydream-inspiring music and visuals would be selected and played in the browser.


2. Wireframes and Logic Flows

Early draft of website interaction flow.

Lo-fi wireframe sketch of Custom Daydream search.

My next step was to expand, clarify, and evaluate this idea with my client with the aid of interaction logic flows and lo-fi wireframes for several key screens. This work presented a first draft of Daydreaming.com's full system archicture, from the navigational flow of the website itself to the back-end functionality of how music and videos would be curated and presented to the user algorithmically.


3. Prototype: Development and User Testing

Custom Daydream search in prototype, which was tested with users.

Media player in prototype.

Using these wireframes and logic flows as starting point, I developed a high-fidelity, fully interactive digital protoype to test our concept. This prototype was hand-coded using HTML5/CSS3, jQuery Mobile, and Popcorn.js.

I recruited real users that matched our target audience and interviewed them individually to observe and evaluate their reactions to the user experience concept and first-draft UI design. Having received an overall positive response to the website's premise, we made several refinements to the design.

Incorporating these revisions, I wrote a detailed document with a comprehensive features list. This list outlined each screen, user interaction element, and software functionality we wanted to include in the alpha version, which would serve as a road map for our web developer and visual designer.


4. Alpha: Content Curation and User Testing

Home page of alpha. Visual design and UI by Brendan Ward, web development by Eli Van Zoeren.

Custom Daydream search in alpha.

Media player in alpha.

Featured Daydreams in the alpha offer users "Editor's Pick"-style combinations of video and music.

We needed to curate a large amount of high-quality video and music content, suited to the Daydreaming.com brand, to populate our alpha and demonstrate our site's concept to user testers. To complete this task, I recruited, managed, and worked alongside a team of several content curators. This involved the creation of a comprehensive training document, which outlined guidelines for selecting and rating content using "moods" and "interests" metrics that form the basis of our video/music pairing algorithm.

We hand-picked and rated over 500 videos and 240 music tracks from YouTube, Vimeo, and Soundcloud. Meanwhile, web developer Eli Van Zoeren and visual/UI designer Brendan Ward created a fully-functional alpha site based on the features list I'd outlined.

At present, I am recruiting and interviewing user testers that match our target audience. I'm evaluating users' experiences through a combination of Google Analytics, SurveyMonkey, and one-on-one remote video interviews. This testing will enable us to iterate the alpha and move towards a beta version.

The work described on this website was completed during July 2015 to February 2017 and is presented here with the permission of John Lowell, founder of Daydreaming.com.