Create an engaging mobile application to showcase HP's new text recognition (OCR) technology.
I was the Lead Interaction Designer. My co-conspirator for this project was Shiae, an amazing Visual Designer. To kick-off our project, we met with the engineering team to learn about the new technology, review its capabilities and its constraints, and decide on the user stories to include in the demo.
For a mobile project like this one, our main considerations were:
* Will this be an internal demo or customer facing proof of concept?We begin each project by understanding its core purpose. For this project, we needed to clarify if the design was for an internal demo, highlighting a specific concept for management, or if it was intended for a customer-facing presentation, acting as a proof of concept for potential technology licensing to external companies.
* Is the operating system relevant?
Is the demo intended to be optimized for a particular mobile OS, such as iOS or Android? Tailoring the design to a specific platform can improve usability and performance, but it also requires extra time and effort. Clarifying this requirement early in the project ensures that our design efforts are focused and aligned with expectations.
* How much generative or evaluative research is needed?
Initially, we decided that primary and secondary user research was not necessary given the small scope and objectives of this demo. As we progressed and defined several novel interface elements, we incorporated two rounds of lean usability testing to evaluate the efficacy of our approach.
* Is adherence to the corporate style guide required?What visual style suits this demo? Do we use the corporate style guide or choose a more generic approach?
* How much UX time and effort is needed for this project?What is the scope of the project in terms of the number of workflows and screens that need to be developed? We use this information to determine which resources (research, interaction design, and visual design) we need to assign to the project, as well as work out the effort, schedule, and overall cost of the project for the statement of work (SOW).
As we entered the design stage, we broke down the project's main goals into distinct requirements. This approach helped us stay focused on delivering precisely what was needed.
Visual instructions were used to introduce the use of the shutter button for translating text.
We used common and familiar components for the shutter icon and framing target.
Displaying the translated text as an overlay in live view created the visual interest we wanted to showcase this technology.
We needed a way to switch languages for our internal testing. We built it using a standard design pattern in order to reduce the risk of interaction issues in a background feature.
This secondary feature was requested by the dev team to support testing requirements. We placed it off screen, under the menu, where it could be accessed when needed.
By the end of the week, we had a working version of the mobile app for user testing. We side-loaded the demo .apk onto an Android phone for our test device.
We ran 5 usability sessions with internal employees selected from different departments and roles. We asked each participant to 'think out-loud' as they used the app to translate text found in a series of images we provided.
I partnered closely with a visual designer for all stages of this project. These are the final screens produced from the demo.
