DETAILS

Pain points, prioritized

The specific pain points we addressed in the first version are:                                 

• Templates are not responsive to users' content, especially text, and it's frustrating to have to resize and realign the elements on the page
• Due to the manual editing process, the finished designs often take too long and don't look as polished and as the original templates

Breaking up long term vision into valuable chunks

A multi-disciplinary project squad, consisting of three teams, each with a Product Owner, QA, and engineers, was assembled to undertake the editor refactor (aka Smart Platform). I led the team responsible for defining and building the foundational elements of the Smart Platform.

Understanding the limitations imposed by legacy code, we recognized the necessity for a modern and scalable solution. After consulting with senior engineers and architects, we determined that leveraging CSS and web responsiveness behaviors would provide the desired flexibility and future-proof our long-term vision.

This approach allowed us to create responsive nodes that seamlessly adapt to users’ content, while preserving the intricate design quality and complexity found in our templates, including overlapping/offset shapes, layered shapes, and icon groups.

Defining responsive behaviours

Early on, I defined the rules for responsive behaviors of the nodes. This involved considering how the nodes would respond in different manipulation scenarios, such as resizing, adding or deleting elements, and changing the layout. Although our MVP focus was on text responsiveness, it was important for the engineers to understand the long-term vision to ensure their approach would be viable.

Leveraging Figma for early stage testing and iterations

While defining the responsiveness rules, I noticed the uncanny similarities between our Smart Widgets and Figma's Autolayout feature. After all, both are based on CSS and Flexbox behaviours. This was hugely helpful in being able to conduct cost-effective discovery explorations directly in Figma, without spending engineering capacity on building out all the variations. It allowed me to validate new behavioral patterns, provide engineers with clear direction and communicate our vision to senior stakeholders in a highly visual and intuitive way.

Designing controls for two user group: a balancing act between flexibility and intuitiveness

One of the key challenges in this project involved designing for two distinct user groups: in-house Graphic Designers and our end customers, each with vastly different requirements. Graphic Designers needed controls that could replace freeform editing while preserving the ability to achieve the intricate design complexity synonymous with our templates. Our customers, on the other hand, sought an intuitive and clutter-free interface, avoiding the overwhelming experience of Microsoft Word 2000 toolbars.

User group 1: In-house graphic designers

I collaborated closely with Graphic Designers, ensuring their needs were met within the project constraints. I developed a roadmap that prioritized design complexity, allowing us to focus on tasks that provided designers with the necessary creative freedom to produce an initial set of templates for meaningful MVP testing.

I created a set of hard-coded preset layouts that graphic designers were able to manipulate for most common scenarios. Additionally, we provided them with new controls - similar to those of no-code tools, such as padding, margin, and alignment adjustments, effectively replacing their previous manual and freeform editing tasks.

User group 2: end customers

My goal was to strike a balance between maintaining a high level of design complexity and ease of use. Through a series of brainstorms and testings sessions, I looked for tactics to mitigate a potential increase in interaction cost and cognitive load due to the growing number of settings and widget structure changes.

I focused on powerful default behaviours and inferred user requirements from their actions. For instance, when a user applies a background fill behind text or an icon, we understand what they are trying to create and automatically apply padding, eliminating the need for manual adjustments.

Usability testing and market research: looking beyond the obvious

We were introducing a number of significantly different behaviours in the editor that needed validating. In some instances using remote unmoderated studies worked even better, since testers didn't have familiarity bias.

As part of market research, I looked beyond of our direct competitors (e.g. Canva, Infogram) into the more complex no-code platforms, wireframing tools, CMS providers, etc. (e.g. Webflow, Figma, Squarespace).

The outcomes & next steps

In May 2021, we launched the initial set of templates. This release was just a first step on the way to making the editor smart and intuitive. The new experience was well received both with end-customers and internally. You can try them out for yourself if you visit Venngage and search for Smart Templates.

I continued working on future iterations and enhancements to bring key functionality, such as scaling, resizing, and changing layouts, to our users. I conducted a series of moderated task-based user interviews to compare the performance of the released version with the baseline metrics we previously collected for analogous templates using freeform editing. So far, the results have been promising, showing improved usability scores in key tasks like text editing and adding nodes to the templates (28% overall).

These interviews provided valuable qualitative insights that I incorporated into consequent iterations and releases. To complement these findings, I performed qualitative review of the user designs created using the new format, as well as quantitative analysis of the key metrics.