Evolving the Creative Process

EVOLVING THE CREATIVE PROCESS – Building Agile Creative Teams

ALL-INTHE CREED PROMISE
Creed is a lean interactive shop that passionately
designs and delivers highly developed interactive
solutions for equally passionate clients. We
acheive this through true collaboration. With
each other and with our clients. It might not
always be easy but the idea is simple. Work
hard. Work together and go “ALL IN”.

WHERE TO START
Foundational beliefs for the collaborative creative team

Design? Dev? Copy? UX? QA? Project Management? All of these
disciplines contribute to the creative process of a project. The best
Creativesunderstandandembracethis,leaningoneachteammembers’
strengths and weighing all opinions from start to finish.
SOME OF THE BEST INSIGHTS CAN COME FROM PEOPLE WHO
AREN’T TRADITIONALLY CONSIDERED CREATIVE. LISTEN TO
YOUR WHOLE TEAM.
WHAT/WHO IS
CREATIVE?

Or rather, it’s not JUST about you. At the end of the day, you are building
something for a certain type of user. Do NOT assume that you know who
they are or what they want. Learn from them. Understand them. And, build
for them.
RESPECT THAT AND YOU WILL, MORE OFTEN THEN NOT, HIT
THE MARK WITH YOUR PROJECTS.
IT’S NOT ABOUT YOU.

Although certain individuals will be decision makers along the way (and
you may be one of them), there is no room for overblown egos in a
collaborative team. Establish roles and expectations early so everyone’s
on the same page and respect the opinions of your team members.
AVOID MISTAKING SELF-IMPORTANCE FOR SELF-CONFIDENCE.
STAY HUMBLE.

CREATING AGILE
Less rigid process. More flexibile creative guardrails.

Every project is different, therefore a rigid process for all projects will not
work. Don’t try to force your square project through a singularly round
process hole. Using an agile approach allows you to create creative
guardrails, instead of rigid rules, that will allow for more flexibility while
maintaining some key consistencies in the way that you solve a creative
problem.
AGILE IS LIKE AN ALA CARTÉ MENU FOR THE INDIVIDUAL
TASTES OF YOUR PROJECTS/CLIENTS/USERS.
WHAT IS AGILE?

Although the specific steps may change on a project by project
basis, the core elements will almost always be the same.
Start each project by mapping out the depth of each of these
core elememts as they apply to the unique circumstances of
your project.
CORE PROJECT
ELEMENTS
DISCOVERY CREATIVE CODE

Unlike a waterfall approach, agile is a more streamlined approach where the entire
team is engaged (albeit at different levels) througout the entire project. Through strong
commuication and collaboration, Agile encourages your team to rapid prototype,
create and test and iterate often to acheive the best solution for your clients and users.
LEARN, CREATE, ITERATE.
DISCOVERY
CREATIVE
CODE
ITERATION ITERATION

DISCOVERY
Know your audience & your objective

KNOW YOUR AUDIENCE
Collective Discovery
Different team members will have different questions and view points about who
you are building for and what they need to tackle the project.
1
Patience breeds intelligent design
Resist the urge to plow face first into creative without knowing the problem you
are trying to solve and who you’re solving it for.
2
Assume nothing
Once you have an idea of who you will be building for, learn about them, talk to
them and try to understand them and their needs as it pertains to your project.
4
DISCOVERY Know your audience & your objective
When assessing your project and your audience(s) keep these ideas in mind:

PROJECT ASSESSMENT TOOLS
Creating flexible discovery tools can help you quickly identify the high level objectives of your project. Here is an example of a tool
built to help designers and writers learn more about their project details and the audience they are building for.
DELIVERABLE
QUESTIONS
BRAND WEBSITE
Small to medium sized website. Primary
focus is to house content about a
product or serivice.
Who is the audience? What can you
tell us about who the customer and/or
end user is?
end user is?
end user is?
end user is?
Are we redesigning or evolving and
adding to an existing brand or are we
building from scratch?
Where does your brand live (ie online,
print, broadcast, packaging, etc)?
What are the required deliverables for
this brand work?
Are there other business lines or sub-
brands to consider in this brand work?
Can we see analytics for your
existing site? What browsers,
devices and operating systems
are your users using?
What is the purpose of this app? What
is the single most important thing that
it does for it’s users?
Is this a wreck and re-do or an
upgrade of an existing tool?
On a scale from 1 - 10, how tech savvy
are your users (10 being very tech
savvy)?
savvy)?
Can we see analytics for your existing
site? What browsers, devices and
operating systems are your users
using?
Will the tool be responsive?
Will the site be responsive?
What operating systems do we need to
build for?
savvy)?
Will the site be built on a CMS?
Who are your competitors?
What brands do you aspire to be like?
What sites (in or out of your category)
do you like and why?
APP
Native application for mobile
devices. May include some web-
based content/coding.
DIGITAL TOOL
Platform based construction like
E-commerce or task-based framework.
Highly technical.
BRAND & VIS IDENTITY
Brand design, redesign, evolution
and/or creation of additional elements.
What brands do you aspire to be like?
What digital tools (in or out of your
category) do you like and why?
What brands do you aspire to be
like? What brands (in or out of your
category) do you like and why?

