INTO THE WOODSA case study about the project and the development of an interactive web experience.

The creative brief was to take a book chapter or article and create an editorial stylized website to showcase the literature. For the assignment I selected Into the Woods, a self-written short story for children. The story follows young Holland Grady through a wild adventure into the realm of magic where the seven-year-old encounters dangerous foes and meets an unexpected friend. What makes the story unique is the fact that Holland bends gender norms and stays true to herself, no matter Holland bends gender norms and stays true to herself, no matter how intense the pressure to conform is.

I wrote this story with idea that I would instill this belief into my own children — allowing them to be whomever they feel they are, without the fear of being unaccepted or unappreciated. My two daughters, Madison (left) and Naomi (right), were the jumping off point for my interactive website concept, as well.

BACKGROUND

Knowing I wanted to create this web design, essentially for my children, I determined what values I thought were important pieces to creating a successful design and what I wanted the children to walk away with.

I thought about how a child would interact with the website, as I thought about how a child would interact with the website, as well as how a parent might evaluate the interaction. To do this I tried to get into the mindset of my target audience: children and their guardians.

1. What would make the child want to visit the website?

2. How could I integrate the values taught in the story into the design itself?

The answer: create an interactive website with unique features The answer: create an interactive website with unique features that allows the user to navigate easily in a forward progression, like a tradional book, while displaying a clear, straight-forward message.

ENGAGEMENT

I went to various different sources in search of creative inspiration and tutorials that effectively implemented the pivotal aspects I wanted to incorporate into this website.

Codepen.io was a treasure trove of well executed tutorials and poor user experience design choices. Sorting through the lot was time consuming and rather tedious, but overall I gained valuable insight about the process.

There were several specific website designs that inspired my There were several specific website designs that inspired my project as well, though they were much more advanced than I had the skillset for.

INSPIRATION

I loved the concepts I saw demonstrated in the websites that I took for inspiration. Horizontal scrolling, parallax, and clickable interactivity were all designs I tried working into my concept.

The issue with integrating these ideas into my web design was a super insurmountable obstacle — my skillset.

After much expirementation and a parade of trial-and-error After much expirementation and a parade of trial-and-error failures, I narrowed my design to a modern and simple, yet interactive multi-page website.

DIRECTION

After I established my modern, simple concept I tested the features on my peers and my eldest daughter.

The comments received in the usability testing liked the clean The comments received in the usability testing liked the clean design and tilt features over the images. Other comments I recevied were to make the “Remember this!” feature connect to chapters in the story that would unlock when the reader reaches a specific point in the story. My limited skillset as a first-time coder/designer prevented that idea from appearing in the website, however once I increase my knowledge-base of design I would like to revisit this code and work it into the concept.would like to revisit this code and work it into the concept.

A suggestion to rework the supplemental page, “Future Writers” to fit the aesthetic of the main pages. This included logo alteration, color choices and removing the beveled corners.

USER TESTING

The final design features a grid of images on the main page. Each image coincides with a chapter in the story and has a tilt effect that follows the mouse.

Other awesome features of the design are the sound on/off toggle and the scrolling “next chapter” button that reveals the name of the next chapter on hover.

The Future Writers page hosts a form that budding, young writers The Future Writers page hosts a form that budding, young writers can use to write their own story.

FINAL DESIGN

This project has enlightened me to a few traits about myself that I may have forgotten.

For starters, I have forgotten just how persistent I am. The coding was definitely not easy for me. I came into the class only knowing limited HTML (a skill I acquired from my days fiddling with MySpace). JQuery and Java I think were my biggest hang ups. If only a really cool website existed only in CSS and HTML...

I also learned to become more adaptible. The several failures in I also learned to become more adaptible. The several failures in previous code forced me to change my initial ideas. I have a tendency to fabricate intensely grand plans that I sometimes cannot execute. However, despite that flaw, I find it difficult to move on from my ideas, typically. This project has taught me to let go.

The overall, most glaring thing I have learned about myself The overall, most glaring thing I have learned about myself though this entire experience is that I actually can code. Granted much of my success was through Frankensteining code together from websites I liked, I knew what the elements were and how to use them appropriately. I learned that it helps to create several different stylesheets for different aspects of the design, instead of trying to fit them all on one sheet. And I learned that although I now know that I can code, I probably learned that although I now know that I can code, I probably won’t try revisiting it for at least a year, unless I am going for that sleek, bald look.

It was intense, but I survived.

REFLECTION

INTO THE WOODSA case study about the project and the development of an interactive web experience.