Wicked Interactive Storytelling

Website Design / Website Development
Project Overview
A website for my own start up company. The objective of the site was to show what kind of mixed reality (MR) experiences I could make for clients.
My Contributions
  • Creating overall site look and feel.
  • Creation of 3D character models.
  • Design of logo.
  • Integration of transparent videos.
  • Implementing a responsive site in Webflow.
  • Explainer video.
  • Implementation of interactive interface.
I wanted to create a site that would help explain the kind of work I do in Mixed-Reality (MR). Because this is a very new technology and there is a lot of confusion regarding how it works, a big objective was to allow people to experience what characters and interaction might look like in an environment.
User's Brief
Communicate clearly and delightfully with site visitors.
Aug 2017 — forever
There were a number of problems to address with the site:
  • How to explain what a mixed reality experience is like.
  • How to explain the process of developing an experience.
  • How to explain use case scenarios.
  • How to build trust.
  • How to encourage client leads.
User's Problem
Breaking things down into clear objectives.
Aug 2017 — forever
The site began with the use of a template from the Webflow template store. Quite a bit was changed from the template, however it allowed for a speeded up process. It also meant that I did not need to use a prototyping tool, as I could easily make changes within Webflow. What did take some research and implementation, was the development of transparent videos that could be used to make an interactive and responsive experience. Working with transparent video can result in large files, however it does allow you to do things otherwise not possible. The process involved the following:
  • Writing out in a document all the information the site should contain.
  • Finding a template that had the elements I needed.
  • Paper layouts to determine how images and information would be blocked together and to begin thinking about visual hierarchies.
  • Adjusting the template in Webflow with section areas, defining text and image / video areas.
  • Created, animated 3D models.
  • Created voice overs for characters - one using voice AI and one with my own recorded voice.
  • Created lip syncing for voices.
  • Rendered models and animations to a transparent video.
  • Converted the videos to be used in both Chrome / Safari browsers.
  • Created interactive buttons for the characters, which activate an animation and audio.
  • Made the site responsive and efficient.
Development
Fast development with a template and Webflow.
Aug 2017 — forever
The site was a helpful tool in helping explain a service to potential clients.
End Result
Aug 2017 — forever