LAYERS OF CREATIVE
Uniquely tayloring your creative to each indivdual project.

The key layers of design and content creation are:
CONTENT
IA/UX
PROTOTYPING
UI DESIGN
Although these steps will be fairly consistently
applied to all projects, the depth of which each step is
applied will differ greatly depending on scope, timing
and budget.
It is important, therefore, that we create flexible
workflows in each of these steps to help Creatives
flex to meet the demands of scope, timing and budget.
LAYERS OF CREATIVE
LAYERS OF CREATIVE

When possible, determine what content you have to
work with before you start mapping out the UX. A
beautiful set of wireframes or elaborte design concept
will fall apart quickly if it isn’t an accurate reflection of
the content you have to work with.
This does NOT mean that the project shouldn’t begin
until all copy is written or videos shot or images chosen.
It simply means, that you should have a realistic idea of
what you have, what you need and what you are forced
to use before getting too far along in the creative
process.
ONCE THE CONTENT LANDSCAPE HAS
BEEN DETERMINED, IT IS CRUCIAL THAT
WRITERS, DESIGNERS AND DEVELOPERS
WORK TIGHTLY TOGETHER TO ORGANIZE
AND PRIORITIZE THAT CONTENT INTO
A USER EXPERIENCE TAYLORED TO THE
PROJECT’S AUDIENCE.
CONTENT CURRATION
LAYERS OF CREATIVE Content

This step in the creative process can and should vary depending
upon the scope, scale and budget of a project. See examples below:
BE FLEXIBLE WITH UX
LAYERS OF CREATIVE UX/IA
IN-DEPTH, HIGHLY INTERACTIVE TOOL
• Will require more in-depth UX/IA
documentation – formal wireframes and
user-flows to prove our solutions
SIMPLE MICROSITE
• May only require UX/IA sketches or
simple documentation to prove our
solution. This saves time and budget to
be applied in more important key areas
of the project

IN-CODE PROTOTYPING
Grey box prototyping is a super effective way to offset more
minimal UX/IA documentation, encourage early and often
designer/developer collaboration AND it is a much more
effective and informative tool for clients when reviewing
UX/IA. When possible, grey box prototyping should be
implemented to build a working skeleton of the site and
its primary components. This prototype can, but should
not always, evolve into the final site deliverable.
THIS APPROACH IS PREFERRABLE WHEN
POSSIBLE.
LAYERS OF CREATIVE Prototyping

INTERACTIVE
WIREFRAMES
When in-code prototyping doesn’t fit into the budget or work
with developer schedules, simple interactive layers can still
be layered on to flat wireframes by using tools like InVision.
This web-based tool allows you to set up interactive user
flows using designs or wireframes and easily share with
collaborators, team members and clients.
InVision also makes it easy to track feedback by allowing
comments and you can even live share your projects where
multiple contributors can simultaneously make notes
and comments right on the screens you are viewing and
presenting.
IT’S A SUPER POWERFUL TOOL THAT’S REALLY
EASY TO USE.
LAYERS OF CREATIVE Prototyping

While the UX/IA process is underway (in whatever form), UI design can be
running in parallel. The first step in in the UI process is creating moodboards
using found, inspirational, designs. This process not only uncovers client
likes & dislikes more quickly, it also minimizes the potential
for throw away design and wasted design time.
DESIGN WITH CONFIDENCE
LAYERS OF CREATIVE UI Design – Moodboards

