Power of Office at your fingertips. Imagining a new type of mobile input that combines intelligence and productivity. Microsoft profile page
Designer, Android engineer
Founded project and led product & design
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.
Initially, I began with the following prompt:Phone's lack multi-window supportIt is painful for users to jump around apps to get stuff done
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)
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.
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
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
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!
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
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.
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.
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
- Wired - Microsoft's New Android Keyboard Cuts Down on App-Jumping
...The problem, says Steve Won, a senior designer at Microsoft Office, is everything is siloed. "On a small screen, there isn't a scalable way to run apps side by side. The interesting UX challenge for the small screen is breaking down these silos and having what the user needs readily available," he says...
...But what makes the Hub Keyboard so unique and promising is that it helps us use our phones more like we use our computers; crazily, quickly, and with plenty of shortcuts. It's the direction we've headed for years, without the interface or input device to do it right. That may be about to change, or at least take a big step in the right direction...
- Business Insider - Microsoft just came up with a brilliant way to switch between apps without ever visiting your phone's home screen
...In a blog entry, Microsoft explains that Hub Keyboard is the brainchild of Steve Won, who works on the Microsoft Office team as a designer. After sharing the idea and taking it to fruition as an "internal science fair" project, the Microsoft Garage skunkworks decided to release it to the world.
The essential idea behind Hub Keyboard, Won says, is that apps may behave differently, but they all have to use a keyboard. By making the keyboard the place where information is collected, it's a common way to work between different apps...
- Fast Co.Design - Microsoft's Experimental Keyboard Aims To Solve A Major Mobile UX Problem
...On your laptop, apps exist in a grid. You can drag a link, a contact, or some text from one app into another. On a smartphone, though, apps pile on top of each other as a stack: You can only deal with one at a time. That's why multitasking is one of the biggest UX problems on smartphones, but now Microsoft wants to solve it-not with new touch gestures or OS tricks, but with a simple software keyboard...
- Thurrot - Microsoft Hub Keyboard Brings App Content Sharing to Android
...Very, very interesting...
- The Verge - Microsoft’s new Android keyboard gives you quick access to contacts and files
...Hub gives it another opportunity to see what features might catch on and how it can better integrate services like Office 365 and translation...
- Business Insider - 12 things Microsoft does better than Apple (Reason #10)
...The Microsoft of the last few years has also been better at experimentation. That includes coming out with lots of experimental apps for Android and iPhone, including the recent Hub Keyboard, which cuts down on the time you have to switch between apps...
- The Next Web - Microsoft’s Hub Keyboard Android app puts productivity at your fingertips
...Essentially, rather than bring you a world of emoji at your fingertips, you have access to your clipboard, contacts, documents, and in-line translation right from the keyboard...
- The Microsoft Garage celebrates 2 years as a powerful resource for trying new ideas
...Won’s experience speaks to a core grounding within The Garage, Ramos says: To be able to work with a diverse set of people and teams all across Microsoft and all over the world...
- ZDNet - Microsoft's new Android app puts Office 365 in the keyboard
- VentureBeat - Why mobile keyboard apps matter to Microsoft
- lifehacker - Microsoft's Hub Keyboard Quickly Copies Info from Other Apps, No App Switching Required
- Engadget - Microsoft's Android keyboard puts files and people within reach
- 매일경제 - `차고`로 들어간 공룡 MS, 재빠른 치타로 변신중
- PCWorld - Microsoft's Hub Keyboard gives you one-touch access to all your Office content
- Android Authority - Microsoft’s Hub Keyboard brings extra features to your fingertips
- Digital Trends - Microsoft’s Hub Keyboard for Android blends functionality with multitasking
- AndroidHeadlines -Microsoft Hub Keyboard Changes How You Copy and Paste
- TECH INSIDER - Microsoft has a brilliant way to switch between apps without visiting your home screen
- TECHTIMES - Microsoft’s Hub Keyboard For Android Has Access To Your Office Files, Contacts And A Translate Button
- Softpedia - Microsoft Launches Hub Keyboard for Android
- ubergizmodo - Microsoft Launches Hub Keyboard On Android
- Phandroid - Microsoft releases new keyboard for Android fresh after purchasing Swiftkey
- Android Police - Microsoft Hub Keyboard Comes To Android With All Things Microsoft In Tow
- androidcentral - Microsoft's Hub Keyboard lets you access your clipboard, documents and more
- WinBeta - Microsoft Garage releases another new Android app, Hub Keyboard
- MSPoweruser - Microsoft Garage release innovative replacement “Hub Keyboard” for Android
- AndroidBeat - Microsoft Hub Keyboard lets you copy and paste quickly, share contact information, and more