SCH Portfolio > UX Case Studies > The Christmas Orange
A Story About Sharing

The Christmas Orange

ClientFamily + Friends
SkillsWriting, illustrations, design, storytelling

In 2017, I wrote and illustrated a children’s book called The Christmas Orange. It’s a story about how a little bird shares its orange with its neighbors.

I included this project a case study because I was curious about what it means to translate a story from paper to the screen. As this story is about sharing, it seems appropriate to include it.

The book cover.

The Christmas Orange cover

The Problem

Do you remember reading books as you were growing up? There were probably some books that you became fascinated with; that you read over and over. Perhaps you wanted more of the book – to read the next book in the series or a wish to explore the world in greater detail.

The problem I explore is what it means for the author to make the world she created more immersive by extending the boundaries of the story.

The story of the Christmas Orange was inspired by a family tradition. Every year, we received oranges at the bottom of our stockings. When I asked why, my parents were unsure, repeating that it was a tradition from their childhoods. It turns out that the tradition is wide-spread and many families still practice it.

When I did a bit of research into the tradition, I learned there’s no one reason but there are several origin stories. In one, the orange is symbolic of the gold pieces that St. Nick dropped into the stockings to provide the dowries for a poor family hundreds of years ago. In another, the orange represents the sun starting to come back to life after the darkness of winter. And in another, the segments of the orange represent the generosity and plenty of the winter holidays.

Pages from the story.

The Approach

There are a lot of book-to-screen solutions already out there. The way I wanted to explore the book did not line up with any of them. I wanted to try different techniques to learn how to make the story deeper and richer by making it interactive.

I’ve spent a lot of time volunteering and working with kids. One of the things I’ve noticed is that they’re always pushing against the boundaries of an experience, especially when reading. They ask “what if this thing happened next?” or say “I bet that character does (x) after they saw what happened.”

Moving this story to an interactive format opens those boundaries.

In the solution I envisioned, readers could learn more about the animal characters by pressing on them – their habitats, what they like to eat, and where they live. The expression of these facts could come as stories the animals present about themselves or be explained by the author.

Readers could also experience the story by hearing it. Younger pre-readers are able to follow along with the pictures. Older readers also enjoy listening to a story; disengaging from eyes-on-text frees the brain to explore avenues of side thought.

I had a ton of ideas I wanted to incorporate them all into my interactive storybook. The next part of this case study looks at what happened when I tried to do that.

I immediately jumped to sketching what I wanted on screen.

The Solution

When I started this project, I was way out of practice with design thinking – like, waaaay out of practice. My first step was to look for an existing product. I didn’t find anything that matched the vision I had in my head. I decided to design what I wanted.

I knew in my head all the things I wanted my website to do. My first action was to jump to what I wanted the screens to look like. 

This led to me working backwards; I had to figure the layers of information and navigation in a very organic and ad hoc manner. This was not a successful process.

When I reflect on this project I see that a stronger approach would have been to define a very structured product strategy. As I’ve gained experience with UX design, I understand how important a good roadmap is to ensuring a successful (and finished) outcome.

To build a better product — and one that reflected what I saw in my head, I needed to answer some questions:

  • What problem am I trying to solve? What needs am I meeting?
  • Who is the audience for this product?
  • Where and how can people use this this product?
  • How do I know if this product did what I wanted it to do?
  • What would someone be able to do after they use this product?

If I’d answered even a few of those questions, I would saved myself some headache.

Some early wireframes. Note that the screen proportions don’t match pretty much any screen out there.

solution cont’d

I also would have had a better outcome would have been have started with gathering some data and building an experience map – basic UX tools. The experience re-instilled in me the value of a UX toolkit. Not using an organized process became a problem and jumping ahead to wireframes made things fill ungrounded and incomplete. My work was lacking a solid foundation.

To overcome this problem, I did several things. I took a refresher course on UX design at and I took refresher courses on HTML/CSS/Javascript through Khan Academy. I downloaded trial copies of Sketch and Adobe XD and taught myself those programs. I also took some refresher courses on Adobe CC to keep up to date with all the changes in that suite.

In the end, I didn’t finish the project as I became employed and my time was directed elsewhere. It’s in my back pocket, though, and I’m looking forward to picking it up again someday.

These examples of wireframe progressions show how interactions with the story would progress.

Findings + Lessons Learned

  • Make a plan — you’ll like the results better.
  • Start small and grow from there
  • Sometimes you don’t know what you don’t know. It’s okay to make mistakes in the process of learning and growing.
  • Don’t design the screens first.