When a design style has been selected,
apply the desired look to key components
and design library elements pulled from
the UX/IA work to create style tiles.
Style tiles are meant to work out any
design kinks, both internally and with the
client, before full UI design begins.
STYLE TILES PROVE (OR DISPROVE)
THAT THE CHOSEN DESIGN STYLE
IS A GOOD FIT FOR YOUR PROJECT
BEFORE YOU GET TOO FAR DOWN
THE PATH TO CHANGE IT.
BUILDING THE
DESIGN LIBRARY
LAYERS OF CREATIVE UI Design – Style Tiles

HEADLINE GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus, erat vitae
vehicula aliquam, nisl tortor scelerisque quam, id accumsan ante.
A component is a multi-use, functional
and/or content driven block containing
optional features to allow consistent but
flexible use throughout the sites many
pages and page types.
Designing and building
with component libraries
can help streamline the
design and development
process when implemented
correctly.
Example: a page header or intro block component may have an H1, stylized divider line
and body copy with the additional optional features like – a handful of heading colors,
ability to add an image and/or the ability to add a call-to-action button and/or link (see
example above).
COMPONENTS
& PAGE DESIGNS
LAYERS OF CREATIVE UI Design – Component Design
Option to add a button or
button and secondary link
Option to add an image
above the copy
Base component
LEARN MORE
LEARN MORE See Details >
( Icon )

When you receive design approval on the
component and page designs, it’s time to
catalog all the foundational library elements
and global design rules in a digital style guide.
THIS STYLE GUIDE WILL BE OUR
SINGLE SOURCE OF DESIGN TRUTH
AS WE BUILD THE SITE.
However, this does NOT mean that the style
guide cannot change and/or evolve througout
the project. This just means that any changes
or evolutions must be applied to the style
guide as we go to ensure that this document
remains our guiding light throughout the
project lifespan.
SINGLE SOURCE
OF DESIGN TRUTH
LAYERS OF CREATIVE UI Design – Digital Style Guide
A great example is the Polar Plunge digital style guide: http://styles.plungemn.creeddev.com/

CODE IS CREATIVE
Respecting your digital counterparts to acheive greatness.

Unlike the waterfall approach to projects,
where dev shows up after most of the creative
work is finished and approved, agile requires
a more parallel execution and partnership.
IN ORDER TO SUCCEED, THE
COLLABORATION BETWEEN
DESIGN AND DEV IS PARAMOUNT.
AGILE vs.
WATERFALL
CODE IS CREATIVE
+

Your design is only as good as your developer. Respect that
and work closely to determine what is and is not possible
before falling too deeply in love with your design.
SOME COMPROMISE IS INEVITABLE.
ACCEPT THAT AND YOU WILL PROSPER.
COMMUNICATION
=
COLLABORATION
CODE IS CREATIVE

Prototyping can be a great testing ground for your
design, content and UX. It can also be the best way to
foster dev/creative collaboration and solidify a sense
of “Team”. Work closely with your developer(s) early
and often to see how your design and content will
respond to different screen sizes. Test, adjust,
iterate, repeat. High five regularly.
PROTOTYPING MAKES
FAST FRIENDS
CODE IS CREATIVE

Design and build for the most complicated
layout first, with mobile in mind. Then,
see how it naturally responds to smaller
screen sizes. Adjust from there until you
are happy with smaller screen layouts.
This can streamline the design/dev
process significantly.
MOBILE, MAYBE
NOT FIRST
CODE IS CREATIVE

Although the core of your approach should be consistent, the ability to
adjust and evolve along the way is one of the best things about working
in a digital ecosystem. Establish an iterative approach to design and
development at the beginning of the project (with your team and the
client) and above all else...
...KEEP AN OPEN MIND AND DON’T BE AFRAID TO FAIL.
Sometimes, only from the ashes of failure can true solutions be born.
CREATE, TEST, REVISE, REPEAT.

• Communication + collaboration — work as a team
• No Egos, only opinions and mutual respect
• Don’t be afraid of changes, embrace them. Iterate as needed.
• It’s not about you, honor your audience. Create, test, learn, react, repeat.
ALL-IN THIS TOGETHER
KEY TAKEAWAYS

THANK YOU
www.creedinteractive.com
275 East 4th
Street, Suite 810, Saint Paul, MN 55101
651.334.8800

Evolving the Creative Process

More Related Content

What's hot

Viewers also liked

Similar to Evolving the Creative Process

Recently uploaded

Evolving the Creative Process