Twine Creative Brief August 8, 2008
About this Document This brief is a beginning, not the answer. It is a jumping off point. A summary of all that we have heard about what Twine is and what Twine isn’t. The brief is a tool that will form the basis of design explorations around a new look and feel for the Twine.com website. The goal is to provide the feeling of what Twine.com should be so that we will know it when we see it and be able to discuss the results using a common vocabulary. This document synthesizes what we’ve learned from The Guild’s positioning and design directions, our visual explorations of those brand attributes and our personas — in an effort to guide the creation the new Twine product brand.
AUGUST 2008
PAGE 2
What Makes Twine twine?
the consistent visual voice that translates & evokes the essential qualities of the brand
The Twine Brand Every well‐deVined brand makes a promise. Whether people trust a brand and eventually become loyal is a function of how well that promise is kept every time you interact with them.
Tag Line
Twine’s positioning statement, developed by The Guild, is an excellent tool for deVining the brand and driving internal strategy. The Brand Promise is a similar tool, but it approaches brand from the opposite direction — from the outside in — to deVine what the brand should represent to an individual Twine member. It can help articulate the kind of relationship we want to establish with that individual. It should answer the question: “What does Twine promise me?”
Twine should make people say
The Brand Positioning Twine is a new network for keeping track of interests. It can be used individually and also with groups and communities. The technology behind Twine automatically organizes information, connects related ideas and helps members discover new things related to their interests. It’s for creators who help build our collective consciousness, researchers who want a more intuitive resource for gathering information and information junkies who want more from the web.
Twine ties it all together.
“That was easy.” “Thanks for pointing that out.” “You’ve got to try Twine!” “It’s the best way to keep up...” “Wow! That’s cool!” “Wow, I’m loving Twine more and more.”
Twine should make people feel Energized Smart Refreshed Delighted Cool
The Brand Promise
Like a member of a special club
“Twine promises me a more intuitive way to use the web. It’s the best place for me to share and Vind information around my interests.”
AUGUST 2008
PAGE 4
The Twine Signature and System Logo
Palette
Illustration Style Flat; optimized to use CSS properties
Spelling the word Twine Twine should always be capitalized when referring to the application (“Twine”) but lowercase (“twine”) when referring to an interest group.
AUGUST 2008
PAGE 5
The Twine Signature and System Identity Fonts The DIN font family has been chosen for the Twine identity system.
Application Fonts The Arial and Helvetica font families is used in the Twine user interface.
AUGUST 2008
PAGE 6
Brand Attributes During our research we have heard a number of Twine attributes.
Additional Comments Twine is alive, pulsing, always current, but it’s not chaotic. Twine delivers a lot…quickly and with simplicity.
Useful
Stylish
Enlightening
Easy
Energetic
Smart
Articulate
Approachable
Helpful
Twine Vits into people’s lives; it’s a tool they need, want and value.
Friendly
Fresh
Pulsing
Ambitious
Evolution
Organized
Twine makes correct associations, but they’re not always obvious. It should surprise and be clever, but not unpredictable.
Clever Surprising
AUGUST 2008
Quick Valuable
Twine is an evolution of what people use now. It’s ambitious and powerful but it shouldn’t overwhelm them.
Stimulating
Twine’s audience is educated. Speak clearly to them and honor their intelligence.
Connected
Twine’s audience is savvy. Give them something of substance AND style.
PAGE 7
Visual Language Exercises visual deVinitions of Twine’s brand attributes
Twine Today ScientiVic Brainy Cold Impersonal Techy Masculine Antiseptic
AUGUST 2008
PAGE 9
Setting the Mood In order to draw out emotional associations with Twine’s brand and begin the discussion around how the brand can be presented at the product level, we mapped Twine’s key brand attributes (Bold, Kinetic, Relevant, Enabler & Creator) to visuals, creating mood boards. In the exercise, there was consistent preference for imagery that was human, elegant, crisp, clean, simple, direct uncluttered, reVined but approachable, warm but intelligent and design‐oriented. We found that images expressing Bold involved an element of risk and that it was most difVicult to associate imagery with Relevant and Enabler. The following pages take you through our interpretation of what we heard.
AUGUST 2008
PAGE 10
Bold Visual DeCinition We’re daring; Twine is ambitious. Bold is an attitude, an energy — not necessarily a bright or Vlashy color palette. We take risks; we’re cutting edge; Twine is the next wave. Twine is new. We’re asking users to try something new too. Sophisticated; crisp; clear; elegant; involved elements of risk.
AUGUST 2008
PAGE 11
Kinetic Visual DeCinition Twine is alive; never stagnant. There’s a constant pulse; but it should not feel frenetic. Human input, passion and creativity make Twine kinetic — not machines, data or code.
AUGUST 2008
PAGE 12
Creator Visual DeCinition Twine can do a lot, but it needs a person. Upscale; sophisticated; “high art.” Twine is intelligent and so are our users; honor them. Twine members create with clarity; vision and maturity. Twine’s form of creativity is new colored pencils and a moleskin notebook more than messy Vinger paints or paper mâché.
AUGUST 2008
PAGE 13
Enabler Visual DeCinition Twine assists you in getting somewhere. Twine helps you discover. Twine shows you the way. Twine enables the world. With Twine, we’re leading you into the future.
AUGUST 2008
PAGE 14
Relevant Visual DeCinition Twine is relevant to who you are. Twine is integrated into daily life. Twine connects you to the world and to a world of connected ideas.
AUGUST 2008
PAGE 15
Web Site Design: inspiration We reviewed a range of sites and chose some that represent characteristics and fundamental elements of design important to Twine: aesthetics, visual communication, modernism and presentation of content.
AUGUST 2008
Blurb | www.blurb.com • Nice use of layering and texture • Crisp; good contrast • Direct, modern, clean photography
FriendFeed | www.friendfeed.com • Clean, clear, simple • Nice use of white space
Like | www.like.com • Clean, simple, uncluttered • Nice use of white space and limited palette • Less common, fresh • Stylish
Tumblr | www.tumblr.com • Flat design with nice use of subtle texture • Muted palette with good contrast • Simple UI showcases user content well • Canvas is too dark; oversized elements too trendy
Instructables | www.instructables.com • Strong grid system • Approachable; friendly palette • Clear organization of content • Too noisy, orange and saturated
Freebase | www.freebase.com • Clean, uncluttered • Approachable
Brightkite | www.brightkite.com • Strong grid system, easily scannable content • Calls to action are easy to locate • Flat design, minimal use of gradients • Dislike cartoon illustrations
Getty Images | www.gettyimages.com • Nice search and Viltering system • Visual language of UI is pushed back to showcase photos
PAGE 16
Have You Met Sara, Kristen and Eric? you’re about to know them really well
Twine’s Target Users Personas are a user experience design tool used to describe a user’s motivations, attitudes and behaviors based on quantitative and qualitative research. They provide a focus to the product design and development process, taking the “me” out of the picture and assist us in prioritizing features based on customer needs. Meet your users.
Primary
SARA the Digerati
AUGUST 2008
Secondary
KRISTEN the Networker
Future
ERIC the Skeptic
PAGE 18
SARA the Digerati “My life is brimming online and offline. I am an early adopter of new technologies. You can find me everywhere and anywhere. Thousands of people follow me online.” MOTIVATION Sara is an active blogger and networker, and her professional and social life are all blended into one. Sara is well known in silicon valley, and has internet followers across the country. Creating community and establishing connections with people is at the core of her being, and the internet enables her to reach beyond her city limits.
ATTITUDE TOWARDS TECHNOLOGY
PRIMARY
• I love my internet friends. • I strive to be authentic in my online interactions and proViles. • I am aware of the risk to my reputation from things I post online.
AGE: 25 to 35 STATUS: Single EDUCATION: BA INCOME: $100k or greater OCCUPATION: Marketing Mgr. LOCATION: San Francisco HOMETOWN: Atlanta
Utilities Delicious Google Groups Wikis Wordpress FriendFeed RSS
Services Flickr Vimeo Craigslist
Devices iPhone Macbook Pro iPod Flip video camera
Search Google Wikipedia YouTube Yelp
News NY Times SFGate TechCrunch Various blogs
1. Promote her self‐brand by sharing with the world at large ‐ her personality, perspectives and opinions 2. I want to join new sites more easily. I don’t want to re‐create my network on every site.
QUESTIONS
DIGITAL PROFILE Networks Facebook LinkedIn Twitter Digg Upcoming Tumblr Pownce
GOALS
ONLINE BEHAVIOR
• I create accounts for most new sites, but I may not use them after I sign up. • I write a blog, author reviews on Yelp and post to Flickr daily. • I organize parties and events for my friends and my employer. •I don’t interact with the same people in every network I join
Who do I already know that’s using this site? Why is Twine better than Digg or Yahoo groups? What is the semantic web?
INTERESTS Music, Technology, Events & Parties, Food & Restaurants, Travel
PAGE 19
Sara the Digerati Lifestyle & Brand AfCiliations Young Digerati are the nation’s tech‐savvy singles and couples living in a fashionable neighborhoods on the urban fringe. Young Digerati communities are typically Villed with trendy apartments and condos, Vitness clubs and clothing boutiques, casual restaurants and all types of bars ‐ from juice to coffee to microbrew. source: Claritas PRIZM NE market segmentation
AUGUST 2008
PAGE 20
Sara the Digerati kinetic
constantly changing social butterfly
bold
unabashed lifestreamer lifestreaming
creator
active author & blogger
relevant
early adopter of everything new
enabler
connects to people & connects ideas
AUGUST 2008
PAGE 21
KRISTEN the Networker “My LinkedIn is purely professional. My Facebook is 50% professional...it gives me more insight into my colleagues.” MOTIVATION Kristen is grounded in the real world, in “Cirst life.” She has kids, a family and she’s always very busy. Time is precious. These obligations drive her decisions on how to spend time online. She may be busy but she is tech‐savvy. She’ll use social networking sites if she can see a tangible value. Value means added insight into colleagues or richer connections with communities that share her interests. She is greatly inVluenced by her friends, and will join networks that her friends are using or have recommended.
ATTITUDE TOWARDS TECHNOLOGY
SECONDARY AGE: 32 to 45 STATUS: Married EDUCATION: BA INCOME: $100k or greater OCCUPATION: IT Consultant at Gap LOCATION: Mill Valley HOMETOWN: Berlin
• I participate in a networks that provide me clear value. • I’m not interested in every network (MySpace is for a younger audience). • I expect quality and I don’t like clutter. I want to control what I see. • I grapple with what to share publicly and what to keep private.
GOALS 1. Share and receive information from friends and coworkers in a trustworthy environment 2. Maintain awareness of what is happening in her communities 3. Discover easier ways to communicate with different groups of people in her life
QUESTIONS Why should I join this network?
DIGITAL PROFILE Networks Facebook LinkedIn
Utilities Google Groups Wikis iGoogle IE Bookmarks
Services Kodak Gallery Evite Craigslist
Devices Blackberry PC Laptop
Search Google Wikipedia YouTube Yelp
News CNN SFGate
ONLINE BEHAVIOR
• I opt out of newsletters and think of them as spam. • I no longer update my MySpace proVile, but I monitor my daughter’s. • I am active in the local German community online and ofVline.
Who is behind this new service? Who participates in this community?
INTERESTS Cooking, German Heritage, Travel, Parenting, Food & Restaurant
PAGE 22
Kristen the Networker Lifestyle & Brand AfCiliations Executive Suites consist of upper‐middle‐class singles and couples typically living just beyond the nation’s beltways. Filled with signiVicant numbers of Asian Americans and college graduates ‐ both groups are represented at more than twice the national average ‐ this segment is a haven for white‐ collar professionals drawn to comfortable homes and apartments within manageable commute to downtown jobs, restaurants and entertainment. source: Claritas PRIZM NE market segmentation
AUGUST 2008
PAGE 23
Kristen the Networker bold
independent; strong opinions
relevant
informed by mainstream media outlets
creator
kinetic
capturing her personal history
active & busy; time is precious
enabler
building stronger relationships
AUGUST 2008
PAGE 24
ERIC the Skeptic “I won’t join a network unless my friend has convinced me to.” MOTIVATION Eric sees the internet as a utility, but not a way of life. Eric leads an active lifestyle, and spends a limited amount of time online when he’s not at work. Eric is interested in technology, but is not an early adopter. He is more likely to try a new social network if his friend has told him about it Virst. Eric rarely updates his MySpace proVile, and isn’t actively seeking out online communities.
FUTURE AGE: 36 to 40 STATUS: Single EDUCATION: BA INCOME: $100k or greater OCCUPATION: Account Mgr. LOCATION: Oakland HOMETOWN: Hayward DIGITAL PROFILE Networks Facebook MySpace
Utilities Yahoo Finance Mapquest Hotmail
Services Buy.com Amazon Bank of America Craigslist
Devices Search News Treo personal Yahoo Sportsline Nextel work SmarterTravel SFGate PC desktop
Lifestyle & Brand AfCiliations This target user ATTITUDE TOWARDS TECHNOLOGY requires future Affordable housing, abundant I may not want to go through the effort of joining a network. • entry‐level jobs and a thriving research for both singles scene ‐ all have given rise • I keep my personal and my work life separate. design and product to the Boomtown Singles segment in fast‐growing satellite marketing teams.
However, we have mapped him to a market segmentation.
cities. Young, single, and working‐class, these residents pursue active lifestyles amid sprawling apartment complexes, bars, convenience stores and laundromats.
GOALS 1. Minimize participation in too many networks 2. Maintain my privacy throughout my online activities
source: Claritas PRIZM NE market segmentation
ONLINE BEHAVIOR
• I verify the sender of emails before following any links in the email. • I review products and services carefully before I buy or use them.
QUESTIONS Why has invited me to this network? What does this site have to offer me? Can I trust this site with my personal information?
INTERESTS Sports, Personal Basketball League, Investing
PAGE 25
Write Right Twine’s voice and tone
Twine’s tone of voice The tone of voice used in a product’s written content creates a mood. For Twine, we want that mood to feel energetic and lively while remaining calm and relaxed. We want the mood to be optimistic, open, enthusiastic and ready. Gender
Approachability
Coolness versus geekiness
Twine’s tone of voice is gender neutral.
Twine’s tone of voice is friendly, conversational, and even a little quirky. It’s not snarky, bland, boring, formal and deVinitely not cute.
Twine’s tone of voice is smart but cool, even spunky — most importantly it’s always approachable.
Male
Unisex
Female
Nerve
NetVlix
Etsy
Chow
Maxim
OpenTable
WeHeartIt
NFL
DailyCandy
TravelChannel
Amazon
Sephora
Digg
LonelyPlanet
Sassy & Snarky Conversational & Friendly
Technical & Geeky
Cool
Blurb
CNET
Apple
Yelp
Moo
Slashdot
Wired
BravoTV
Flickr
Makezine
Dwell
Tumblr
WordPress
Mog Reddit Del.icio.us
AUGUST 2008
PAGE 27
Twine’s tone of voice Words we should use on Twine
Additional Comments
Connect, connecting, connected Interest, interesting, interested Recommend, recommending, recommended Ready Share Track Easy Invite Join New Smart Try it
We want people to smile and even sort of laugh when they see messaging in Twine. We want copy to be entertaining and fun. The tone should convey a brand that has personality and character. It should help foster a passion around the brand. Twine is “cool” but it’s conversational and friendly. We’re not über‐cool, removed or better‐than‐you. We want Twine members to feel like they are a part of a special group. Twine isn’t exclusionary but it is special.
Words we should NOT use on Twine Awesome Don’t Error Functional Hip Mistake Object Obviously Semantic (use sparingly) Sexy Warning AUGUST 2008
PAGE 28
Making It Work
Twine’s browser speciVications
Browser SpeciVications ‣
1024 x 768 (which really means roughly 994 x 618 of usable real estate for designing)
‣
Design with liquid columns in mind for the main content column
‣
Twine is currently designed to only support FireFox, IE 7, and Safari. More browser support will be implemented in upcoming releases.
‣
A full audit of Twine.com’s accessibility has not been conducted but we follow these general design guidelines: • avoid embedding text in graphics • be aware of how graphics are impacted when fonts are manually scaled by the user (COMMAND +/‐) • label images with ALT text and anchor tags with titles • ensure icons have distinct silhouettes and don’t rely solely on color to distinguish difference • SEO assists with screen readers • using CSS properties to generate components assists with accessibility
AUGUST 2008
PAGE 30