Create an interactive web application that enhances storytelling, while making the UI flexible and digestible across web and mobile platforms.
Role: Principal UX Designer and UI Engineer
Tools: Adobe Illustrator, Photoshop, HTML/CSS (Skeleton boilerplate), Angular JS
Interact with the product: http://thearkhives.com
Around 2014 until 2016, I lived with a special needs child who loved reading with his parents. He inspired me to create this web-app, so that his parents could read to him whenever he wants, wherever they are, without toting the physical books.
This would be akin to the Kindle app, without having to download it.
There was nothing else like this product that I could analyze or compare to, so I had to think of why someone would want, essentially, a web-based pop-up book.
To sort my thoughts, I created a SWOT diagram (left), assessing the strengths, weaknesses, opportunities, and threats of producing this product. Additionally I wanted to narrow down who—and why— one would be interested in using this web app.
I narrowed the audience down to parents and aspiring art students, as the story assets will be provided by a commissioned illustrator. (Click to read through)
I thought of all the possible flows for this site: where the user would go for what purpose, and structured site map (left) accordingly.
The main goal is for the user to access the archive of stories, no matter where they are on the site.
I drew inspiration from the Greek Goddess of wisdom, Athena, since the gods and titans of Olympus are typically associated with gold. From there, I also opted for a serif font to emulate book text. Branding and wireframes were created with Adobe Illustrator, story assets for “Jack and Jill” were drawn in Photoshop.
I built the UI with Angular JS, which calls upon JSON objects that consist of the directory paths that lead to image assets and story text.
The assets are layered, consisting of an animated (characters falling or sliding) foreground and a parallax background giving the “page” a sense of depth.
Since this was an experiment, I illustrated the first two stories presented on the site.
Logo treatment and wireframe design with CSS specifications
The Final Product:
This project shipped to public August 2016.
What I learned:
It was three months of hard work, mostly focused on engineering: constantly testing, and asking others to test the web-app on their own devices (tablets, phones, desktops, 4k screens).
I did communicate regularly with the stakeholder via video conferences, sending in formal progress updates — a pdf that was themed to the site’s design.
I learned the entire technical process of creating, pitching, and shipping a product, working as the Project Manager, UX designer, UI and database engineer, and asset creator.
I would have made the landing page more apparent about the site’s content, displaying snippets of the story illustrations, or have a video of a parent and child scrolling through the site.
I would have also included a search bar in the menu so that the user could find stories without exiting the one they are on, just in case they change their mind and wanted to continue reading.
In the end, the little boy enjoyed scrolling through the story repeatedly and demanded another.