Zapworks CMS

5 min read

CMS 2020 - current

Zapworks CMS is the central hub for users to manage their XR projects, subscriptions, training, and other related tasks. I led the redesign to enhance the platform’s user-friendliness, making it more reliable and trustworthy.

My role

Lead and solo designer–discovery, user research, UX and UI challenges, user testing, wireframing, user journeys, affinity mapping, empathy mapping, redesign strategy, introduced Agile and Lean methodologies, facilitated workshops, and led and mentored designers.

CMS Transformation at Zappar

Elevating User Experience and Functionality

Glossary of terms:

*AR - Augmented reality blends digital content with the real world, creating interactive and immersive experiences through camera-enabled devices.

*XR - Extended Reality encompasses virtual reality (VR), augmented reality (AR), and mixed reality (MR). It refers to immersive technologies that merge the digital and physical worlds for interactive experiences.

*Zappar - A company leading the development of tools that allow the creation of Extender Reality XR projects.

*Zapworks - In-house developed creative suite of tools.

*Zappar Creative Studio - In-house agency that creates XR for customers.

*Studio - Zapworks Studio is the most powerful XR creative tool Zappar has to offer.

*Designer - Zapworks Designer is an entry-level drag-and-drop tool for creating AR. I designed the new iteration.

*Trigger - The method chosen to launch the XR experience. This can be via a URL or a marker such as a Zapcode or a QR code that is printed on the product, packaging, or poster.

Zapworks Content Management System (CMS):

Zapworks CMS is a dynamic platform where users can control their XR projects, media assets, accounts, and workspaces. Initially an internal tool used within Zappar Creative Studio, the CMS rapidly evolved to address the critical need for project organisation among users.

The CMS project consists of several interconnected smaller initiatives, all of which address user needs at their core. This case study focuses on the initial phase of my work, which paved the way for other features that I developed over four years.

My role:

I joined Zappar as the first user experience designer. My initial task involved enhancing the efficiency of the CMS while introducing new features to keep up with market demands and elevate its value proposition.

While working on this project, I immersed myself in diverse aspects, ranging from brand development and information architecture to UX, UI, fine-tuning of design system components, user research, and testing, all while integrating lean and agile methodologies into the team’s workflow.

Addressing initial hurdles:
Upon joining the Zappar team, I faced a significant challenge. Tracking data showed large churn numbers during account creation, and the user journey from the Zapworks website to the CMS exhibited noticeable friction. I identified the cause as the recent launch of a redesign of the website that introduced a more modern look. Users encountered inconsistencies when transitioning from the newly polished website to outdated account creation, leading to scepticism and mistrust.

Simultaneously, I confronted other hurdles in the project. Introducing Agile and Lean methodologies to a team accustomed to different workflows requires careful communication to overcome resistance. Limited time for user testing due to the urgent need for ecosystem-wide alignment added to the complexity.

I created the "Brand Wash" initiative that focused on quickly matching colours, fonts and styles across the whole ecosystem to ensure consistent branding and rebuild trust during sign-up.

I introduced new work methodologies through workshops, transforming workflows, and fostering adaptability.

I bought the largest whiteboard I could find and placed it in our office to encourage idea-sharing and collaboration among everyone. It is easily visible, allowing full participation in the thought process.

These challenges prompted growth and innovation. Agile and Lean methodologies streamlined processes, while efficient design decisions improved the CMS. This journey solidified my role as a UX designer and pushed me towards the lead designer position.

A refined signup journey:

After completing the "Brand Wash" the sign-up process and the rest of the CMS adopted the website’s visual style.

My key goal was to improve user experience. I simplified processes, decluttered forms, provided transparent information, and introduced tracking to measure traffic.

I have considered creating tailored tips based on the user’s type. For instance, if someone is a developer, they would receive tips on how to use Zapworks Studio. Conversely, if someone is a marketing user, they would receive tips on how to use Zapworks Designer. However, we decided to hold off on this approach until we could improve the service.

Implementing these strategic enhancements re-balanced the sign-up churn levels, enabling me to divert my attention to other parts of the CMS.

Streamlining the CMS user experience:

The subsequent phase delved into refining the information architecture and user-friendly naming conventions to ensure coherence and accessibility.

I mapped out all existing user journeys alongside the information architecture. Collaborating closely with our lead developer, we looked for opportunities to improve and simplify the CMS structure.

We created "Workspaces" to enhance the CMS’s capabilities by incorporating features such as team collaboration, permission settings, training modules, software development kits (SDKs), and many other features. This not only increased the versatility of the CMS but also helped our team develop an improved pricing plan strategy.

The journey to creating AR experiences through the CMS underwent meticulous research, during which user testing and interaction analysis revealed the following critical pain points:

Users’ confusion regarding the concept and relevance of triggers
Lack of understanding of the differentiation between available tools
User frustration with tool capability misalignment with project objectives, leading to discouraging trial churn rates

Hicks Law: The average person can only keep 7 (plus or minus 2) items in their working memory.

These instances of confusion were due to the overabundance of text in each part of the journey. Users were not reading instructions and instead clicked on what seemed intuitively logical. Excessive text detailing each component contributed to information overload in the project creation process, and users were more interested in swiftly accessing the tool to start creating AR.

Refinement:

The obvious next step was to redesign the project creation journey and refine the project overview page.

The goal was to empower users to confidently navigate the AR creation journeys while ensuring a complete understanding of the project components. This is a big project for future case studies.

Unveiling WebAR:

To launch an AR experience, users need a prompt, also known as a Trigger. Zapworks provided two options: Weblinks, which allowed users to click on a CTA on a website, and Zapcodes, which involved scanning a marker code with an app to access the experience.

The most popular option among customers was Zapcodes, which can be customised to include their branding. This solution also allowed customers to integrate Zappar’s API in their apps to scan and launch the AR experience. Companies such as Rovio continue to use Zapcodes for their Angry Birds promotions.

However, there was often a noticeable friction with asking users to download an app to access the AR experience. This inconvenience deterred many people from engaging because they encountered prompts on packaging or posters and hesitated because of the perceived hassle of single-use.

Fortunately, a new feature called WebAR has emerged. This feature allows end-users to access AR experiences through their device’s browser by scanning a QR code, eliminating the need to download an app.

Companies could now choose between creating quick-scan experiences with QR codes, such as cereal box games, or more immersive app-based experiences with custom Zapcodes, such as Legoland Windsor.

I helped champion the integration of WebAR as an option to launch an AR experience. This steered a new era of user interaction and engagement, making it easier for users to access AR experiences without the hassle of downloading an app.

In Conclusion:

I helped improve Zapworks’ CMS through meticulous refinement, resulting in an interface that seamlessly allows the introduction of new features and enhances user understanding of all things XR.

The evolution of Zapworks CMS represents a journey marked by continuous improvement and forward-thinking innovation.

This achievement originates from aesthetic alignment, streamlined processes, and improved user cognition. Today, the CMS stands as a robust, user-centric platform that democratises XR and empowers creators to learn and craft exceptional XR experiences.