damkee
Sungjoon Steve Won's Portfolio
hubkeyboard_thumbnail.jpg

Hub Keyboard / 2016

Story and design process behind Microsoft Hub Keyboard.

Sungjoon Steve Won. damkee.com

HUB KEYBOARD / 2016

Imagining a new type of mobile input that combines intelligence and productivity.
Microsoft // Product profile page
 

ROLE

Lead for Product & Design, Founded Project / Microsoft.

Directed the project and releases for Android and follow-up variation for iOS.

Hub Keyboard began as my personal project, which eventually grew into a cross-team effort of 7 engineers and designers from across the company. My responsibilities included forming the team, leading the team of designers and engineers, driving the product vision and overall design, helping engineer the Android client, and managing release for the product. We've shipped the north star version on Android and created an iOS variation after the Android release. 

Released Android on February 2016, released iOS variant on April 2016.
The app retired from Play Store on February 2017 and from iOS App Store slightly afterwards.


HOW IT STARTED

One of the key inspirations came from an artifact which was an output from a week long design sprint. There was a post-it that mentioned something about "keyboard". It wasn't incorporated as part of the final output, and noone was digging deeper into it. So, I decided to spin it off as a side project. This was March 2015.

Around the same time, I was making an observation that intrigued me very much. What the users care about are actually spread across the different applications, however, these applications are silo-ed from each other without a way to easily talk to each other. For the small screen, such as our smartphones, there wasn't a scalable way to run apps side-by-side nor there was an ALT+TAB like the desktop. Thinking about this problem together with the idea of a keyboard sparked a lot of the inspirations in the beginning phase of the project.


BEGINNING PROMPT / THE PROBLEM SPACE

Initially, I began with the following prompt:

  • Phone's lack multi-window support

  • It is painful for users to jump around apps to get stuff done


INSIGHTS

As I started gathering the relevant insights from previous user studies, searches online, and personal experiences, a few things stuck out to me above others.

  • What user types into the keyboard is all manual and intentional.

  • Keyboard is one of the most direct ways of user input. Users easily associated a keyboard with a place to go to and make input. What if the keyboard was more than just alphanumeric characters and can be generalized to include richer forms of input?

  • Keyboard is one of those special surfaces that span across all applications and could act as a bridge.

  • In smartphones, all applications must conform to the rules of a soft keyboard (for example, re-layout elements when the keyboard is up/down, be able to accept input from a keyboard)

 

CONCEPT DIRECTION

After a round of brainstorming the relevant problems and thinking about different ways to approach them, I decided to set the concept direction to create a

Keyboard that can
Kill the need to jump around windows,
Be your genie in a bottle

 A room where we laid out a summarized version of the process. February 2016.

A room where we laid out a summarized version of the process. February 2016.

 

DESIGN & SCIENCE FAIR

Then began iterations and iterations of brainstorming - designing - prototyping. Prototyping was extra important than most of the projects I've worked on in the past for a number of reasons. Keyboard is different from a typical app. It has a special set of privileges (for example, being able to run in any app that has a text input field) and a different set of platform capabilities. Learning how to implement a native keyboard on Android and iOS while prototyping really helped understand these aspects to broaden and speed up the design process.

 One of the design variations

One of the design variations

After a number of iterations during the first three months, I decided to share what I've been working on in an internal science fair at Microsoft. I had two goals in mind. One, get a set of feedback from a wider group of folks outside the direct design team I was a part of. The science fair was open to anyone in the company, so I expected to be able to talk with an array of people. Second, find other people who might be just as passionate as I am about solving this problem space. I wanted to transform this from a personal project into a properly funded project with more people. Hub Keyboard (which was called by another project name at the time) was received very well. It received the most number of votes from attendees, winning the People's Choice Award, and also received the President's award from the head of our division. The people I've met also helped push this project forward in the coming months.

 One of the perks for winning the President's Award - Blowing up the Science Fair Volcano!

One of the perks for winning the President's Award - Blowing up the Science Fair Volcano!


BUILDING THE TEAM

Eventually, after almost a half year working on this alone, I was able to bring together a team to help bring Hub Keyboard to life. More about the team below:

 The team (Top left to clock-wise): Steve Won, Nishadi Kolonne, Sunmin Chung, Benny Chau, Jignesh Panchal, Elmar Langholz, Jason Kim

The team (Top left to clock-wise): Steve Won, Nishadi Kolonne, Sunmin Chung, Benny Chau, Jignesh Panchal, Elmar Langholz, Jason Kim


MAKING IT REAL

The prototypes I've built served as the foundation for the code base of the actual product. And as the focus shifted more towards the actual implementation, I was able to help out on Android by writing code in areas where I could contribute. Other main responsibilities included running the engineering scrums, working with internal release-related teams to get everything signed off for the release, and creating the roadmap and strategy beyond V1. 

I've also led the effort to run usability testing on our primary design variations, and learned from the study insights to iterate to a design that combined the best from each of the designs.

 

PRODUCT RELEASE

In February 23, 2016, Hub Keyboard has finally shipped to the public. It's been a great journey, and I am thankful for everyone who's trusted me and helped make this happen. This has been a truly design-led project, from the start to the very finish, and it made me believe that it is possible to lead grassroots innovation even in big companies like Microsoft. 

 Hub Keyboard, Live in Google Play Store. An iOS variation was shipped a few months afterwards.

Hub Keyboard, Live in Google Play Store. An iOS variation was shipped a few months afterwards.

 

FEATURE SET

Isn’t it painful to switch between apps just to complete your routine on-the-go tasks?

Hub Keyboard lets you stay in context by bringing information from different services to your fingertips and help complete your tasks faster. Sign in with your Office 365 work or school account to unlock access to more information.

Use Hub Keyboard when you need:
• Clipboard: Easily insert one of your recently copied items
• Documents: Grab and share URLs of Office 365 documents in OneDrive and SharePoint
• Contacts: Share information of a contact from your phone or your Office 365 account
• Web and News: Search for and share website and news
• Translate: Translate what you are writing to another language


PRESS