UCD14 Talk - Scott Weiss - Design at SwiftKey

INSIDE SWIFTKEY

Scott Weiss, VP of DesignOctober 2014

02 Inside SwiftKey for UCD 2014

ABOUT SWIFTKEYTEAM MAKEUP AND APPROACH

SWIFTKEY FOR IPHONE AND IPAD BRAND REFRESH

ABOUT SWIFTKEY

Inside SwiftKey for UCD 201403

We’re best known for smart SwiftKey Keyboard apps which learn from you to make typing on touchscreens faster and easier. SwiftKey Keyboard for Android is Google Play’s most popular keyboard app, topping the global best-seller list in 2012 and 2013. SwiftKey Keyboard for iPhone, iPad and iPod touch had more than 1m downloads in its first day of launching on the App Store, hitting No 1 in the US and UK free charts. It follows the earlier success of Note, a note-taking application for iPhone and iPad.

ABOUT US

THE COMPANY

Our mission is to build technology that makes it easy for everyone to create and

communicate on mobile.

Found on more than 200 million devices


OUR PRODUCTS

NOTE

Faster note taking, showcasing the SwiftKey prediction technology.

Click for Video

https://www.dropbox.com/s/f8fvyak2g33wgzs/UX-Award-SK-note-entry.mov

https://www.dropbox.com/s/f8fvyak2g33wgzs/UX-Award-SK-note-entry.mov


KEYBOARD FOR ANDROID

OUR PRODUCTS

The SwiftKey Keyboard for Android increased its userbase by 50% by going free in 2014.

We introduced the SwiftKey Store, from which 17 million themes have been downloaded.

Click for Video

https://www.dropbox.com/s/wgpo5j3ixufgpud/UX-Awards-SK5-entry.mov

https://www.dropbox.com/s/wgpo5j3ixufgpud/UX-Awards-SK5-entry.mov


OUR PRODUCTS

KEYBOARD FOR IPHONE & IPAD

Downloaded more than 1 million times in its first 24

hours

Hit No. 1 in the free app charts in the US and UK



SWIFTKEY FOR IPHONE AND IPADBRAND REFRESH

TEAM MAKEUP AND APPROACH


SwiftKey has three offices, headquartered in London.

STAFF & LOCATIONS

ALL STAFF 165DESIGN TEAM 10VP 1UX DESIGN 5VISUAL DESIGN 2RESEARCH 2

LONDON (HQ)SAN FRANCISCO SEOUL

WHERE WE ARE

VISUAL + UX DESIGN + RESEARCH

Design gradually grew, to a team of four at the end of 2013.

THE TEAM LAST YEAR


UX DESIGN

RESEARCH

VISUAL DESIGN1

1

2

VISUAL + UX DESIGN + RESEARCH

We’ve more than doubled in a year. We now have 5 UX Designers, 2 Visual Designers, and 2 Researchers.

THE TEAM NOW


UX DESIGN

RESEARCH

VISUAL DESIGN2

2

5

DESIGN VISION

We came up with a team vision when our design and development process was shared with the wider company.


We bring SwiftKey technology to life through personal,

beautiful experiences

WE MEAN WHAT WE SAY


HOW WE WORK

12

AGILE UXWIKI

TICKETING

SCRUM

PRODUCT

OWNERSHIP

DESIGN AND DEVELOPMENT PROCESS

We work with Development throughout the product cycle.

HOW WE DO IT


REQUIREMENTSDEVELOPMENT

IDEAS

RESEARCH

DESIGN

DEVELOPMENT SPIKES &

DISCUSSION

DESIGN

CODING

USABILITY RESEARCH

REQUIREMENTS ADJUSTMENTS

TESTING

DELIVERY

DESIGN WORKFLOW AND DELIVERABLES

We practice all the standard methods of UX design and research.

HOW WE DO IT


PERSONAS

FLOW DIAGRAMSUSER JOURNEYS

SCENARIOS

STORYBOARDS

HIGH FIDELITY MOCKUPS

USABILITY TESTING

COMPLETED DESIGN

INTERACTIVE PROTOTYPES

WIRE FRAME DRAWINGS



SWIFTKEY FOR IPHONE AND IPAD BRAND REFRESH

SWIFTKEY FOR IPHONE AND IPAD



IOS ALLOWS THIRD PARTY KEYBAORDS

In June, Apple opened up iOS 8 to third party keyboards.


IOS ALLOWS THIRD PARTY KEYBOARDS


There were some challenges...


IOS LAUNCH

FIRST PASS AT INSTALLATION INSTRUCTIONS

Thought this illustration was a button

60% of users referred back to these instructions, which they found hard to follow

SUCCESS RATE

40%


USABILITY SUCCESS

AT LAUNCH

Graphics reduced in size and border removed

Instructions were presented in a numbered, vertical list

SUCCESS RATE

80%



SWIFTKEY FOR IPHONE AND IPAD BRAND REFRESH BRAND REFRESH


SWIFTKEY’S PREVIOUS LOGO

WHERE WE STARTED


SWIFTKEY’S NEW LOGO

WHERE WE ARE NOW

WHAT WE ARE LIKE

SwiftKey’s tone of voice defines how we communicate with our users and each other.

It is at the heart of everything the brand does, from the Keyboard themes to the website.

It encapsulates the style of SwiftKey’s unique personality.

TONE OF VOICE


ThoughtfulIntelligent

HumbleInnovative

FriendlyQuality

SwiftKey is...

WE ARE FRIENDLY & PERSONABLEWe are conversational. We use friendly and helpful words that relate to our users.

We aren’t generic or impersonal.

TONE OF VOICE


