Digital Bedtime Stories (BedStories)

Timo Schwan
6 min readMay 1, 2018

--

As part of the Interaction Design Capstone Project by University of California, San Diego, I, Timo Schwan, created an prototype for a new form of parent-child interaction. Let me quickly explain what this is all about and how i got to my final prototype.

BedStories (or Digital Bedtime Stories) is an new app for parents, who want to read bedtime stories to their children even if they are busy traveling, living in divorce or simply can’t always be at their children.

A research, which originally started with employee of a software development for better work and presentation experience, gave me more insight on parent-child interactions. Back when my PM and me were traveling to our business meeting for our client, i suddenly noticed something interesting.

It was already later evening, around 10pm, and she was calling her husband to talk about some certain topics. After a while she asked if their son is awake, so she want to talk to him. Unfortunately it was already too late. Sure it was, it was like 10pm back then, but i guess due all the stress of meeting and traveling she just didn’t noticed. As soon as she heard her son was already sleeping and there was no time today to talk to him, i clearly noticed how her facial expression changed. It was obvious she felt sad, but also kinda guilty, because she missed another day of her sons life by traveling to the client.

How does this all prefers to my original idea ? Let’s wrap it up.
Due my research for the Capstone Project, i asked some employee of my company about their daily struggles with software, projects and presentations. I got a lot of good insights, feedback and ideas. So i decided to print this opportunities out to “How might we’s”. Here have a look:

There were lots of ideas related to work experience, meeting improvement or software fixes. While i wrote these down i remembered about my observation due the traveling. So decided to add this as another “insight”. Back then this was like 1/16 for parent-child interaction, everything else work-related. At this stage of progress i didn’t thought i would pick on this extraordinary opportunity, which breaks out of the scheme.

After refinement and iterations i finally chose three ideas, which convinced me the most: An one-for-all-adapter for projectors, an instant meeting material provider (for screenshots, etc.) and finally the illustrated bedtime stories.

In the next step, i created Storyboards for all three ideas. These should help to kinda “gut check” if the idea really serves a user need, has enough impact and can be easily told in 5–7 pictures.

Here’s a quick & dirty version of the storyboard for the Digital Bedtime Stories

After having all these storyboards around, it was time to decide. Which serves a clear user need? Which offers the best opportunity? Which has the best Story to offer?
After having some thoughts about market chance and feasibility, the bedtime stories won. Even another iteration, 5-whys and lots of brainstormings couldn’t change the fact: the bedtime stories serves the most user need, offering a broaden field for improvement and opportunities and seems to be feasible.

So now i knew why and what i was gonna build, but people didn’t. So i started to prototype the thing. Beginning with a low fidelity in paper form (Paper Prototyping) i evaluated the thing myself and test it and test it and test it again:

These are the first sketches of the interface. Some elements still based on this approach.

Now before reaching out to people and ask about their opinions, i refined the prototype. Climbing up the ladder to the next phase was the wireframing. Adding all ideas of the paper prototyping now into the digital world shown me, i just had started.

In this picture you can see my first draft of the “home” page. Sure it doesn’t look like a real app — even if i already pressed it in the tablet form. But this was something to go out and show people. Just telling them about your prototype (using the storyboard of the paper prototype) is still useful.But now having something to actually “click” and “navigate” on, helps people get into the idea deeper and deeper. So i reached out to first people i thought off. Letting my colleagues and family “testing” my interface and explaining the idea. I got a lot of useful feedback back then. Thanks to you all!

After collecting all feedback and having an another design breakdown and iteration with brainstorming, this is the outcome of next iterations. Slowly i moved from having a “paint”-like interface to a more and more cleaner version. Navigation control, clean, understandable icons, color-palettes and grid-layouts came in. Adding more and more screens, options and features filled the prototype with challenges and opportunities. Should i add a comment-feature here? What if i have more than one child? How to handle this?

But now it was time to engage with even more people. My family and friends gave me some good insights and ideas, but only real unknown people would be completely honest about the idea and how the interface works for them. This is the Gut Check now. So test if my current prototype is actually working, i thought an idea to trick people in an online test. I run an A/B Test (in a normal case a test where you compare two different websites / apps and give feedback, which one works better, etc.)

In my scenario i took my current version as version A. For version B i added a lot more of the feedback and insights i got. Also i refined and redesign the interface.

My Ideas was, that people will be tricked in version A and get some tasks that are hard to accomplished in this version. They will talk about how hard to achieve a task will be and won’t like the interface.
But most of this issues will be fixed in version B.
Let’s see what happened and what they said…

User Testing Review at usertesting.com

The strategy worked well! The participants didn’t feel quite comfortable using the old version and sometimes stuck and having trouble navigate to X or find Y. At half time, they suddenly switched to version B. Every participant instantly found the features they were missing. Problems they mentioned before were already gone — the reactions were amazing! Everybody liked the new version over the old version.Although the approach was risky, they still provided lots of insights and ideas. That’s also because they now feeling like having the actual app. They often behave like using a real app now (during the new version) and tried for example to navigate quickly and complete tasks as fast as they would usually do it.

Serving participants with a new version with features they already missed during the test in the old version, triggered an psychological effect. In the new version they felt much more relaxed and confident, because they expect the new version to serves now all of the critiques. Due this they got me even deeper insights on how to navigate, find specific items or legibility.Very useful!

This is just 1 out of 22 Interfaces

And we’re right now. A refined and tested interface. Including most ideas and insights of the online test, this is what the interface looks right now.

I got a lot of great research work done, jumping from iteration to iteration and having playbacks. Redesigning, moving around ideas, storyboard, paper drawings, power point presentations and interactions slides.

It’s now time to start with the real thing. Let’s look forward for implementation and (of course) keeping iterate and getting feedback.

Keep in touch!

For more awesome work and projects, feel free to check out at timo-schwan.de

--

--