This part of the no-code revolution will not be televised — or live streamed — but there's no need for FOMO. Because I was there for all the track 1 workshops, and I’m going to give you as exhaustive an overview of every session as I can.

The accidental web designer

A workshop by Jen Kramer, Lecturer at Harvard University Extension School

‍

‍

Who is an accidental web designer?

Anyone who didn’t intend to become a web designer or developer, but ends up doing design and development work, even if it’s not their focus. 

In other words:

It’s your client, if you’re a freelancer.

It’s your collaborators, if you’re in-house. 

Web design and development is going to become a necessary business skill, and the people you work with on your projects are web designers and developers too. 

And it’s our job to help them do that (part of their) job better. To do that, we need to understand how people approach unfamiliar spaces like web design and development, and how we construct mental models to help guide us through the process.

The 4 stages of competence

When we set out on a project in an unfamiliar space, we go through what may become a 4-stage process that takes us from unconscious incompetence, and ends in conscious incompetence.

1. Unconscious incompetence: How hard could it be? 
2. Conscious incompetence: This is harder than I thought.
3. Conscious competence: I have to concentrate, but I can do this.
4. Unconscious competence: I could do this in my sleep.

Many of our clients and collaborators are starting at step 1: unconscious incompetence. It's our job to guide them all the way to stage 4. Or at least 3.

What is a mental model?

A mental model is what the user believes about the system at hand.

–Jacob Nielsen

Most often, users’ mental models are based in real-world experiences. Think of the wild old world of web 1.0, when most websites had what we called a “splash page.” These pages typically featured no more than a company name, logo, some supporting graphic, and maybe a tagline — plus a button to “enter” the site. That we already had “entered” the site apparently escaped us, and it was in part due to our mental model for the early web. That mental model was based on the real world: the splash page filled in for the facade and front door of a store, which we have to “enter” to see the “contents,” the products or services inside that store.

Building websites turns out to be hard for “accidental web designers” because the typical methods for building a website defy not only our mental models of what a website is, but also how building one should work.

Further, one of usability’s big dilemmas is the common gap between designers’ and users’ mental models.

–Jacob Nielsen

Because when designers start to build a site, they typically — or at least should — have a strategy in place. They know what the site should do, how its success will be measured, and they know what content and functionality it needs. (Again, all of this should be true, though it often isn’t.)

But the accidental web designer? They often don’t have any of that in place. And yet, we, the builders of no-code design tools, keep insisting that the starting point of the design process is not the story, but the scenery.

How this impacts accidental web designers

In part because of most no-code website tools’ design approach, accidental web designers' mental models for websites basically amounts to: paint by numbers. That is, a template.

That means they have no idea of what the range of possibilities is, because the template seems to dictate what the output can be. Its shape, its form — they’re fixed. All they need to do is fill in the blanks. Right?

Unfortunately the seemingly simple task of choosing a theme or template is in fact a crippling moment for many accidental web designers. Because they don’t actually know how to fill in the blanks.

They don’t know that building a website isn’t in fact about picking a template. They don’t know that the real meat of building a site should start before picking a template, and should focus on: 

1. Writing clear, scannable copy
2. Determining the right medium for the message you want to convey
3. Defining the right calls to actions and the order people should encounter them in
   

In other words, they should start with storytelling: who’s the hero, who’s the villain, and who’s the guide. And they should always remember that those roles are fixed: 

The villain is the problem you and your business solve. And the hero? That’s your customer. 

You: you’re just the guide. The one who helps the hero — your customer — solve the problem that’s blocking their success. More on this below.

The #1 resource accidental web designers need

An understanding of the process that starts with the strategy and focuses relentlessly on the user.

Don’t start with the scenery. Start with the strategy.

–Jen Kramer

Thankfully there are these things called frameworks that have been designed to help people define their strategy and story before they start thinking about the scenery. You can think of them as templates, actually — they’re just information templates, process templates, instead of visual templates.

Frameworks like the one Jesse James Garrett defined in his book The Elements of User Experience. Here’s a quick overview of that framework.

Strategy

1. What do we want to get out of the site?
2. What do our users want? 
3. What is the best way to serve site owner and users?
4. How do we measure success? 
   

Scope

1. What features and functionality do we need?
2. What might we need in the future?
   