SwiftKey is now installed on the device.

Thanks for installing SwiftKey. We hope you enjoy it.

Too formal and about the technology rather than the user

Friendly and relates to the user rather than the device

WHEN THINGS GO WRONG

We write error messages in an informative, friendly way. We offer up a solution to the problem where possible. When not possible, we acknowledge and support the user.

TONE OF VOICE


SwiftKey Store failed to load. The Google Play application is out of date. Update the Google Play application to access the SwiftKey Store.

Oops, SwiftKey Store needs a Google Play update. After updating, please have another go.

Technical, repetitive & unfriendly

Succinct, friendly & yet informative

THEMES

Just like a user’s keyboard theme, the SwiftKey brand can adapt to the occasion.

Your business card might have the Bell theme while your colleague has the King theme. Just like how SwiftKey’s keyboard themes work.

These brand themes relate to the colour only and are named after great writers, and communicators, and scientists of our time.

COLOURS


KAHN

EDISON CERF DICKENS

ELIOT HOPPER

BELL(PRIMARY)

THEMES:BELL (PRIMARY)

Named after the inventor of the telephone Alexander Graham Bell, this is the primary theme.

When one theme is necessary, i.e. for a company letter head, use this theme.

Try incorporating both the blue and the green in the photography.

Bell Solid, the teal, is our hero colour.

COLOURS


#50D393R080 G211 B147

C60 M00 Y60 K00

#28B8CER040 G184 B206C70 M00 Y20 K00

Bell SolidUse this single colour alternative when gradients aren’t appropriate; e.g., colouring of text.

Rough proportioning of colour

#309DFFR049 G157 B255C70 M34 Y00 K00

THEMES:KHAN

Kahn is one of the six secondary themes and is named after Bob Kahn, an American electrical engineer, who, along with Vint Cerf, invented the Transmission Control Protocol (TCP) and the Internet Protocol (IP), the fundamental communication protocols at the heart of the Internet.

Notice how the highlight colour in the photography matches the red colouring.

COLOURS


#EB4A4BR235 G074 B075

C00 M87 Y70 K00

#FF6662R255 G102 B098C00 M75 Y55 K00

#FF6662R255 G102 B098C00 M75 Y55 K00

Kahn SolidUse this single colour alternative when gradients aren’t appropriate; e.g., colouring of text.


THEMES:ELIOT

Eliot is the purple secondary theme and is named after playwright T. S. Eliot.

Each theme should be a roughly 50/50 balance between its gradient and white space.

COLOURS


#A03B75R160 G059 B117

C40 M90 Y28 K00

#AF528AR175 G082 B138C34 M80 Y20 K00

#AF528AR175 G082 B138C34 M80 Y20 K00

Eliot SolidUse this single colour alternative when gradients aren’t appropriate; e.g., colouring of text.


#427EDER066 G126 B222C75 M49 Y00 K00

THEMES:HOPPER

The Hopper theme is named after Grace Hopper, a computer scientist and United States Navy rear admiral. She developed the first compiler for a computer programming language.

COLOURS


#426FCER066 G111 B206

C79 M56 Y00 K00

Hopper SolidUse this single colour alternative when gradients aren’t appropriate; e.g., colouring of text.


#427EDER066 G126 B222C75 M49 Y00 K00

THEMES:EDISON

Named after Thomas Edison, the inventor of the light bulb among many other amazing things, this is another of the six secondary themes.

As a guide, gradients go diagonally from corner to opposite corner, with the lighter colour at the top.

COLOURS


#F37E30R243 G126 B048

C00 M62 Y92 K00

#F49F2DR249 G159 B045C00 M44 Y94 K00

#F49F2DR249 G159 B045C00 M44 Y94 K00

Edison SolidUse this single colour alternative when gradients aren’t appropriate; e.g., colouring of text.


THEMES:CERF

The final coloured theme is named after Vint Cerf, an American internet pioneer, who is recognized as one of the fathers of the Internet, sharing this title with American engineer Bob Kahn.

COLOURS


#13BD6DR019 G189 B109

C76 M00 Y80 K00

#27D27BR039 G210 B123C64 M00 Y74 K00

#27D27BR039 G210 B123C64 M00 Y74 K00

Cerf SolidUse this single colour alternative when gradients aren’t appropriate; i.e., colouring of text.


THEMES:DICKENS

When a colour is not applicable or appropriate the Dickens theme can be used.

This theme is named after Charles Dickens, the renowned novelist.

COLOURS


#464646R070 G070 B070

C00 M00 Y00 K90

#636363R099 G099 B099C00 M00 Y00 K76

#636363R099 G099 B099C00 M00 Y00 K76

Dickens SolidUse this single colour alternative when gradients aren’t appropriate; e.g., colouring of text.


IN-PRODUCT:APP ICONS

The same app icon is used for both the Android and iOS version of the SwiftKey Keyboard, the only difference being that the iOS version does not have the shadow of the Android version.

COLLATERAL


IN-PRODUCT:GOOGLE PLAY

Further examples of the Android app icon in use.

COLLATERAL


IN-PRODUCT:KEYBOARD

Nickel is the default Keyboard theme for SwiftKey Keyboard.

The highlight colour is the blue from the Bell theme.

COLLATERAL


IN-PRODUCT:SPACE BAR

Follow these guides for placement of the SwiftKey logo on the in-app space bar.

When the language selector is present on the space bar, the logo should not display.

COLLATERAL


Center

20% transparency

x = 1/4 heightof space bar

x

THANK YOUFor further information, contact:

Scott Weiss: [email protected]

mailto:scott%40swiftkey.com?subject=SwiftKey%20Brand%20Guidelines