TM Simplify

Digital.

Boost Your Design Career by Moving from Print to Web: 7 Steps Jose Caballer Chief Visionary and CCO, The Groop

This workbook belongs to:

TMSimplify

Digital.

7 steps to becoming a User-Experience focused graphic designer

Introduction

09:00 - 09:05

Step 1. Stop: It’s not about tech

09:05 - 09:08

Step 2. Collaborate: It’s about groups

09:08 - 09:11

Step 3. Listen: It’s not about you

09:11 - 09:14

Step 4. Don’t do “it”: Design “why”

09:14 - 09:17

Step 5. Be George Lucas: Tell Stories

09:17 - 09:20

Step 6: Face your fear: “Luke I am your father”

09:20 - 09:23

Step 7: Be the 1%: Don’t work for change. Be change. 09:23 - 09:26 Bonus Step: The Triangle of Pixel Love

09:26 - 09:28

Next Steps: Getting Started

09:28 - 09:30

Thank You

09:30

groopskool.net

2

s nu Bo

The Triangle of Pixel Love Three factors determine the direction your website should take. The first factor is your brand: Who are you? What do people say about you? Everything from what type of content to color to interaction style depends on who you are. The second factor is your goal: What goals are you trying to achieve with your initiative? Do you want to increase online sales? Do you want to make your customer service better? Do you want to increase enrollment? Finally there is the third and most important factor, which is your user. Who are they? What do they need? Meeting their needs is the key imperative. If we meet their needs, we have succeeded.

Your Brand

Your Goals

3

Users’ Needs

s nu Bo

Your Brand

Your Goals

Users’ Needs

s nu Bo

Branding vs. Identity What is Branding? A set of qualities, ideas, and attributes promised and delivered in every experience and every interaction a person may have with a company Branding is not objective; instead it is a set of feelings and philosophies. It’s the gut feeling a customer gets when they think of you. The qualities that make up any company’s brand will inform the way that company presents itself and conducts business. From the highest levels of management to the smallest components of everyday interactions, a brand should be legible, clear, and well-articulated. How is Identity different? A Company’s Identity system is the visual expression of the brand through an identity (symbol and logotype), typography, color palette and layout. But how do I define a brand? A Company’s Identity system is the visual expression of the brand through an identity (symbol and logotype), typography, color palette and layout.

Nike’s Logo

vs Customers Feeling

5

s nu Bo

Define Your Brand Attributes (Example) In each of the categories below write as many adjectives that describe your business. Our users We are:

are:

(our culture)

(our

General:

community)

We make you

We tangibly

Our Personality

feel:

help you:

is:

(value, emotional,

(benefit, time, money,

qualitative)

quantity)

(brand voice)

•Impactful

•Flat

•Busy

•Empowered

•Increase

•Personal

•Interdisciplinary

•Engineering

•Intelligent

•Helpful

•Medical

•Technological

•Healing

•Visionary

•Fun

•Fun

•Tech

leaders •Smart •Giving •Do good •Social •Work/life balance •Bio medical •Creative •Patients •Egotistical •In Need •Medical professional s •Wealthy •Skeptical •Practical •Data •Discerning •Challengin g the status-quo •Profession al •Engineerin g •Seeking •Caring •Leaders

(quality of life) •improves life •Increases mobility •Free coffee •Decrease health care cost •Idea > clinical study (end to end) •Decreases risk to the commercial sector •Creates jobs •Decreases time to market

satisfaction •To be a part of a revolution or movement / Purposeful •Hope •Relationships •Esteem •Connections to smart people •Enjoyment •Be part of something big •smart people •Manifestation

loving •Team oriented •Collaborative •Non-political •Flat •Entrepreneurshi p

•Giving •Altruistic •Practical •Visionary •Innovative •Cutting-edge •Supportive •Academic •Challenging •Demanding •Improving •Healing •Purposeful •Super

Smart

•Nerdy •Long

term •Think tank •Selfless •Creative •Philanthropic •Brilliant •Engineering •Logical •Entrepreneurial •RIO •Diverse

•Proud •Busy •Charismatic •Dynamic •Entrepreneurial •Focused •Driven •Direct •No

BS

•Logical •Efficient •Fancy •Funny •Loving •Introverted •TED •Curious •Picky •Bold •Outside-the-

box •Examining •Caring

“Our website communicates our innovations to busy leaders in a bold and intelligent manner by expressing our ability to increase quality of life and our purpose driven approach.”

