Scott Weiss - Design at SwiftKey SwiftKey is a London-based mobile software startup with a rapidly growing design team. We make the SwiftKey keyboard, the number one paid item on Google Play Store in 2013 and 2012, and SwiftKey Note, which has been downloaded more than one million times from the iOS App Store. This talk provides a glimpse into our processes for hiring, design, and research and some sample deliverables from the Design team for recent product releases.

1. INSIDE
SWIFTKEY
Scott Weiss, VP of Design
October 2014

2. 02 Inside SwiftKey for UCD 2014
ABOUT SWIFTKEY
TEAM MAKEUP AND APPROACH
SWIFTKEY FOR IPHONE AND IPAD
BRAND REFRESH

3. ABOUT US
THE COMPANY
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.
03 Inside SwiftKey for UCD 2014
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

4. OUR PRODUCTS
NOTE
Faster note taking, showcasing
the SwiftKey prediction
technology.
04 Inside SwiftKey for UCD 2014
Click for Video

5. OUR PRODUCTS
KEYBOARD FOR
ANDROID
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.
05 Inside SwiftKey for UCD 2014
Click for Video

6. OUR PRODUCTS
KEYBOARD FOR
IPHONE & IPAD
06 Inside SwiftKey for UCD 2014
Downloaded
more than 1
million times
in its first 24
hours
Hit No. 1 in
the free app
charts in the
US and UK

7. 07 Inside SwiftKey for UCD 2014
ABOUT SWIFTKEY
TEAM MAKEUP AND APPROACH
SWIFTKEY FOR IPHONE AND IPAD
BRAND REFRESH

8. STAFF &
LOCATIONS
SwiftKey has three offices,
headquartered in London.
08 Inside SwiftKey for UCD 2014
ALL STAFF 165
DESIGN TEAM 10
VP 1
UX DESIGN 5
VISUAL DESIGN 2
RESEARCH 2
SAN FRANCISCO LONDON (HQ) SEOUL
WHERE WE ARE

9. THE TEAM LAST YEAR
VISUAL + UX
DESIGN +
RESEARCH
Design gradually grew, to a team
of four at the end of 2013.
09 Inside SwiftKey for UCD 2014
UX DESIGN
RESEARCH
VISUAL
D1ESIGN
1
2

10. THE TEAM NOW
VISUAL + UX
DESIGN +
RESEARCH
We’ve more than doubled
in a year. We now have 5 UX
Designers, 2 Visual Designers,
and 2 Researchers.
10 Inside SwiftKey for UCD 2014
UX DESIGN
RESEARCH
VISUAL
D2ESIGN
2
5

11. 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

12. HOW WE WORK
AGILE UX
Inside SwiftKey for UCD 2014
12
WIKI
TICKETING
SCRUM
PRODUCT
OWNERSHIP

13. HOW WE DO IT
DESIGN AND
DEVELOPMENT
PROCESS
We work with Development
throughout the product cycle.
13 Inside SwiftKey for UCD 2014
REQUIREMENTS
TESTING
DEVELOPMENT
IDEAS
RESEARCH
DESIGN
DEVELOPMENT
SPIKES &
DISCUSSION
DESIGN
CODING
USABILITY
RESEARCH
REQUIREMENTS
ADJUSTMENTS
DELIVERY

14. HOW WE DO IT
DESIGN
WORKFLOW
AND
DELIVERABLES
We practice all the standard
methods of UX design and
research.
14 Inside SwiftKey for UCD 2014
PERSONAS
SCENARIOS
USER JOURNEYS FLOW DIAGRAMS
STORYBOARDS
HIGH FIDELITY
MOCKUPS
USABILITY TESTING
COMPLETED
DESIGN
INTERACTIVE
PROTOTYPES
WIRE FRAME
DRAWINGS

15. 15 Inside SwiftKey for UCD 2014
ABOUT SWIFTKEY
TEAM MAKEUP AND APPROACH
SWIFTKEY FOR IPHONE AND IPAD
BRAND REFRESH

16. KEYBOARD FOR IPHONE & IPAD
IOS ALLOWS
THIRD PARTY
KEYBAORDS
16 Inside SwiftKey for UCD 2014
In June, Apple opened
up iOS 8 to third party
keyboards.

17. KEYBOARD FOR IPHONE & IPAD
IOS ALLOWS
THIRD PARTY
KEYBOARDS
17 Inside SwiftKey for UCD 2014
There were some challenges...

18. IOS LAUNCH
FIRST PASS AT
INSTALLATION
INSTRUCTIONS
18 Inside SwiftKey for UCD 2014
Thought this illustration
was a button
60% of users referred
back to these
instructions, which they
found hard to follow
40%
SUCCESS RATE

19. USABILITY SUCCESS
AT LAUNCH
19 Inside SwiftKey for UCD 2014
Graphics reduced in size
and border removed
Instructions were
presented in a numbered,
vertical list
80%
SUCCESS RATE