Structure

1. What pages will our site include?
2. What written content will we have, and what do we need to create?
3. What photos and/or video will we include?
   

Skeleton

Wireframe! With annotations! Seriously folks: annotations are key tools for communicating priority, functionality, and content. Most of us non-designers don’t “speak wireframe.” 

Tools: 

• Balsamiq
• Moqups
• InVision
• Sketch
• Adobe XD
• PowerPoint
• Word
• Google Docs
• Pen and paper
  

Surface

Now that you have a picture in your head (skeleton) and the content (flesh) … 

Now you can pick your theme.

The storybrand framework

Another useful framework for this is Donald Miller’s "storybrand framework," which, as the name might suggest, revolves around the timeless, essential structure of stories, focused specifically on the people who bring our stories to life.

We can understand this framework pretty easily by applying it to a “mom-and-pop” restaurant website:

• Villain: Hunger, and bad food
• Hero: Customer
• Guide: The mom-and-pop restaurant
  

What role does your org play? You’re the guide. Your customer is the hero.

Phew, what a talk. Now let's move on to our next speaker.

I built and sold 12 no code apps in 12 weeks — here’s everything I learned

David Adkin, cofounder at Adalo

David gave us a deep dive into how to get started building no-code apps for clients, offering insights into how to find good clients, what to look for in your clients, and how to estimate, price, and sell your projects to clients.

Finding the perfect client

David evaluates potential clients’ viability as customers on a few dimensions, looking for positive signs and red flags in each dimension. See more red flags than you’re willing to deal with? Don’t take them on.

The client’s understanding of tech

Positive signs: 

• They can explain their idea
• They have a sense for how it fits into the space
  

Red flags: 

• They struggle with other tech
  

App’s chance at success

Positive signs: 

• They have an audience
• They have a plan for making money with it
• It’s possible to build it with no-code tools
  

Red flags: 

• They don’t have a well-defined idea
• There’s no business value in it
  

Client can go with the flow

Positive signs: 

• Personal connection (helps with forgiveness)
• Fun attitude
  

Red flags: 

• Uncomfortable with uncertainty 
• Tight deadline
• They need every detail before they can commit
  

Commitment to their idea

Positive signs: 

• They have a team
• They’ve taken steps to make this a real business
  

Red flags: 

• Change their ideas all the time
• Too busy to commit (miss meetings)
• No followthrough 
  

Finding clients

Agencies and freelancers have found years of success with 3 core methods of finding new clients, namely:

Traditional methods

1. Social media
2. Content marketing
3. Social events

We dig into these and more methods in our article, "How to find freelance design work." 

For no-code agencies, these methods still work. But the nature of our toolkit introduces a few wrinkles: 

What’s different for no-code 

• Differentiation: You’re the “new kid on the block” — the upstart with a new, different, and ultimately faster way to produce an app. That's a serious edge.
• Existing clients: Upselling your current customers. Look back at your client roster and consider how they could benefit from a no-code app. More on this below.
• Local advantage: Closer connection. For many companies, an app development agency might feel a bit remote, even unattainable. And that "remoteness" might even be literal. This opens a space for you to be the local team that gives them access to a technological step ahead.
  

Good client types

Know that you know what to look for in your clients, it's handy to know who to look at before you start that more personal evaluation.

1. Startups 

Advantage: because startups have a spectrum of design-related needs, you can be their full-service agency, delivering their branding, website, and apps. 

Find viable startup candidates through:

• Local startup events
• Local incubators and accelerators
• Upwork
  

2. Existing businesses

Less technically inclined local businesses can still make great potential clients. Here's some tips for making local businesses into viable clients:

• Consider what they're doing with spreadsheets now? Where do they lack automation? How can you help them make their processes more efficient.
• Always be thinking about apps
• Rinse and repeat: find your niche and keep going back to that well

A great example of the last point in action is Mindbody, a scheduling app for both providers and customers of fitness services.

Meeting with your clients

David then outlined the meetings you'll need to have with potential clients to both gather the information you need and make the sale.

Pre-meeting discovery

Before your first meeting, look into:

• The client's app idea
• Whether it's even possible to build with current no-code tools
• Their industry
  

Feature discussions