6

© GroopLab LLC, 2009 - 2011

Define Your Brand Attributes

45 Min

In each of the categories below write as many adjectives that describe your business.

General:

We are:

Our users

Our

We make

We tangibly

(our culture)

are:

Personality

you feel:

help you:

(our

is:

community)

(brand voice)

(emotional, qualitative)

(time, money, quantity)

______________ provide(s) ______________ to ______________ in a(n) Name (Your Organization)

Product / Service

Users

_______________ and ______________ way to help them ___________ Culture

Personality

and _____________. Value

7

Benefits

s nu Bo

Your Brand

Your Goals

Users’ Needs

s nu Bo

The Basics What do I need to define about my user? To start a name, any name. One that reflects their background. Giving them a name begins to make them real. You don’t have “customer 1” as a customer, you have Linda Johnson as a customer. Second demographic information such as age, gender, income & marital status. Third, their story. Describe the situation they are in that has created potential interest in your product or service. Finally, what do they need from your product or service? This can be a feature or it can be an attribute of how the feature work such as “easy to use”.

DealPro User Profiles

Light User

Active User

The Celebrity

“Betty Eno” - “The DIY-er - Future Martha Stewart” Female, Brooklyn New York Age: 31 Engaged Ex - Advertising Creative Director

“Abhay Modi” - “The Frugal Gadget Dude” Male, Austin, Texas Age: 26 Software Engineer Single

“Anna Walker” - “The Celebrity DealPro” Female, Detroit Michigan Age: 46 Former Auto worker Married, 3 kids

Betty just got laid off from an Ad agency where she was a creative director. She is a “planner” and has sufficient savings until she gets another job. Betty loves all things “Home” and “Cooking”. Her blog http://epicureanquest.blogspot.com/ gets good traffic and attention. Now that she has some time she is beginning to plan a business around her blog.

Abhay is an engineer at an Austin tech company. He prides himself at having all the latest tech at the greatest prices. He wears “savvy frugal” on his shoulder. He loves being helpful and sharing. Makes him feel valuable and smart.

Anna worked in the Automotive industry for 20 years. Assembly line worker for 12 years, Administrative Assistant to UAW Labor Relations Dir. for 8 years. She took voluntary retirement and used her buyout to start her own online business. She writes the blog DetroitDealMama.com. She will introduce her upcoming book “Deal with It Honey: Living Large at a Small Price & Other Adventures in Stylish Frugality” on Oprah.

‣To have fun while finding deals ‣Easy to use commenting tools ‣The best deals ‣To know how Savings.com could fit her new venture ‣To make new online friends ‣To get followers for her blog by ‣To discover that she could provide value to others

‣People to like his deals ‣Affirmation from other users ‣The best deals ‣Feedback ‣To increase his following ‣To know how to better promote himself ‣API for him to make his own Savings.com

‣Easy to use site, she is busy ‣Easy to integrate features ‣To know that Savings.com will increase her traffic ‣To know that Savings.com won’t damage her image ‣ Monetization possibilities ‣Exposure ‣Feedback & ideas from her fans

sharing her awesomeness.

apps

Value Prop

Save money, interact and have fun, “you too can be a DealPro”. “It’s easy!”

Get recognized while sharing your vast wisdom with the unwashed masses. You are a “Nerd” god. Chicks dig you.

Savings.com is an awesome partner to help grow your brand and user base. They will help me make more money.

Core Message

Save money, have fun & discover that you could be a DealPro. It’s super easy.

Others will know you are a god on Savings.com and chicks will dig you.

We are an awesome partner to help you grow your brand and users which will help you make more money.

Story

Needs

Please Note: These profiles are done with DealPro recruitment

9

in mind. They are figurative and should only be used as a guide.

Rebecca Morse - Career Changer Story:

Demographic:

‣ She was a TV/Movie Producer.

‣ Female ‣ 36 yr ‣ Married ‣ 1.5 Kids ‣ Husband Mike Morse, Technologist

Succesful, she is tired of the grind. Wasn’t creatively fulfilled.

‣ Technical creative - she has done a lot of creative work but not for herself.

‣

Keen on sustainability. Social justice and personal growth.

and .com veteran

‣ SF Area

Goals (objectives):

Needs:

‣ Freedom and creative ownership ‣ More money ‣ Be part of something bigger than