20. 20 Inside SwiftKey for UCD 2014
ABOUT SWIFTKEY
TEAM MAKEUP AND APPROACH
SWIFTKEY FOR IPHONE AND IPAD
BRAND REFRESH

21. WHERE WE STARTED
SWIFTKEY’S
PREVIOUS
LOGO
21 Inside SwiftKey for UCD 2014

22. WHERE WE ARE NOW
SWIFTKEY’S
NEW LOGO
22 Inside SwiftKey for UCD 2014

23. TONE OF VOICE
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.
23 Inside SwiftKey for UCD 2014
Thoughtful
Intelligent
Humble
Innovative
Friendly
Quality
SwiftKey is...

24. TONE OF VOICE
WE ARE
FRIENDLY
& PERSONABLE
We are conversational. We use
friendly and helpful words that
relate to our users.
We aren’t generic or impersonal.
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

25. TONE OF VOICE
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.
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

26. COLOURS
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.
26 Inside SwiftKey for UCD 2014
KAHN
ELIOT HOPPER
EDISON CERF DICKENS
BELL
(PRIMARY)

27. COLOURS
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.
27 Inside SwiftKey for UCD 2014
#50D393
R080 G211 B147
C60 M00 Y60 K00
#28B8CE
R040 G184 B206
C70 M00 Y20 K00
Bell Solid
Use this single colour alternative
when gradients aren’t appropriate;
e.g., colouring of text.
Rough proportioning
of colour
#309DFF
R049 G157 B255
C70 M34 Y00 K00

28. COLOURS
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.
28 Inside SwiftKey for UCD 2014
#FF6662
R255 G102 B098
C00 M75 Y55 K00
#EB4A4B
R235 G074 B075
C00 M87 Y70 K00
#FF6662
R255 G102 B098
C00 M75 Y55 K00
Kahn Solid
Use this single colour alternative
when gradients aren’t appropriate;
e.g., colouring of text.
Rough proportioning
of colour

29. COLOURS
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.
29 Inside SwiftKey for UCD 2014
#AF528A
R175 G082 B138
C34 M80 Y20 K00
#A03B75
R160 G059 B117
C40 M90 Y28 K00
#AF528A
R175 G082 B138
C34 M80 Y20 K00
Eliot Solid
Use this single colour alternative
when gradients aren’t appropriate;
e.g., colouring of text.
Rough proportioning
of colour

30. #427EDE
R066 G126 B222
C75 M49 Y00 K00
COLOURS
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.
30 Inside SwiftKey for UCD 2014
#426FCE
R066 G111 B206
C79 M56 Y00 K00
Hopper Solid
Use this single colour alternative
when gradients aren’t appropriate;
e.g., colouring of text.
Rough proportioning
of colour
#427EDE
R066 G126 B222
C75 M49 Y00 K00

31. COLOURS
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.
31 Inside SwiftKey for UCD 2014
#F49F2D
R249 G159 B045
C00 M44 Y94 K00
#F37E30
R243 G126 B048
C00 M62 Y92 K00
#F49F2D
R249 G159 B045
C00 M44 Y94 K00
Edison Solid
Use this single colour alternative
when gradients aren’t appropriate;
e.g., colouring of text.
Rough proportioning
of colour

32. COLOURS
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.
32 Inside SwiftKey for UCD 2014
#27D27B
R039 G210 B123
C64 M00 Y74 K00
#13BD6D
R019 G189 B109
C76 M00 Y80 K00
#27D27B
R039 G210 B123
C64 M00 Y74 K00
Cerf Solid
Use this single colour alternative
when gradients aren’t appropriate;
i.e., colouring of text.
Rough proportioning
of colour

33. COLOURS
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.
33 Inside SwiftKey for UCD 2014
#636363
R099 G099 B099
C00 M00 Y00 K76
#464646
R070 G070 B070
C00 M00 Y00 K90
#636363
R099 G099 B099
C00 M00 Y00 K76
Dickens Solid
Use this single colour alternative
when gradients aren’t appropriate;
e.g., colouring of text.
Rough proportioning
of colour

34. COLLATERAL
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.
34 Inside SwiftKey for UCD 2014

35. COLLATERAL
IN-PRODUCT:
GOOGLE PLAY
Further examples of the Android
app icon in use.
35 Inside SwiftKey for UCD 2014

36. COLLATERAL
IN-PRODUCT:
KEYBOARD
Nickel is the default Keyboard
theme for SwiftKey Keyboard.
The highlight colour is the blue
from the Bell theme.
36 Inside SwiftKey for UCD 2014

37. 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.
37 Inside SwiftKey for UCD 2014
Center
20% transparency
x = 1/4 height
of space bar
x

38. THANK YOU
For further information, contact:
Scott Weiss: scott@swiftkey.com