• Gather all possible features
• Set expectations around no-code: own that you are no-code
• Discuss native (desktop/mobile) vs. web
  

Initial pricing and timeline

• Their budget
• Explain app complexities
• Estimate price range
  

Feature discussions

While discussions about website features are relatively simple, revolving around: 

• Pages
• Blogging
• Ecommerce
  

The app space is a bit more complex, with additional considerations like:

• Multi-app/multi-use case
• Web or mobile, push?
• User profiles
• Payments

While you're discussing features, keep an eye out for the following red flags, which are particularly challenging in the current no-code landscape.

Red flag features 

• AR/VR
• Mobile games
• Algorithmic feeds
• AI 
• Complex computations
• Video tracking
  

Estimating time and pricing

Prioritize feature sets based on versions: Version 1 will have these features and take this amount of time, Version 2 will have these additional features and take this much time longer. 

Again, be transparent and specific. Accurate timelines are key. Prioritize features that will actually get used (reviews are useless for an early-stage business with no customers … maybe). 

Pricing: estimate hours and multiply by your rate. When feature creep happens, use the same formula. Most of David’s apps were $2–10K. If the rate is over 10, they probably need a more traditional dev shop. Don’t go under 2 unless you’re doing a rinse and repeat model, or you’re early stage. The more experienced and confident you are, the more you should (and can) be charging. 

Just make sure to discuss how ongoing payments, whether for continued development or mere maintenance, is going to work. 

Making the sale

Here’s your secret weapon for making the sale: 

Make a quick version of some portion of the app to show them their future, i.e., the app they’re going to launch. Even creating a quick MVP of a single feature in action can help them understand not just what you can deliver, but the exciting possibilities of what their company is about to deliver. 

Just don’t invest too much time in this development. Even the most powerful secret weapon can fail to sell some clients. 

Once they’ve said “yes, let’s do it!” make sure you have a professional service agreement and a clearly defined scope of work. Even if it’s just an email! 

Developing the app

Okay, so you’ve sold the client. Congrats! Now comes the real work. Here’s a few quick tips on that.

3 types of screens: a typology for no-code app development

That’s right: there’s really just 3 types of screens in most apps.

1. List: Think of your social media feeds, the core of the modern social web. They’re really just lists of content produced by all the people you follow and the people they reshare. That list of products on an ecommerce site, or blog posts on a marketing site: same things.
2. Detail: Sticking with the social media metaphor: consider your personal profile. It’s a detail page, telling people “all” about you and the content you share. Ditto for a single product page, blog post, or author page. Note though that detail pages often include lists too — lists like related posts, posts by this author, tweets by this Twitter member.
3. Add/edit: In essence, creation and edit/update pages are the same thing. You create some content, save it, and hit publish.
   

Building the database

As you start creating your screens, remember that they’re just the skin over a wealth of content (or data, if you prefer). So a big part of the app development process is, in fact, designing your database. 

The essence of designing your database is relatively simple: 

1. Define your nouns: they key players in your app. For Twitter, this is people and their tweets, plus subsidiary nouns that are essentially different combinations of those things, like lists, moments, and hashtags.
2. Identify their characteristics: the things that define what those core nouns “are.” You can think of these as atoms that make up the molecules of your core nouns. For a person on Twitter, that’s your headshot, bio, header image, tweets, etc.
3. Decide how they interrelate: the ways that different nouns reference other nouns and their characteristics. 
   

We dig deeper into this process and how it works with Webflow CMS in our article “Why your design process should start with content.” 

Developing the minimum viable product (MVP)

The key thing to remember here is to work incrementally. Build up your app feature by feature, but follow every single “feature complete” stage with a thorough round of functional testing. If you don’t make sure that each feature works as soon as you build it, you’re going to end up playing whack-a-mole — fixing bugs that seem to literally create other bugs, in other features. Because at that point, your app is a complex web of interconnected elements. Moves you make in one area inevitably impact the others.

Launching the app

During the app development process, and in particular as you near completion, you’re going to want to work closely with your client on your beta, launch, and iteration plans. In other words, plan out how you want the before, during, and after of launching the app to work. 

During this process, you’re going to be switching between 3 roles: 

