evolving the creative process

EVOLVING THE CREATIVE PROCESS – Bui ld ing Agi le Creat ive 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 STARTFoundational 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 Creatives understand and embrace this, leaning on each team members’ 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 AGILELess 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.

DISCOVERYCREATIVE

CODE

ITERATION ITERATION

DISCOVERYKnow your audience & your objective

KNOW YOUR AUDIENCE

Collective DiscoveryDifferent 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 designResist 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 nothingOnce 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 TOOLSCreating 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?




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)?


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?


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?

APPNative 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 IDENTITYBrand 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 CREATIVEUniquely tayloring your creative to each indivdual project.

The key layers of design and content creation are:

CONTENTIA/UXPROTOTYPING UI DESIGNAlthough 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 PROTOTYPINGGrey 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 WIREFRAMESWhen 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 HERELorem 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 CREATIVERespecting 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.

KEY TAKEAWAYS

• 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

QUESTIONS?

?

THANK YOU

www.creedinteractive.com

275 East 4th Street, Suite 810, Saint Paul, MN 55101651.334.8800