designer / developer / illustrator
Screen+Shot+2019-01-09+at+4.50.49+PM.jpg

Creating "the Arkhives"

The Challenge:

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

Why?

Why?

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.

The Market

The Market

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, 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.

Navigation and Construction

Navigation and Construction

I thought of all the possible flows for this site: where the user would go for what purpose, and structured site map accordingly.

I built the UI with Angular JS, which calls upon JSON objects that consist of the 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.

Outcome:

Outcome:

Since this was an experiment, I illustrated the first two stories presented on the site.

This final product was approved and shipped in 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 my client 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.

In the end, the little boy enjoyed scrolling through the story repeatedly and demanded another.