top of page

Zapworks Designer

5 min read

Research and design of an updated AR tool for a new generation. I led the design of an intuitive tool that would aid new users in creating AR experiences with ease. The result was a celebrated version that prioritises a seamless creative experience.

My role

​

Lead and solo designer—User research, empathy mapping, heuristic evaluation, user personas, wireflows and user flows, feature prioritisation, feature and component design, stakeholder management, workshop facilitating, and user testing.

Revolutionising Augmented Reality Creation



Introduction

In this case study, I'll delve into the journey of creating Zapworks Designer, a groundbreaking augmented reality (AR) creative tool. With a commitment to enhancing user experience, rectifying issues of its ancestor, and embracing innovation, Zapworks Designer emerged as a powerful platform that reshapes the AR landscape.

Understanding User Needs
I explored Legacy Designer, a 2012 AR tool that allowed users to create basic experiences by dragging images and videos onto a small static canvas. Despite many UX concerns and its outdated and buggy design, there was great potential for improvement. A small but dedicated group of users appreciated its simplicity, as it enabled them to create impressive projects without needing to learn coding or use complex tools. After conducting surveys, interviews, and hands-on research, I discovered a diverse range of user needs, frustrations, and aspirations. This upfront engagement with users provided crucial insights for transforming the next generation of Zapworks Designer.

Easy.webp

Identifying Legacy Issues
Taking on the perspective of a hyper-critical user, I immersed myself in Designer Legacy to do a Heuristic Evaluation. I created several AR experiences using every feature available, uncovering various issues and listed them in a document called "The Super-Duper Critique" which was a base for an improved roadmap. This transparent evaluation formed the basis of Designer's transformation, guiding us towards addressing concerns directly.
The review exposed hidden controls, confusing interactions, and design inconsistencies that negatively affected the user experience.


This honest evaluation served as the foundation for Zapworks Designer's transformation, which aimed to address these issues directly. With a clear understanding of Designer Legacy's shortcomings, based on user research and my deep dive, I began the redesign journey.

One of the first wireframes on a whiteboard.

One of the first wireframes on a whiteboard.

Design layout exploration

Design layout exploration.

Iterative Design and User-Centric Validation
Throughout the design process, I went through multiple iterations and validation stages. Detailed wire flows, intricate wireframes, and meticulous user flows were meticulously crafted, each iteration informed by the invaluable feedback of the user community. Accessibility and usability remained constant touchstones, ensuring that Designer catered to a spectrum of creators.

The Leap into Innovation
My goal was to create a tool that corrected the pain points of the legacy version and opened the doors to a future of intuitive interactions, new features and limitless creative potential.


The product manager and I opted to maintain feature parity with Legacy Designer, choosing to prioritise the most used features and elevate the overall user experience. This strategy ensured we mitigated disruption to existing users and allowed us to test the UX of familiar features.

To accommodate a considerable number of newcomer users with a background in design, I created the new platform to be visually similar to tools like Sketch or Figma but have the simplicity of Canva.
The version only allowed for 2D elements but it had an infinite canvas that allowed users to navigate the space freely. Like its predecessor, Zapworks Designer focused on Image tracking, enabling users to create AR experiences that anchor to print material. The controls were simplified and structured into four distinct panels:

  1. Components Panel: Where users can access digital elements to add to the scene. Here they can find Buttons, uploaded images videos and text.
     

  2. Context Bar: Toggle controls to manipulate components on the scene. Move, scale, rotate etc..
     

  3. Inspector Panel: Access and edit project settings and selected component properties.
     

  4. Scene Manager Panel: Here, allows users to navigate and alter the properties of the scenes in the project.

Empty scene template.webp

This overhauled interface laid a solid groundwork for integrating future features while elevating aesthetics and improving the user experience of creating simple, yet effective, augmented reality experiences.

Designer 2 – Image 1 – Image gallery.webp

Zapworks Designer V1 with image tracking in 2D

Conquering Challenges
At the beginning of the project, only two people were working on Zapworks Designer - a developer and myself. As a result, there was much work to be done, and many features and improvements had to be delayed. We had to be disciplined in our choices, but our collaborative efforts, fueled by a shared commitment to excellence, led to elegant solutions and an effective framework. 

Unveiling the User-Centric Impact
With Zapworks Designer's launch, a wave of excitement reverberated throughout the user community.
The improvements over Designer Legacy were immediately palpable and celebrated as a testament to the success of the user-centric design approach.

Bits.webp

The Beginning
The evolution of Legacy to Zapworks Designer underscored the crucial role of iterative design, empathetic understanding, and continuous evolution.


As "Designer's designer"... (let's just run with that) I understood that the successful launch was just the first step. The roadmap ahead included continuous refinement, integration of new technologies, and more user testing.
Over the years, I worked on improving the user experience and designed a 3D version of the tool, which paved the way for the introduction of World and Face tracking. As the team grew, I hired and mentored a talented designer, eventually passing on the "Designer's designer" role to her. I've continued to oversee the project, managing, mentoring, and guiding the team as we added more features and the tool matures.

Group 406191.webp

Conclusion

This has been the most fascinating project I've had the opportunity to work on, and undoubtedly one that I am extremely proud of. Zapworks Designer was created by users for users, and I was fortunate enough to lead the research and design phase of this innovative AR tool. My focus was to meet the needs of our users while addressing any legacy shortcomings and embracing new ideas. As I think back on this journey, I feel a great sense of achievement and anticipation for the possibilities that Zapworks Designer can provide to creators and their audiences.

Try Zapworks Designer. It's free with the Hobbyist plan.

Recent case studies

All icons.webp

Connecting an ecosystem 

Zappar
Branding
Zapvision-min.webp

Product infoAccesebility 

Zapvision
bottom of page