Go Composable
With No-Code

Go Composable with No-Code

Go Composable
with No-Code

Go Composable
with No-Code

A modular no-code web-building experience for end-users.
A no-code web-building experience for end-users.

Problem Framing

Building websites are "simple" yet not flexible enough for end-users, enforces their paradigms, and limit the medium's possibilities. And almost all of the solutions are vendor-locked.

Opportunity Space

To remove technical barriers for end-users, provide a composable architecture and API-first strategy for website building in a no/low-code environment.

Core Team

Early: 1 Product Designer (me), 1 System Designer, 2 Full Stack Software Engineer, 1 Automation Engineer


Later: 1 Backend Developer, 1 Cloud Engineer, 1 UI designer, 1 Business Developer

My Role

Experience Vision

Discoveries

Design-ops

UX researcher

Design-System

Completion Time

9 months (2020 - 2021)

Link

driop.com

Wanting a web presence for your business should be exciting, not daunting. Yet, it's STILL (66% of the global population uses the internet) a multi-layered complex procedure with endless decision-making steps and technical know-how.
Creating a business web presence should be exciting, not overwhelming. Yet, even with 66% global internet usage, it's still a complex, technical process.

How can we turn this complex workflows into a into simples, accessible solutions that consumers love to use?

The Experience Vision

The promise of "simple" website builders masks a frustrating reality. While they reduce some technical barriers, they often -

— Lack true flexibility for end-users

— Force creators into rigid, predefined paradigms

— Stifle the web's innovative potential

— Lock users into vendor-specific ecosystems

We need a paradigm shift –
A fast, scalable, no-code environment that empowers end-users to harness the web's full capabilities without sacrificing ease of use or limiting their options.

Who exactly are we

building this for?

To answer that, we wanted to answer this first -
Where can we make the biggest impact with the fastest speed-to-market and rapid adoption?
Where can we make the biggest impact with the fastest speed-to-market?

Our research revealed that website creation involves broadly 4 types of users: Agencies, Designers, Developers, and Business Owners.

Agencies and big organizations already had their preference. However, coming out of it initially was not worth the risk for them, so we focused on freelance designers, independent developers, and small business owners.

Our research discovered that all of these user groups work (directly or indirectly) for small business owners. But unfortunately, existing website-building tools are only designed for tech-literate groups and
“fail to empower the end user.”

Our research revealed that website creation involves broadly 4 types of users: Agencies, Designers, Developers, and Business Owners.

As agencies were less likely to change their methods. However, current website-building tools cater to tech-savvy users, "failing to empower the end-user."

customer persona

Product/Market Fit

What We learned…

These small business owners are being held hostage by freelancers or agencies. Unfortunately, an open-source CMS like WordPress has a steep learning curve and too many plugin dependencies to make it fit their business needs.

To address this gap, we planned to develop a tool that prioritizes ease of use and empowers small business owners to create their own websites without needing technical expertise.

This must be designed with the end-user in mind, providing an intuitive and streamlined experience that helps small business owners create their own websites without compromising quality or functionality.

These small business owners are being held hostage by freelancers or agencies.


Open-source CMS options like WordPress are too complex for their needs.


To bridge this gap, we aimed to create a user-friendly tool empowering small business owners to build quality websites independently, without technical expertise.

Product/Market Fit

What We learned…

These small business owners are being held hostage by freelancers or agencies. Unfortunately, an open-source CMS like WordPress has a steep learning curve and too many plugin dependencies to make it fit their business needs.


To address this gap, we planned to develop a tool that prioritizes ease of use and empowers small business owners to create their own websites without needing technical expertise.


This must be designed with the end-user in mind, providing an intuitive and streamlined experience that helps small business owners create their own websites without compromising quality or functionality.

81%

81%

of small business owner report feeling restricted by developers/ designers and technology in general.
of small business owner report feeling restricted by technology in general.
of small business owners feel constrained by technology.

96%

96%

agree that websites are the cornerstone upon which modern businesses can grow, and connect with their audiences.
agree that websites are the cornerstone of modern businesses
view websites as crucial for connecting with audiences.
By offering an API-first strategy and composable architecture in a no-code environment, we can remove the technical barriers for the end-user and enable them to achieve their business goals quickly and efficiently.
Our API-first strategy and composable architecture in a no-code environment eliminates technical barriers, enabling end-users to achieve business goals swiftly and effectively.

Biggest challenges -

Technological Constraints & Challenges⇣
1.
Capabilities vs. Flexibility -
Making it Scalable

  • Recognizing our limitations, we opted for a third-party approach to advanced services like search, analytics, and asset management.

  • To simplify user experience, we developed Packaged Business Capabilities (PBCs) tailored to each business's type, location, and goals. This composable, no/low-code system features a decoupled front-end, allowing users to add or remove services seamlessly within our platform.

  • The result: a flexible, scalable solution that doesn't compromise on capability or ease of use.

  • We used third-party solutions for advanced services.

  • Developed Packaged Business Capabilities (PBCs) tailored to each business's type.

  • Created a composable, no/low-code system with decoupled front-end for easy service management.

Result: A flexible, scalable solution balancing capability and user-friendliness.

1.
Capabilities vs. Flexibility -
Making it Scalable

  • Recognizing our limitations, we opted for a third-party approach to advanced services like search, analytics, and asset management.

  • To simplify user experience, we developed Packaged Business Capabilities (PBCs) tailored to each business's type, location, and goals. This composable, no/low-code system features a decoupled front-end, allowing users to add or remove services seamlessly within our platform.

  • The result: a flexible, scalable solution that doesn't compromise on capability or ease of use.

