back to home
Bringing a no-code web designer into the modern era for online businesses.
2021-2022

Bringing a no-code web designer into the modern era for online businesses.

Overwhelming user feedback indicated a desire to create responsive pop ups and other website content. We created a no-code studio capable of building anything to optimize an existing webpage, including widgets, embedded elements, and even landing pages.
contributions
Design Systems
Interaction Design
Product Design
Prototyping
User Experience
User flows
User Research
Visual Design

The Problem

Critical elements of responsive design, such as layout, positioning, variable sizing, etc, are missing from Justuno's legacy design product, forcing users to create separate designs for desktop and mobile devices. This increases go-live time, and requires separate performance analytics.

The Proposal

Build a design studio capable of producing responsive designs that mitigates, as much as possible, cognitive load and the need for custom CSS and Javascript. It has to satisfy a broad set of use cases and be usable by both novice and professional designers. Further, this studio should audit design settings to ensure any configuration of features within the design studio works as intended in other parts of the app.
Bringing a no-code web designer into the modern era for online businesses.

Primary Goal: Scalability

So why was this the designer our customers wanted for pop ups, banners, and other relatively simple website content?

Working side by side with our clients for almost a decade informed us that they had an entire spectrum of needs; it's why they like Justuno - they have the flexibility to stay ahead of trends in the ecommerce space with an equally flexible tool. Whether it's use cases or access to out-of-the-box css properties, our customers want it all - and want it easier. Thus, we started with the full suite of functionality in mind, then built in layers of validation, auditing, and other guardrails to aid less technical users.

Bringing a no-code web designer into the modern era for online businesses.

A Spectrum Of Users

"So much more than Canva, and we'll be with you every step of the process."

Our feedback tells us we have a wide range of people designing in our app, from Powerpoint users to professional designers. I collected notes from emails and other feedback from my time working with our account management department, and even traveled to host live workshops and feedback sessions, talking to real users as they navigated a hi-fo prototype. After a two day period, I had interviewed and observed agency account directors, marketing managers, professional designers, and small business owners.

From this feedback, we inferred the designer should be capable of building sophisticated web content for professional design teams, all while providing an easy path to responsive designs for our SMB user base and digital marketing agencies.

Bringing a no-code web designer into the modern era for online businesses.

Interactions

The sheer number of interaction points in a design studio require visual simplification, so we designed with a goal of sophistication and elegance in the interactions:

  • The studio features a collapsed navigation for adding elements, managing layers and brand kit, and even watching video tutorials.
  • The right side panel contains both styles and settings for a selected layer, which can be toggled.
  • The viewport selector has hover state tooltips to reinforce the constraints of each view, even providing guidelines in the mobile landscape view.
  • This slim UI maximizes the artboard space for users to utilize.
Bringing a no-code web designer into the modern era for online businesses.

Iteration...Less Is More

After observation of alpha groups, the loudest feedback was the studio requiring too much perceived effort to build their pop ups. After researching competitors with lighter design tools, I recreated our design studio into a "lite" version, building in helpful constraints and reducing overall cognitive load and maximizing time-to-value.

Update 10/2024

We realize our users need more active guidance, so we're building mini-settings to show when elements are added to a design, reducing cognitive load.

**At the time of writing, this update is on the product roadmap.

Bringing a no-code web designer into the modern era for online businesses.

Auditing Designs For Functionality

In addition to UI updates, the designs created in the studio are published to the website using a workflow builder. This required more configuration in the design settings, and thus more opportunities for oversight by the user. Design elements must be assigned to "advance to next workflow step" when clicked, and form fields used in a design had to be synced to marketing automation platforms upon subscription, just to name two examples.

In order to prevent this oversight, we built in an audits system. This system, examined design elements to ensure they were properly configured before the design could be published, and then used in workflow.

Bringing a no-code web designer into the modern era for online businesses.
Impact
Designers both internally and externally have noted how pleased they are with the advanced capabilities not requiring code.
Support staff and dev team have marked reduction in ticket times from less custom code implementation.

Case Study Links

Interact with this project and learn more about how it was built.
View the prototype