Back to homeTo comply with my non-disclosure agreement, I have omitted confidential information.
The information in this case study is my own and does not necessarily reflect the views of Hewlett-Packard.
HP redesigned the existing mobile application of Large Format Printers to include a section for ink and paper consumption. Our challenge has been to create a flexible structure that supports adding new sections and content without having to redesign the application from scratch in the future.
I led the UI redesign of the mobile application for large format printers since the outset of the project in July 2015.
I partnered with two lead designers to uncover insights and translate concepts into features that address customer behaviors and motivations.
I created frameworks and prototypes to share the vision, design principles and content strategy. I proposed and presented new sections to add value to the application.
I defined the product with my project managers and design leads. I prioritized customer goals combined with business constraints.
I collaborated with several platform design leads to translate product features for each platform context.
I executed proto-personas, flows, wireframes, prototypes and interaction design specs. I collaborated with visual designers to ensure interaction and graphics were aligned from the beginning.
I designed and presented prototypes and concepts to gain buy-in from managers and senior stakeholders throughout the project lifecycle.
In favor of speed of market we were tasked to add a new section to the existing mobile application. Problem was, the structure and navigation was not designed to support new sections. On the other hand, different printers required different content, so we had to design thinking in flexibillity of content and devices.
Main problem of the application was not having a navigation menu. The usual space for navigation was used to inform the printer's status and have it always visible. The result was a small touch area for users to unfold the sidebar to navigate trough printers.
The decision of “attaching” content to the applicaton was not a suitable approach from a customer experience perspective, so I battled to gain space for designing the application from scratch.
We were tasked to design and define the application for phone and tablet, Android and iPhone, in two months. With a limited budget no time neither money was left for research.
I started talking to various stakeholders that had been in contact with several customers to gain some insights. I also pushed to bring at least two customers to our office for a mini-interview and user test. Though conditions where not suitable, I thought little research would be better than no research at all.
I started with a competitive benchmark of data visualization on existing mobile applications to choose from best practices on interaction.
I created a Research plan with available resources: phone interviews, Stakeholders feedback at different exhibitions and one on one interviews. I gathered previous customer and market research from the existing mobile application to drive the planning phase and create main personas.
Based on personas, I created user stories for each representative user and statements that helped me define new functionalities.
Research material and business requirements were the guideline for the application specifications. Talking to various managers to understand different printer requirements helped me define design constraints, such as allowing content to change depending on printers’ hardware.
After the short research phase, I started stating the design principles the application should have to meet business and user goals:
Scalable: A navigation that allows escalation to new sections.
Flexible: Dynamic components that take into account content resizing.
Dynamic Layout: Reposition of components based on alignment to fit different screen sizes.
Native components usage: Meet user’s behavioral expectations, decrease development time and meet consistency across different platform guidelines.
After listing design goals, I created a table with all desired functionalities of the application. Together with stakeholders we brainstormed new functionalities to start shaping the application content. Because of time constraints, we had to cut some functionalities and leave them for future iterations or as premium functionalities:
Data interaction
I started designing with the smallest screen size (iPhone 4/Small android screens) to later scale up to bigger interfaces such as tablets. One of the biggest interaction challenges was creating affordable assets and gestures for interacting with data on a small screen.
I created a few prototypes on early stages of the project for marketing team to show to customers on different exhibitions and learn about interaction issues on data visualization.
Cards
After some design iterations I came up with designs accommodating different content for printers. The main components were cards. Cards could be used to storage different information. It would allow the modularity we needed to take out content that does not apply to different printer models. Cards allow a unified and scalable structure that suits bigger device screens as well.
One of the challenges of the application was creating affordable assets to interact with in small screens. One of the requirements was to give an overview of the consumables but have the ability to refine results through dates and hours, and get specific consumption rates for specific dates and hours as well as printers. Several ideas where explored.
I designed an application for each platform with its standards using native components. Therefore, I used a usual sidebar navigation that could grow and store new sections in the future to add more content.
After launching the application several iterations where done together with development team to refine the visual details of the application. Below some screenshots of the final design.
After launching the application we brought some customers to the site to review the application. They were tasked to open the application and identify it's use. Depending on their profile, they where interested in tracking the printer status or in viewing consumables and reports for each month. After exploring the application they where tasked to rate it's ease of use on a 5-point likert scale, being 1 not usable and 5 rewarding. Average rating was 5 (rewarding).
