1. Jen Kramer
HTML, CSS, and No-Code Training for All
@jen4web
5 steps to effective
planning for your
no-code website
or app

2. “I need to build a website.
Should I use Webflow,
Squarespace, or Carrd?”
“I need to build an app. Should I
use Adalo, Glide, or Bubble?”

4. Photo by Andrea Piacquadio from Pexels

5. What’s a new
person to do
with no clear
place to start?

6. Start with
requirements,
not with
technology
Photo by Anastasia Shuraeva from Pexels

7. ThisisKevin.
He works in
construction and
apartment
maintenance.

8. These are
some of
Kevin’s
screwdrivers.

9. The 11-in-1 is
the go-to
screwdriver
70% of the
time.

10. The
Leatherman is
good for
convenience.
It’s always on
his belt.

11. There are
specialized
screwdrivers
for specific
situations.

12. Which screwdriver
is best?
It depends.
• Is he carrying his toolbox or
not?
• How many screws are there?
• How big are they?
• Where are the screws
located?
• Philips head or straight?
• Security bit or not?

13. Software is like this.
• Start with requirements, not with technology.
• Some technologies offer advantages over others.
• But you won’t know what you need until you list your
requirements!

14. bit.ly/
nocodeconf2021

15. Photo by Ketut Subiyanto from Pexels

16. Worksheet #1:
It’s a Shower Moment!
Record that bright idea in
20 minutes or less
• Think about the problem you’re
trying to solve and describe it as
best you can
• What do YOU want to get out of
this process?
• How is your idea different and/or
new?
• Write down or draw any ideas for
features or functionality.
• Don’t analyze! Just scribble!

17. Pencils down!
Time to analyze.

18. Worksheet #2:
Goals & Audience
What are you trying to solve?
For whom are you solving it?
• What exactly is the problem
you’re trying to solve?
• Why is a website/app the
way to solve it?
• Who will use this product?

19. Tara Reed’s formula
[app/website name] makes it easy for [target customer] to
[thing that product does] so that [benefit of the product].

20. Worksheet #3:
Create Your Brand
It’s more than logos and
colors
• Consider your values and
how you want them
reflected in this product
• Choose a tone and voice for
your communications
• Customers often like
companies that align with
their own values, so think
about your target audience
as you do this

21. Example: Webflow’s core behaviors
• Earn customer trust
• Get it done, do it right
• Practice candor with care
• Dream big, ship often

22. Sample Voice & Tone Guide
Your voice is… (personality trait or attribute)
Write like this… Not like this… Why?
(write an accurate
example of how this
attribute will be
used to create your
content)
(write a counter-example of
content that should not be
used)
(explain why this attribute is
important to your brand and identity)

23. Worksheet #4:
Draw some screens
Think about data flow and
interface design
• Use pencil and paper, unless you know
a drawing program well and can move
quickly
• Think about how the data moves
through your system
Where does the user start?
What do they do next?
What happens if they make a mistake?
• Don’t worry about making it pretty
• Don’t worry about the details of how
this will be built
• You’ll flip back and forth between
worksheets #4 and #5 a few times.

24. Worksheet #5:
Features & Functionality
Competitive review
• Review your drawings and create
requirements.
• What is your level of expertise
with no-code?
• What do your users need at a
minimum?
• Identify 2-3 software products
that may help you address your
problem.
• Flip back and forth between
worksheets #4 and #5.

25. Three types of requirements
• Dealbreakers
• Nice-to-have
• In a perfect world…

26. Worksheets done!
Now what?

27. Celebrate!
• You have a great start to a
great product.
• Share your plan with your
friends and study partners
to get feedback
• No plan ever survives
implementation – expect
changes!
• You’re ready to start
building a minimum
product to test for viability.
Photo by Ante from Pexels

28. Thank you!
Jen Kramer
Twitter:
@jen4web
Worksheets:
bit.ly/nocodeconf2021