Weekend Web Workshop
Simple, visual, interactive and fun user experience workshops to help you get digital.
What your get in this workshop:
- What is User Driven Design?
How to incorporate Brand Strategy into User Experience
How to Prioritize Website Features
How to Create Site Maps and Wireframes
Why should I attend?
- If you are looking to get a job in the digital space
- If you are a start up looking to “get it right”
- If you are looking to advance your career
- If you are a print designer and are curios what “the fuss is all about”
For more information and a schedule of the two days please visit:
Groopskool.net or contact us at skool@thegroop.net
6. Brand Driven Design
Three factors determine the direction your website and sales
platform 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 Users’
Goals Needs
6
9. 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
9
11. 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: (emotional, (time, money,
community) (brand voice) qualitative) quantity)
______________ provide(s) ______________ to ______________ in a(n)
Name (Your Organization) Product / Service Users
_______________ and ______________ way to help them ___________
Culture Personality Benefits
and _____________.
Value
11
12. Love / Hate Listing
Bo
n
us
The purpose of this exercise is to identify the things that we appreciate,
admire, engage and want to emulate as well as those things we want to stay
far far far far far away from in both the digital / online environment as well as
real world. Please fill out each respective column with corresponding brand
logos (at least 10 per column please).
Things we LOVE Things we HATE
12
15. The Basics
Why do I need to do this?
You know that customers are the most important thing in your business and
therefore they are the most important driver of what you do online.
Creating a tangible picture of who your customer is requires you to “really see
them” and to understand their needs. The first step is creating a customer profile.
Whether you have done many of these or this is your first time our goal is to help
you make these customers real, both in their profile form here but also in sales.
How do I come up with my customers?
If you are an existing business, you know them because you deal with them all the
time. More importantly you likely have some data of who they are. If you are a new
business and have already defined them you have them written down somewhere
or in your head. If you are the founder of a start-up there is a high likelihood that
you yourself are the main customer profile or know someone close to you is.
Who are your customers?
15
16. The Basics
What do I need to define about my customer?
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”.
16
17. User 1 - Name (Example)
Story: Demographic:
‣ Physicians working at the top of their ‣ Neurosurgeon, mid-late career
game, very competitive
‣ Late 40s/early 50s
‣ Have a shared research interest
‣ Academic medicine, probably at a
‣ Have several patents with a condition that teaching hospital - USC
is being researched by AMF
‣ Funded by an NIH grant
‣ Personal referral or recruited directly
‣ Clinical trial every other year as principal
investigator
‣ Married to another academic who works
full time
‣ 2 kids,
Goals (objectives): Needs:
‣ Wants to work with people who can ‣ To see that we can facilitate their trail
provide them with level of service and
‣ Unique things we have that no one else
medicine does
‣ Wants to help patients ‣ Presentation of services - showing what
‣ Wants a specific trail for their production we provide over others
‣ Find this synergy & fit for them ‣ Information about devices - detailed
‣ Cutting edge organization ‣ To see connections to their population/
practice
‣ Find a good partner match
‣ To see direction of current projects (novel
ideas)
‣ Validation as an entity of experience
‣ Visualize process
‣ See how we work w/partners (modifying
IDEs, etc.)
‣ To see market viability & innovation
(Research Partner)
17
18. User 1 - Name (Title)
Story: Demographic:
‣ ‣
Goals (objectives): Needs:
‣
18
19. User 1 - Name (Title)
Story: Demographic:
‣ ‣
Goals (objectives): Needs:
‣
19
20. User 1 - Name (Title)
Story: Demographic:
‣ ‣
Goals (objectives): Needs:
‣
20
21. User Definition: Example
DealPro
User
Profiles
Active User The Celebrity
Light User
“Abhay Modi” - “The Frugal Gadget Dude” “Anna Walker” - “The Celebrity DealPro”
“Betty Eno” - “The DIY-er - Future Martha Stewart” Female, Detroit Michigan
Female, Brooklyn New York Male, Austin, Texas
Age: 26 Age: 46
Age: 31 Former Auto worker
Engaged Software Engineer
Single Married, 3 kids
Ex - Advertising Creative Director
Abhay is an engineer at an Austin tech Anna worked in the Automotive industry for 20 years.
Betty just got laid off from an Ad agency where she was a Assembly line worker for 12 years, Administrative
Story company. He prides himself at having all the
creative director.
latest tech at the greatest prices. He wears Assistant to UAW Labor Relations Dir. for 8 years.
She is a “planner” and has sufficient savings until she She took voluntary retirement and used her buyout to
“savvy frugal” on his shoulder. He loves being
gets another job.
helpful and sharing. Makes him feel valuable start her own online business. She writes the blog
Betty loves all things “Home” and “Cooking”. Her blog DetroitDealMama.com. She will introduce her
http://epicureanquest.blogspot.com/ gets good traffic and and smart.
upcoming book “Deal with It Honey: Living Large at a
attention. Now that she has some time she is beginning
to plan a business around her blog. Small Price & Other Adventures in Stylish Frugality”
on Oprah.
‣People to like his deals ‣Easy to use site, she is busy
Needs ‣To have fun while finding deals ‣Easy to integrate features
‣Easy to use commenting tools ‣Affirmation from other users
‣The best deals ‣To know that Savings.com will increase her traffic
‣The best deals
‣Feedback ‣To know that Savings.com won’t damage her image
‣To know how Savings.com could fit her new venture ‣ Monetization possibilities
‣To make new online friends ‣To increase his following
‣To know how to better promote himself ‣Exposure
‣To get followers for her blog ‣Feedback & ideas from her fans
‣To discover that she could provide value to others
by ‣API for him to make his own Savings.com
sharing her awesomeness. apps
Get recognized while sharing your vast Savings.com is an awesome partner to help grow
Save money, interact and have fun, “you too can be a your brand and user base. They will help me make
Value
DealPro”. “It’s easy!” wisdom with the unwashed masses. You are a
Prop “Nerd” god. Chicks dig you. more money.
Others will know you are a god on We are an awesome partner to help you grow your
Core Save money, have fun & discover that you could be a brand and users which will help you make more
DealPro. It’s super easy. Savings.com and chicks will dig you.
Message money.
in mind. They are figurative and should only be used as a guide.
Please Note: These profiles are done with DealPro recruitment
21
22. Users / Messaging (Example)
Robert & Susan
Bill Navin Melinda
Name Grant
Potential Current
Role The Donor Research Partner
Employee Employee
‣ Fun ‣ Consistency ‣ Familial • Proud
‣ Impacting ‣ Establishment ‣ Accepting • Celebratory
‣ Hopeful ‣ Direct, matter of fact ‣ Encouraging • Uplifting
Tone ‣ Authentic ‣ Successful & ‣ Empowering • Not-fluffy
confident ‣ Fun • Vernacular
• Simplified
• Results-oriented
‣ Legacy ‣ Successful in ‣ Today, employees, • Pride
‣ Direct Impact on a translational research facilities, history • Feeling of
personal level ‣ Core skill sets ‣ Small size, no accomplishment
• Show others, friends,
‣ Tangible Purpose ‣ Idea to bureaucracy
Value Prop ‣ Proven impact
family, recruitment
commercialization ‣ Lifestyle
• Unity of vision
‣ Track record ‣ Individual
• What is happening
‣ Great people, tools,
vision & challenges
‣ Videos ‣ Timeline of history/ ‣ Video stories • Diagramatics
‣ Historical case studies accomps ‣ Highlight tools • Stories & statements
‣ Gala history ‣ Information ‣ Photography • Photography
‣ Wiki ‣ Wiki • Employee history/
Metaphors
‣ [Visual/Engage/Inspire] narratives
‣ [Factual/Informational] ‣ [Visual/Engage/Inspire]
[Visual/Engage/Inspire]
Writing needs to be authentic, confident and
Directors empowering. Images and visual language need to
Comments be celebratory and heroic.
22
23. Messaging
Messaging informs the tone, features and design
aesthetic that the audience will interactive. It is built
around our user base and what their needs are to create
the most effective interaction through the site user path.
Picture Picture Picture
Name
Role
Tone
Value Prop
Metaphors
23
26. User Stories
Based on our users needs let’s map out the story of you will help them accomplishing their goals.
Type Title Title Title
User Name 1 Name 2 Name 3
User Story 1 Enter story... Enter story... Enter story...
User Story 2 Enter story... Enter story... Enter story...
26
32. Brand Driven Design
Three factors determine the direction your website and sales
platform 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 Users’
Goals Needs
4
43. Organizational Objectives + User Goals = Features
Now we tie the objectives of your Organization to the needs of your Users to identify key Feature Sets.
We then prioritize these feature sets across the categories to identify our priorities.
User 1 User 2 User 3
Type Primary Goal Primary Goal Primary Goal
Primary Need Primary Need Primary Need
Organizational
Objective 1
Organizational
Objective 2
Organizational
Objective 3
Organizational
Objective 4
15
46. User Stories
Based on our users needs let’s map out the story of you will help them accomplishing their goals.
Type Title Title Title
User Name 1 Name 2 Name 3
User Story 1 Enter story... Enter story... Enter story...
User Story 2 Enter story... Enter story... Enter story...
18