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
As a technology company that helps people write more quickly and with less effort, we needed a brand that communicated speed and efficiency, while also looking modern and stylish. Simultaneously, the mobile industry was undergoing its own transition toward flat, minimal UIs, reinforced with the arrival of Material Design.
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.
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:
Quick Settings to SwiftKey Hub
Our first official Material Design update came with the SwiftKey Hub. For several years, SwiftKey has included a mechanism to customize the app within the keyboard itself, in addition to via the homescreen, or “container” application. In previous versions we called this mechanism “Quick Settings”, which provided access to themes, keyboard undocking, a resizing facility, a variety of keyboard layout options, and a link to the container application. The “Quick Settings” appeared as a modal dialog above the keyboard.
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.
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.
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.
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
We had similar goals for the container app that we did for the Quick Settings redesign: make it easier for users to discover useful SwiftKey features and customize their typing experience — and make it look great, too. To make sure these aims were met, we looked to our users for input and testing.
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.
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
By focusing on usability and user-centered design, we effectively improved engagement within SwiftKey, and hope to see even more improvements post-launch of SwiftKey 6. We also successfully employed both visual and motion design to clarify concepts and welcome both new and existing users to more advanced features. The Material Design guidelines provided us with a rich framework, guided by the SwiftKey brand refresh. The end result is a friendlier, more attractive way to make SwiftKey work better for our users.
