UCD14 Talk - Scott Weiss - Design at SwiftKey
-
Upload
ucd-uk-ltd -
Category
Design
-
view
360 -
download
0
description
Transcript of 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
Inside SwiftKey for UCD 201404
OUR PRODUCTS
NOTE
Faster note taking, showcasing the SwiftKey prediction technology.
Click for Video
Inside SwiftKey for UCD 201405
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
Inside SwiftKey for UCD 201406
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
07 Inside SwiftKey for UCD 2014
ABOUT SWIFTKEYTEAM MAKEUP AND APPROACH
SWIFTKEY FOR IPHONE AND IPADBRAND REFRESH
TEAM MAKEUP AND APPROACH
Inside SwiftKey for UCD 201408
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
09 Inside SwiftKey for UCD 2014
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
10 Inside SwiftKey for UCD 2014
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.
11 Inside SwiftKey for UCD 2014
We bring SwiftKey technology to life through personal,
beautiful experiences
WE MEAN WHAT WE SAY
Inside SwiftKey for UCD 2014
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
13 Inside SwiftKey for UCD 2014
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
14 Inside SwiftKey for UCD 2014
PERSONAS
FLOW DIAGRAMSUSER JOURNEYS
SCENARIOS
STORYBOARDS
HIGH FIDELITY MOCKUPS
USABILITY TESTING
COMPLETED DESIGN
INTERACTIVE PROTOTYPES
WIRE FRAME DRAWINGS
15 Inside SwiftKey for UCD 2014
ABOUT SWIFTKEYTEAM MAKEUP AND APPROACH
SWIFTKEY FOR IPHONE AND IPAD BRAND REFRESH
SWIFTKEY FOR IPHONE AND IPAD
Inside SwiftKey for UCD 201416
KEYBOARD FOR IPHONE & IPAD
IOS ALLOWS THIRD PARTY KEYBAORDS
In June, Apple opened up iOS 8 to third party keyboards.
Inside SwiftKey for UCD 201417
IOS ALLOWS THIRD PARTY KEYBOARDS
KEYBOARD FOR IPHONE & IPAD
There were some challenges...
Inside SwiftKey for UCD 201418
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%
Inside SwiftKey for UCD 201419
USABILITY SUCCESS
AT LAUNCH
Graphics reduced in size and border removed
Instructions were presented in a numbered, vertical list
SUCCESS RATE
80%
20 Inside SwiftKey for UCD 2014
ABOUT SWIFTKEYTEAM MAKEUP AND APPROACH
SWIFTKEY FOR IPHONE AND IPAD BRAND REFRESH BRAND REFRESH
Inside SwiftKey for UCD 201421
SWIFTKEY’S PREVIOUS LOGO
WHERE WE STARTED
Inside SwiftKey for UCD 201422
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
23 Inside SwiftKey for UCD 2014
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
24 Inside SwiftKey for UCD 2014
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
25 Inside SwiftKey for UCD 2014
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
26 Inside SwiftKey for UCD 2014
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
27 Inside SwiftKey for UCD 2014
#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
28 Inside SwiftKey for UCD 2014
#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.
Rough proportioning of colour
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
29 Inside SwiftKey for UCD 2014
#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.
Rough proportioning of colour
#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
30 Inside SwiftKey for UCD 2014
#426FCER066 G111 B206
C79 M56 Y00 K00
Hopper SolidUse this single colour alternative when gradients aren’t appropriate; e.g., colouring of text.
Rough proportioning of colour
#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
31 Inside SwiftKey for UCD 2014
#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.
Rough proportioning of colour
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
32 Inside SwiftKey for UCD 2014
#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.
Rough proportioning of colour
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
33 Inside SwiftKey for UCD 2014
#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.
Rough proportioning of colour
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
34 Inside SwiftKey for UCD 2014
IN-PRODUCT:GOOGLE PLAY
Further examples of the Android app icon in use.
COLLATERAL
35 Inside SwiftKey for UCD 2014
IN-PRODUCT:KEYBOARD
Nickel is the default Keyboard theme for SwiftKey Keyboard.
The highlight colour is the blue from the Bell theme.
COLLATERAL
36 Inside SwiftKey for UCD 2014
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
37 Inside SwiftKey for UCD 2014
Center
20% transparency
x = 1/4 heightof space bar
x
THANK YOUFor further information, contact:
Scott Weiss: [email protected]