Can we enable users to continue interacting with a whiteboard on their mobile device?
It's a familiar scene - you've been hammering out great ideas on the whiteboard with your teammates. The meeting wraps up (or you're kicked out of the conference room), so you grab your phone and take a photo of the whiteboard. What happens next? The photo languishes on your phone, or at best gets attached to an email that nobody ever refers to again. Wouldn't it be better if your team could continue working on your whiteboard collaboration as an interactive document - with text, drawings, and all?
I led the design of SMART InkScan, a mobile app that converts handwritten artifacts into digital SMART ink™. Users can begin brainstorming on a whiteboard or even the back of a napkin, and seamlessly continue working from their mobile device. For users with access to a SMART Board, InkScan converts your photos into digital ink and sends them directly to a SMART Board, allowing teachers and students to continue working interactively with their content.
I received a promotion and a company award for my work on this project.
- Role: UX Designer
- Tools: Sketch, InVision, Adobe CC, Zeplin
- Timeline: June 2017 to February 2018 (9 months)
• Alison: UX Designer
• Manat: Product Manager
• Jeff: Dev Manager
• Serena: User Researcher
InkScan was a greenfield project - not building on any of our existing products. SMART has unique tech and wanted to share it to make people’s lives easier. The tech converts handwritten text into digital ink that can be scaled and manipulated. It allows users to take static content and make it interactive. My UX challenge was figuring out exactly how to apply that technology to solve real user needs.
Key questions:• What user needs can we address with this technology?
• What kind of app should we build?
• Should it be optimized for a phone or a tablet? (it would certainly be responsive, but we needed to understand the primary use case)
"Continue" is a Top NeedI dug into SMART’s prior User Research to uncover unmet needs. It showed that the ability to continue work on a whiteboard (and in general) was a common user need. InkScan could allow us to satisfy this unmet user need.
After determining that "continue" was the user need we could best solve with this technology, we needed to decide exactly what type of productivity app to build. There were 3 main types of productivity apps that would make good use of our technology - a note-taking app (like Notability), a general productivity app (like Evernote), or a scanner app (like CamScanner).
Competitive AnalysisFor this project, I took on many tasks normally handled by a Product Manager. At the time, our very competent PM was also very over-extended. To keep the project moving ahead, I conducted extensive competitive analyses, looked at monetization opportunities, total available market, the market share of existing apps, and compared the features of different types of productivity apps.
After sharing my research with my team, we determined that the best use of our tech would be a scanner app that could allow users to continue their work. Our main differentiator was that our tech could allow users to continue to interact with the original content, not simply capture it and then annotate on top.
OptimizationOur next step was deciding whether it should be optimized for a phone or tablet. Our assumption was that in order to record an idea before it’s gone, you’ll work with the device you have on you - most likely, your phone. We validated this assumption with users. We asked 270 scanner app users what device they use. The answer was clear.
User SurveyUser Research is always crucial with new products. 270 participants completed our screener survey. Then 42 participants answered detailed questions and submitted actual scanned artifacts. We showed those users a demo of digital ink and they evaluated its perceived usefulness.
Our demo showed a photo of a whiteboard being converted to digital ink. Then the user was able to interact with the original whiteboard content. The demo and some of their quotes are below.
Unlike our other software products, InkScan was aimed for a general audience, not just education. As the design progressed, that aim stayed the same, but we also discovered impactful ways to distinguish it from other scanner apps, while integrating it into our EdTech ecosystem in a unique way. If a teacher has access to a SMART Board, then they get bonus functionality and more ways to continue their work - not just on their mobile device, but also on the SMART Board.
Interaction FlowsI did some "quick and dirty" User Research by analyzing the reviews of other popular scanner apps to discover unmet needs. By far, the biggest unmet need was being able to easily scan multi-page documents. After making that discovery, I pivoted to make that a priority in my interaction flows.
Specialized ToolsetsI determined that there are 4 main types of artifacts which get scanned: printed documents, receipts, whiteboards, and handwritten notes. The printed artifacts have a different set of user needs than the handwritten ones. For example, a printed document might require a signature, while a handwritten note would never need one. Therefore, I designed two different document-type flows through the app, each with specialized sets of tools.
The design constraints for this project were challenging and fun. It was my first time designing a fully-fledged iOS app. I had to balance iOS design guidelines with SMART branding and the constraints of a very small screen size.
Below is a prototype of the app created for testing and for communicating the interaction flows to our dev team.
Marketing and BrandingAs the design progressed, I also stepped up to help with marketing. We had to determine the best ways to market the app on a budget, how to set up the pricing structure (it's a free app with in-app purchases), what to name it, and how we could market it without the support of a dedicated marketing team. SMART's Marketing team is experienced in selling hardware and software for education, but not a general audience mobile app, so this whole project was a bit of an experiment for the company.
We used two main methods to test SMART InkScan before release - Heuristic Evaluations, and an internal beta release. The beta release provided extensive UX feedback and uncovered several bugs for our developers to fix before the public release.
This mind map created by our Test Manager shows an overview of the actions available to InkScan users.
I worked closely with our Documentation Team to direct and produce this video which demonstrates how to use InkScan.
In about 9 months, our small team built a brand new, mobile scanner app. Our key differentiator is “digital ink” – the ability for the user to continue to interact with the original content, not just annotate on top of it. We launched in February 2018. Here are some of our metrics and reviews from shortly after launch.
Personal Growth and RecognitionWhile working on InkScan, I was promoted to Senior UX Designer. I also received an individual President's Club Award, an internal company award which “recognizes an employee who exhibits exceptional performance, exceeds job requirements, and displays initiative.” Below are some quotes from the award presentation. This particular award is pictured in the center of the photo below (the other awards are ones I received for other projects at SMART).