2.
Access from Mobile -
Making it Convenient
Making it Convenient
Access from Mobile -

Goals:

  • Design for mobile on mobile

  • Gain competitive edge with mobile-first capabilities

  • Develop PWA for cross-platform, low-maintenance solution

Setbacks:

  • System operation impossible due to mobile limitations

  • Separate mobile system required

  • PWA technology inadequate for advanced features (e.g., Canvas, webGL etc.)

  • User feedback: concept interesting but impractical

Reality Check:

— Mobile app idea abandoned
— Focus shifted to basic CMS content editing for mobile
— Mobile app idea abandoned
— Focus shifted to basic CMS content editing for mobile
- Mobile app idea abandoned
- Focus shifted to basic CMS content editing for mobile
3.
Making it Fast
Performance vs. Ease of Use -

Approach:

  • RUST + WebAssembly for browser performance

  • Jamstack (Netlify) for global edge deployment, eliminating server management

  • CRDTs for scalable multiplayer functionality, replacing OTs

  • Custom system design optimized for product development

Goal: Browser-based, lightning-fast platform and user websites.

Focus: Easy scale and collaborative functionality.
Goal: Browser-based, lightning-fast platform and user websites.

Focus: Easy scale and collaborative functionality.
Goal: Browser-based, lightning-fast platform and user websites.

Focus: Easy scale and collaborative functionality.
Goal: Browser-based, lightning-fast platform and user websites.

Focus: Easy scale and collaborative functionality.

Design & Research
challenges -

1.

1.

Early Concept Testing -

1.

Early Concept Testing -

Challenge:

  • Core functionality was too complex to make a testable prototype without programmatically building it.

  • Development time-intensive; design validation crucial

  • Dilemma – Unable to test concept early, risky to build blindly

Solution:

  • Leverage existing similar products for testing

  • Recruit testers to analyze insights from these products

Outcome

  • Developed initial customer journey map

  • Identified key pain points

  • Derived preliminary "Jobs To Be Done"

2.

2.

2.

High-Fidelity Usability test
Overcoming Steep Learning Curve & Complexity -
Overcoming Steep Learning Curve -

Identified Issues:

  • Need Statements:
    Empower people without deep design, engineering knowledge

  • Initial tests:
    Poor task completion, slow adoption, lack of clarity

  • Dilemma:
    Simplifying risked compromising core functionality

Solution:

  • Returning to the drawing board, lots of crazy 8’s, UX mapping and affinity diagramming.

  • Implemented free-form canvas with direct manipulation to replicate manipulating physical objects, providing intuitive control and reduces cognitive load.

  • Technical approach: Tiny CSS Grids and Sub-Grids across canvas, avoiding “absolute positioning” to ensure better responsive design.

  • Expand canvas space by providing intelligent defaults and contextual options only.

  • Returning to the drawing board, lots of crazy 8’s, UX mapping and affinity diagramming.

  • Used free-form canvas with direct manipulation mimicking physical object control.

  • Employed Tiny CSS Grids and Sub-Grids for better responsive design.

  • Expand canvas space by providing intelligent defaults and contextual options only.

  • Revisited design with crazy 8's, UX mapping, and affinity diagramming.

  • Used free-form canvas with direct manipulation mimicking physical object control.

  • Employed Tiny CSS Grids and Sub-Grids for better responsive design.

  • Expanded canvas space using intelligent defaults and contextual options.

Direct Manipulation

Direct Manipulation

Results

10x

faster Task Completion Rates

5.8

Average SEQ score increased

70%

More free canvas area to work

Results

10x

faster Task Completion

5.8

Average SEQ score increased

70%

More free canvas area

Results

10x

faster Task Completion

5.8

Average SEQ score increased

70%

More free canvas area

3.

3.

3.

The Blank Canvas Syndrome -
Optimizing Choice Architecture
Optimizing Choice Architecture

Identified Issues:

Experiments:

Users anxious facing blank canvas

Users anxious facing blank canvas
Introduce modular, pre-designed website sections with variants
Introduce modular, website sections
Lack of skill and reference for website design from scratch
Lack of skill for design from scratch
Provide customizable, functional web templates for various businesses
Provide web templates
Existing UI components insufficient for complete website design
UI components are insufficient
Implement save and reuse feature for user-designed sections/components
Implement save and reuse feature
Results
71%
of respondents cited faster development
8/10
of test users built an entire page in under 10 minutes!
12/15
reported in Increased confidence in first time use
Results
71%

of respondents cited faster development

8/10

of test users built an entire page in under 10 minutes!

12/15

reported in Increased confidence in first time use

Results
71%

of respondents cited faster development

8/10

of test users built an entire page in under 10 minutes!

12/15

reported in Increased confidence in first time use

View Product Sneak Peeks

View Product Sneak Peeks

Product Sneak Peeks

Outcome -

Now we can empower small business owners with the ability to extend their business online - with a cost-effective, user-friendly, scalable and most importantly, fully customizable websites according to their brand and choices.
This would enable them to focus on growing their business and achieving their goals without worrying about technical hurdles.

Founder of a digital solutions company -

"This enables us to scale and customized pages easily and effectively, while saving hundreds of thousands of dollars in Design and engineering resources."

Founder of a digital solutions company -

"This enables us to scale and customized pages easily and effectively, while saving hundreds of thousands of dollars in Design and engineering resources."

Founder of a digital solutions company -

"This enables us to scale and customized pages easily and effectively, while saving hundreds of thousands of dollars in Design and engineering resources."