1. Coach: guiding your client toward the best way to run the beta, launch the app, and iterate on it based on the feature roadmap, analytics, etc.
2. Teammate: pitching in to actually do the work right alongside their in-house team
3. Cheerleader: rooting for your client’s team, bolstering their morale, and cheering their successes
   

How to build a marketplace without code

Connor Finlayson, freelance digital marketer and creator of Unicorn Factory

Download Connor's slides

About Unicorn Factory

Unicorn Factory is a marketplace that connects freelancers with clients built entirely with no-code tools. It was born from basically doing the same thing — connecting freelancers and clients — in the real world, and they decided to move forward with it as a way of cementing their agency’s legitimacy. 

Here's how it's doing today:

• 240 freelancers
• 180+ inquiries a month
• 20+ community projects per month 
• 50-75 new businesses each month 
  

The no-code marketplace setup 

Connor iteratively built Unicorn Factory, starting with a very manual website-based process that evolved over time to include a sophisticated web of automated processes.

His core tools are: 

• Webflow: frontend and directory (CMS)
• Airtable: database tied to Webflow CMS, but also powering onboarding, messaging, etc.
• Memberstack: membership, which enabled monetization 
• Zapier: the great connector, enabling all automation
  

Process: 

• MVP: 12 hours: freelancer CMS and messaging 
• Memberstack and community projects: 8 hours
• Workflow automation and Airtable setup: 8 hours
• Maintenance: 2–4 hours (weekly)
  

No-code workflow examples

Connor then dug into exactly how the tools listed above work together to power Unicorn Factory.

Using Webflow CMS, he created a freelancer profile template, which new members populate via an Airtable form that feeds directly into the CMS. These profiles also reference case studies, skills, and location pages that dynamically populate a host of pages that are essentially SEO optimized by default — and augmented with shema.org markup to make them even more performant in search. 

For example: a geo-specific landing page of freelancers with skills in, say, digital marketing. Powerful stuff! 

He also developed a custom contact form in Webflow that initiates the project automation workflows he developed using Zapier and Airtable. 

Finally, Memberstack — a user management system created especially for Webflow sites — unlocked monetization for the site. Basically, freelancers can join the site and get listed for free. And receive inbound requests for free. But sometimes, clients can’t pick a particular freelancer, but instead post to the community. To pitch for these “community projects,” freelancers can upgrade. 

As Connor noted, Unicorn Factory developed as a “series of hacks on hacks,” but now, he’s able to step back and say his process basically looked like this: 

1. Define strategy and goals
2. Build pages in Webflow
3. Integrate Memberstack to hide pages as needed
4. Set up Airtable and automate your workflows with Zapier
5. Share with the rest of the no-code community

Connor really stressed the value of that virtuous cycle of building and sharing that's already come to define the no-code community.

With no-code tools, you’re kind of always testing in production

–Connor Finlayson

Ship your product with zero code: using the “build, measure, improve” (BMI) framework

Neha Jain, Software Engineering Manager at LinkedIn

The build, measure, improve framework

Build, measure, improve (BMI) is a tried and tested framework for building digital products which Neha applies not only to her job at LinkedIn, but also to her personal projects. It’s a simple, 3-step process: 

1. Build: prototype an idea
2. Measure: gather analytics and insights
3. Improve: make the most of the idea by applying what you’ve learned from measuring
   

For Neha’s passion project, the blog Mothers in Tech, improving meant automating mundane, repetitive tasks. Initially, her process looked like this: 

• Set up interviews with #MothersInTech
• Transcribe and publish each interview after several revisions
• Share and promote
  

Unfortunately, the turnaround time for every single post was 1 month or more! So, she turned to automation to speed things up — and to analytics to improve engagement. 

Process-wise, that meant ditching manual interview setup in favor of a simple Google form, where those who wanted to tell their stories simply could, simply by filling out a form. Promotionally, it meant constantly reviewing her analytics to identify characteristics of more popular posts and ensuring that features of those performant pieces were replicated in others. For example, she noticed that her top posts included photos of the mothers themselves — so, she built that element into her content structure for future posts, and added them to older posts and re-promoted them, when possible.

How to monetize your code-free app

Tara Reed, founder and CEO at Apps Without Code

After a lot of success in marketing, in 2014, Tara built a really successful art startup and built the company’s app and algorithm without writing any code. 

