This document describes how to create a purposeful organism library for wireframing websites. It recommends following atomic design principles and tagging organisms with their purpose, such as to promote, inform, reassure, or inspire. The document provides examples of organisms for each purpose category and outlines a three step process for creating an organism library: 1) establish the needed organisms, 2) create a library with those organisms, and 3) use those organisms. It also recommends assigning each page a primary purpose, direction in the user journey, and primary action using the PIRI and PDA acronyms to ensure pages are not superfluous. The overall goal is to create reusable and purposeful components to streamline the wireframing

1. G ETTING WEBPAG ES TO BE PURPOSEFUL , NOT SUPERFLUOUS
O R
HOW I C RE ATE D A WIREFRAME C HEATSHEET
PURPOSEFUL PAGE
ARCHITECTURE
@GC_PEOPLE@B ECSTEX

2. Hello
I like to be efficient
I like to be accurate
Wireframes make me
nervous
@BECSTEX

3. Know your user:
Who are you talking to?
What do they want?
What do you want from them?
How do you get the two to
match up?
Firstthingsfirst
@BECSTEX

4. Ready?
Steady.
And
TEST
TEST
TEST
@BECSTEX

5. Where do you start?
Should you use a template?
Is there a quick way to do this?
Should it just be on paper?
Does every page need a hero?
How many ways can you stack blocks?
What if they look boring?
Should the client sign these off?
Where do you start?
So
…Wireframes?
@BECSTEX

6. Behold
Atomic Design
Organism Libraries
Purposeful Architecture
@BECSTEX

7. ATOMIC
DESIGN
@BECSTEX

8. ATOMS
@BECSTEX

9. MOLECULES
@BECSTEX

10. ORGANISMS
@BECSTEX

11. TEMPLATES
@BECSTEX

12. We had spoken to our users and
completed our initial testing - we knew
what the users were looking for.
We found atomic design and created some
organisms. What comes next?
Andnow?
@BECSTEX

13. Establish the
organisms you’ll
need
Create a library with
those organisms
Use those organisms
01 02 03
HOWTOCREATEANORGANISMLIBRARY
@BECSTEX

14. Things I
know to
be true
Every site is trying to sell you
something
The market is saturated - you
need to do more than ‘sell’
People don’t buy what you
do, they buy why you do it
@BECSTEX

15. Establish the
organisms
you’ll need
Create a
library with
those
organisms
Use those
organisms
01 02 03
HOWTOCREATEABETTERORGANISMLIBRARY
Tag the
organism with
a purpose
NEW
@BECSTEX

16. Give it a
purpose
Promote
Inform
Reassure
Inspire
@BECSTEX

17. Promote
Sell yourself
Sell your service
Sell your ability
PIRI
@BECSTEX

18. Inform
Explain
Show
Exemplify
Highlight
PIRI
@BECSTEX

19. Reassure
Social proof
Case studies
Third-party
reports
White papers
Company
promises
PIRI
@BECSTEX

20. Inspire
Do more
Think more
Read more
Discover more
PIRI
@BECSTEX

21. @BECSTEX

22. A page may have components that achieve more than
one of these elements, but it is important to ensure
that every page is doing at least one of these things
otherwise it is superfluous.
@BECSTEX

23. @BECSTEX
Organisms
InAction
Intent:Showusers
whichcompaniesuse
ourproduct.
Organism:Imagelist
withoptional
supportingtext.
Purpose:Reassureand
inform.
Best case scenario
Expected scenario
Minimum scenario

24. Make the
page work
Purpose
Direction
Action
@BECSTEX

25. Purpose
Establish the
primary purpose -
remember
Promote
Inform
Reassure
Inspire
PDA
@BECSTEX

26. Direction
Funnel in - where does
the page appear in the
journey?
Funnel off - where
does this page open
doors to?
Funnel out - where do
they go when they’re
done?
PDA
@BECSTEX

27. Action
Primary
Secondary
Tertiary
PDA
@BECSTEX

28. Working independently? Working to tight time frames? Working
remotely? This could help.
The Organism Library enables you to create wireframes that can be
quickly shared amongst the team, with your clients, or stakeholders.
PIRI and PDA allows you to check that the components are purposeful -
and check what those purposes are - as well as clarifying entry and exits
of the page, and what actions these carry.
Whatdoes
thisallmean?
@BECSTEX

29. THANK YOU
@GC _PEOPLE@BECSTEX