Company
Hewlett-Packard
Role
Interaction Designer
Deliverables
Logic flows, Prototypes, Interaction Specifications for IOS, Android, Mac, Windows
Tools
Adobe XD
Background
A change in the HP privacy policy called for updates that needed to be made to the HP Smart app. Design was tasked to work with business, legal, marketing, and development to provide the UX framework and deliver the the update across all platforms (IOS, Android, Windows, Mac).
As an interaction designer on the Printer Setup team I had to collaborate closely with many teams such as: legal, marketing, development, and the Smart app design team as well.
Impact
Impact
Opt in rates exceeding expectations by 47-52%
The deployment of the new framework and design resulted in a ~57% conversion rate for usage data.
This was a pleasant surprise, because it was informally predicted that we’d be looking at a ~5-10% opt in rate.
Before
After
Process
01
Gather requirements
understand the legal team's request
02
empathy mapping
co-create a UX framework
03
Design + Iteration
Developing logic flows, wireframes, copy and prototypes
04
reflections
REflection and ux impact
01
Gather requirements
02
empathy mapping
03
design+ iteration
04
reflections
Gathering Requirements
Understanding new data collection parameters
The project started with documenting data collection sources and purposes. This was done in collaboration with the legal and engineering teams.
Previously the HP Smart app data collection policy required an intentional opt-in in order for any data collection of the users phone and printer to occur. With the new framework, data collection deemed as absolutely necessary for basic functions of the app were to be integrated into the terms of use. If a user wanted to use the app, they need to agree to those terms. We also have to provide users with a clear opt in or out for platform specific usage data not entirely necessary to use the app.
01
Gather requirements
02
empathy mapping
03
design+ iteration
04
reflections
Empathy Mapping Workshop
Aligning within the organization
Approach
We held a design thinking workshop including designers from the Setup and App teams to develop the an empathy framework.
This allowed us to effectively collaborate across teams and align on one vision.
Goals + Rationales
In this workshop we brainstormed what how we want users users to feel, think, and do. Afterwords we prioritized the aspirations and translated them into “How Might Wes”.
The biggest design goals identified from the workshop focused on being transparent with users and instilling trust in their choice to use HP’s products.
01
Gather requirements
02
empathy mapping
03
design+ iteration
04
reflections
Logic Flows
One piece of the redesign
User Flows
Once the overall design intent was put I worked with the Setup team’s lead architect to align on the best place of the privacy screens within the app setup app flows for both first time and non-first time user variants.
Logic Flows
Detailed interaction logic flows that accounted for technical and legal requirements. This became an artifact that was often used in stakeholder meetings to create a common understanding of the direction and align teams on a path forward.
01
Gather requirements
02
empathy mapping
03
design+ iteration
04
Reflections
Copy and Prototypes
One piece of the redesign
Copy
Working together with a copywriter, legal, and marketing representative, we created the copy displayed across the privacy notices. I drove the conversation across teams and drafted the early versions/reviewed later ones throughout the process.
We iterated through many versions based hoping to find the balance between design goals we established from our workshop, legal compliance, and app key selling points.
Prototypes
I then put together a prototype with final copy, visual design, and animation together for the deliverable.
Prototype link:
https://xd.adobe.com/view/77cf9d8e-e062-4e0a-bfbe-6785744ece95-229c/
01
Gather requirements
02
empathy mapping
03
design+ iteration
04
Reflections
Reflections
Overall, our team deemed the project a success. That didn't mean there weren't problems however.
Main Challenge: Visual Design Implementation to Spec
The part of this project that was the most difficult was the visual design implementation. It took looking at the Test Flight version of the app to discover that there were many surprising differences between implementation across development teams post demo. Because we didn’t aware of these changes after the demo, the visual design (especially the Android platform) was compromised upon release. We had to escalate the findings and move quickly to ensure this could be fixed as soon as possible in upcoming releases.