‣ Guidance, examples ‣ Knowledge ‣ Peace of mind ‣ Others, other cdoe ‣ Peerage / community ‣ Easy ‣ Efficiency ‣ Direction ‣ Customize / Relevant ‣ Guided

oneself

‣ Change pace/ change her own pace

‣ Flexibility, Freedom ‣ Authorship ‣ More efficient

10

s nu Bo

User 1 - Name (Title) Story:

Demographic:

Goals (objectives):

Needs:

11

s nu Bo

Your Brand

Your Goals

Users’ Needs

Every organization has a myriad of things it CAN / WANTS to do the question that helps us build towards success is what does YOUR organization NEED to do. The purpose of this exercise is to evaluate the objectives of your engagement around the following 3 core activities: 1. Increase Engagement 2. Promote Message & Brand 3. Provide Information The goal of this exercise is to objectively evaluate and prioritize YOUR goals in order to provide focus, relevance and actionability as we start this process.

13

© GroopLab LLC, 2009 - 2011

s nu Bo

Your Business Goals

Term

Desirability

Total

Online donations

10

10

Nice page that doesn’t get stale

10

10

Contact

10

10

Apply for a job

10

10

Video profiles of employees

6

6

Video Case studies

8

8

Gala profiles

10

10

Imagery to humanize/inspire/energize

10

10

Clear user path/navigation/easy access

10

10

Search optimization/Meta tags

5

5

Short

Clear Landing

10

10

Short

Look & Feel / Brandmark - Consistent

10

10

Constructed messaging

10

10

AMF Logo, naming, site landing URL, etc.

10

10

Tours & Events

5

5

Conference Meetings we participate/are mentioned in

5

5

Organizational Partners

9

9

Industry news & Coverage - curated

6

6

Short

Short Mid

14

Concept

s nu Bo

Increase Engagement

© GroopLab LLC, 2009 - 2011

Term

Concept

Obtainability

Desirability

s nu Bo

Increase Awareness (Mindshare, Publicity)

Total

0 0 0 0 0 0 0 0 0 0 0 0 0 0

15

TM Simplify

Digital.

About Groop Skool Groop Skool is a labor of love. It’s the culmination of my 15 years in web design. As a young web designer at Razorfish it became quickly apparent that what I loved to do was to nurture up and coming talent, and share my experience with them. Even earlier as a computer lab assistant at Art Center College of Design I would spend hours helping not only with technical problems but teaching and sharing with students struggling with their assignments. As Chief Visionary at The Groop, the digital agency I co-founded in 2001 I take great joy in helping facilitate business opportunities and solve the business challenges that our clients face. In 2008 I created a seminar and workshop series called Evil Businessman. Tongue in cheek title aside my goal was to teach creative entrepreneurs the basics of creating businesses online. At the core of the curriculum was the idea that one of the biggest obstacles in executing digital businesses was the different of languages spoken by the disciplines involved. The curriculum helps simplify digital by making it visual and interactive. In mid 2009 I was struggling to figure out how to make what The Groop did more streamlined and less painful. Late one afternoon, as I walked down a flowery path in the corn fields park in downtown Los Angeles it suddenly struck me that the answer was the same. That language was also the main obstacle. This is why I am excited to share with you the tools that we created to help you align these different interests and help you keep your projects on track. My promise to you is that your digital projects don’t have to be as difficult as they are today and that if you use even one of the tools we are sharing with you it will make a marked impact. We are excited to help you simplify digital. groopskool.net

© Groop Skool 2011-2011

16

TMSimplify

Digital.

The Groop System

1. Inception

2. Execution

3. Launch

Phase

The Idea Phase

Design & Build

Plan & Iterate

Obstacles You’ll Face

1. Shiny object syndrome

1.Different languages and interests

1.Lack of launch (QA scripts) plans

2.Lack of buy-in and consensus

2.Not knowing what to do next

2. Brainstorming alone 3. Not knowing your users

Toolkits

3.No clear user based script

3.No system to get user feedback

1. Business Prioritization Workshop

1. The Groop Brief

1. QA Toolkit

2. The Groop Planning Kit

2. Release Planning Toolkit

2. Brand Workshop

3. User Story Toolkit

3. Metrics & User Testing Toolkit

Motivation Commitment Clarity

Confidence Adoption Learning

3. User Definition Team Feels

Purpose Focus Clear Priorities

© Groop Skool 2010 - 2011

17

TMSimplify

Digital.

Notes

groopskool.net

18