The first version of her app brought in $35,000 in sales and earned her a feature in 500 Startups. 

Then she started coaching other entrepreneurs, and after 4 years, she’s helped entrepreneurs earn over $1M.

Biggest monetization lessons

1. Hell is building fancy stuff nobody uses. Always, always pre-sell your software before building it.
2. If you’re bootstrapping, you don’t get to sell $10 software. Charge premium rates targeting a niche audience or businesses.
3. Make sure your business model matches the lifestyle you want.
   

Framework: the “makes it easy” sentence

One of Tara's most powerful tips was this simple formula for defining your company's positioning in the marketplace (a method I use myself): 

[Company name] makes it easy for [target customer] to [thing product does] so that [benefit of the product]. 

To bring this tool to life, she asked someone in the crowd to use it on Webflow: 

Webflow makes it easy for non-coders* to create websites so they can get their business started.

Who is a non-coder, Tara asked? After a show of hands, it became obvious that most of the folks present were designers. 

Hence: 

Webflow makes it easy for designers to create websites so they can get their business started.

The more specific you are, the easier your marketing gets. 

Nervous about talking about your idea? Just know that you’ll never sell anyone on your idea unless you talk about it.

Business models

Here’s a more-or-less comprehensive list of proven monetization models you can make use of:

• Low transaction fees (below 25%)
• High transaction fees (above 25%)
• Low one-time fee (under $600)
• High one-time fee (over $600)
• Low annual fee (under $600)
• High annual fee (over $600)
• Low monthly subscription (under $49)
• High monthly subscription (over $49)
• Free plus ads
  

Ideally, you want to pick one of these business models to limit cognitive overhead for your users and, honestly, yourself and your team. 

Note that there are essentially 2 ways to define your pricing level (high or low): 

1. Cost-based: wherein you determine your pricing based on your own costs, more-or-less ensuring your profit
2. Value-based: wherein you determine your pricing based on the value your users derive from your product — as long as it’s cheaper than the alternative, you should convert users
   

We discuss value-based pricing for freelancers in our article “How to price your freelance design services.” 

The lifestyle you want as a CEO

Lifestyle business CEO

Designed to bring you a certain level of income and no more. It’s mostly on you or a small team. You work when you want to, but may sometimes take on side projects to supplement your main business. You’re a boutique.

Best monetization methods for you: 

• High transaction fees
• High one-time or annual fee
• High monthly subscription

High-growth business

You’re aiming to make as much as possible to IPO or sell. Your main job is to manage people, raise money, and report to stakeholders. You work a lot but make a lot. You’ve raised venture capital and have a lot of pressure to pay them back on their investment. 

Best monetization methods for you: 

• Low and high transaction fees
• Low one-time and monthly subscriptions
• Free plus ads
  

Sustainable growth CEO 

You focus on sticking around for the long haul. You do what you’re good at and hire for the rest. You work a medium amount and make a market rate. 

• High transaction
• High one-time / annual 
• High monthly subscription 
  

The 3 types of customers

From a business perspective, customers basically break down into 3 types: 

1. Slow lane: unaware of the problem, not paying anyone to solve it
2. Sidewalk: aware of the problem, not paying anyone to solve it
3. Fast lane: aware of the problem, already paying someone else for a solution
   

Many companies focus on their fast lane customers exclusively.

Monetization strategies

1. Fast lane: Focus solely on your fast lane customers, but provide a cheaper or markedly better option.
2. Whitelabel: Build a tool then license it to others who can claim it as their own, but pay you for the privilege. Instantly ups your price point. 
3. Trojan Horse method: Offer training in using your app that includes X free months of that app. This works because people assume that apps are free or cheap — but in-person training is valuable and expensive.
   

Meet your customers where they are: find out what they’re willing to pay for, and deliver your product in that way.

To recap

Choose a business model that matches the lifestyle you want. Target fast-lane customers with disposable income. Consider the whitelabel or Trojan horse methods if you’re bootstrapping.

Get your no-code journey started

And that was it for day 1. If you’re ready to jump into the no-code revolution yourself, check out Webflow — it’ll change the way you design and develop for the web forever. Stay tuned for my post on day 2 of No Code Conf: the main event. 

A special thanks to our sponsors

‍