Case Study: HapYak
I was the Creative Director at HapYak Interactive Video, and over the course of my time there instilled a design process, a design system, re-imagined the portal including a new editor, quick-start projects, interactive guides while also creating custom annotations for multiple clients including West Ham United, Amex, Sotheby’s, AMC, and Home Depot
Editor
HapYak’s editor was a product of an ever evolving product. As new annotation types were created, new icons were added from whatever icons were available in the latest install of font-awesome. Annotations are the core of interactive video and the most used aspects of the editing experience.
Guides
Interactive Video has a bit of a learning curve so adding in-product guides allowed for our users to easily access contextual help whenever they encountered an issue. These guides were designed to easily accommodate a config file making adding new guides a quick and easy process as we added more functionality. Keeping our users in product instead of in our knowledge base led to a much higher video publishing rate.
Quick Starts
We found one of the biggest friction points for our users was not knowing where to get started. HapYak offered a choose your own adventure style editing experience which while flexible, also presented the user with a lot of choices to make. A new dashboard with quick start guides helped users learn the basics of HapYak while still allowing them to create impactful interactive videos in minutes.
Tutorials
Even with quick start projects, a new editing tool always has a learning curve and before the days of app cues, I looked at internal ways to highlight features and walk our users through their first video creation process
Reporting
A large benefit of the HapYak platform was the incredible amount of data points collected when a viewer watched and interacted with a video. One of the larger undertakings was to create a reporting portal to both showcase and highlight the data. While ultimately the project did not get built, we went through a design sprint process to create the ideal first MVP of the project.
Design System
I also created a visual identity and Design System for HapYak called IVIE (Interactive Video Interaction & Experience) and applied the framework to the remaining screens of our portal.
