27K Followers
·
Follow

Image for post
Image for post

How SwiftKey is using Material Design to boost user engagement

By Scott Weiss and Joe Woodward

Since SwiftKey Keyboard launched on Android in 2010, we’ve helped millions of people improve the way they type and express themselves through their phones and tablets. In 2014, after nearly four years as a successful paid app on Android, we took a leap and made SwiftKey free. This transition put us in a position to reach a much broader — and potentially more mainstream — audience.

2014 also marked the rollout of Google’s Material Design guidelines, which were conceived of to help Android developers weave a more consistent design narrative throughout apps on the platform. In light of both SwiftKey becoming free and the Material Design guidelines, we had a great opportunity to freshen up the appearance and also improve the user experience (UX) of SwiftKey.

Our design evolution happened in three stages: a brand refresh, including a new logo, the introduction of the SwiftKey Hub, and a redesign of the container app, or settings menu, which rolled out this week with the launch of SwiftKey 6. In this post, we’ll walk you through our design process, including some interesting surprises that led to measurable improvements for our users.

Logo & brand

Our previous brand, including logo, marketing materials, website, and the SwiftKey app, featured colorful gradients and various 3D effects. For our rebrand, we started by revising our color palette and gradients to a smaller and more defined set. These new visual components were chosen to convey a sense of fun, modernity and style, while retaining key elements of the previous SwiftKey brand and compatibility with the Material Design ethos.

Image for post
Image for post
SwiftKey’s updated brand colors and associated gradients

The new SwiftKey logo was made with a tighter color range. We settled on a flatter overall design and a simplified and modernized typeface for the logo, which better reflected SwiftKey’s commitment to simplifying and enhancing the typing experience:

Image for post
Image for post

Quick Settings to SwiftKey Hub

In preparing for this update, we studied customer reviews of SwiftKey and were surprised to see that users asked for features that were already in the product. Similar to web analytics, SwiftKey has telemetry built in to the app. Armed with this data, we took a close look at usage patterns and discovered that the “Quick Settings” had weaker engagement with customization features than we would have expected.

Usability testing revealed that the problem was with the call to action (CTA): it just wasn’t clear enough. The existing CTA was the SwiftKey logomark atop the ‘123’ key, which was only accessible via a long-press action. The most obvious change, swapping the CTA from the SwiftKey logomark to a gear (or cog) icon, would still have been linked to a long-press action, which we wanted to avoid.

Like many other designers, we noticed the web and Android application trend of using a three-stripe “hamburger” menu as the CTA to access settings. Hamburger menus are always at the upper left corner of a web site or app screen, so we positioned ours at the top-left corner of the keyboard.

UX testing proved that this change was successful: users not only discovered the hamburger CTA without prompting, but they spent time exploring the newly designed menu that was revealed when tapped. We named this new menu the “Hub”, and included all of the features from the Quick Settings, plus a few additional features to enable even more customization.

Image for post
Image for post
SwiftKey “Quick Settings” (before, left) and “Hub” (after, right)

We split the Hub into three tabs: the left to reflect the user and their personal details, the center for keyboard themes and the SwiftKey Store, and the right for customization features and access to the full container app. Each tab features a selection of “cards,” or rectangles with distinctive icons that represent the feature or collection of features to which they are linked. The icons are comprised of stacked images that cast shadows, just like objects in the physical world. This decision was influenced by the Material Design guidelines, which we interpreted using SwiftKey’s color palette.

Image for post
Image for post
SwiftKey’s new Material Design-compatible icons

We also built in animations to guide the user through the tabs, where cards decelerate into view when navigating into and between tabs. The Material Design guidelines refer to these transitions as “curved motion” to imitate how real world objects move. This animation is a “delighter,” adding fun to an otherwise utilitarian area of the product, encouraging users to spend the time to learn more.

SwiftKey Hub animation based on the principles of authentic motion

Since the introduction of the Hub, engagement with SwiftKey’s customization features, such as keyboard layout and the SwiftKey Store, has increased by 53%. We found that users are not only more likely to open the Hub than they were the Quick Settings, but they’re more likely to open it more times in their first week after downloading.

We’ve also seen that users navigate further within the existing settings to make deeper customization changes within the app from the Hub, which suggests that the visual, interaction, and motion design work together to create a more compelling product.

Container App Redesign

Image for post
Image for post
SwiftKey container app, before (left) and after (right)

SwiftKey’s UX research team invited SwiftKey users and non-users alike to our offices for usability testing sessions. We found that participants had difficulty with or didn’t understand certain product customization features. For example, novice users rarely explored settings in the “Advanced” section for fear of breaking something. Users looked for but were unable to locate ways to control the level of autocorrect available to them from within SwiftKey.

Our next step in the design process was to conduct open and closed card sorts both in-person and online in order to get a better understanding of how users would use and access the settings. We observed and recorded how participants clustered features and how they named those clusters. With this new data, we updated the product to reflect how participants expected it to work.

The design we settled on for the new homescreen would include four distinct color-coded sections to break the content down and help users navigate. We re-labeled the “Advanced” settings to “Typing & Autocorrect” and added descriptions below each setting so that users knew what to expect before trying them out. These sections included similar icons to those in the Hub to maintain design continuity.

Image for post
Image for post
Color coded sub-screen structure

We evolved the container app’s user stats listing into a series of cards, and surfaced these cards on the homescreen below the settings quadrant, which gives our users quick visibility into how SwiftKey has impacted their typing. Each card displays a single user stat, such as a “Typing Heatmap” that shows where the user taps individual keys. Other stats include an efficiency indicator, number of taps saved and number of words completed.

Through UX testing during the design and development cycle, and from our beta users, we learned that our new content segmentation has proven to be easier for users to navigate and discover customization features.

Takeaways

Image for post
Image for post
SwiftKey 6’s new onboarding, default theme, Hub, and homescreen

Written by

SwiftKey Keyboard is the hit keyboard app for iPhone & Android known for learning and predicting your writing style — your favorite words, phrases and emoji.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store