La Masia- HP

Project Overview

A design system is a living product that requires ongoing maintenance and thoughtful evolution. My role was to maintain consistency across the product ecosystem while researching future improvements to keep the system scalable, accessible, and aligned with brand needs.

Objective: Ensure design system reliability for current product teams while identifying gaps and proposing enhancements to meet upcoming design and engineering requirements.

Responsibilities

• Audit & Maintenance
  • Regularly reviewed component usage across teams.
  • Fixed inconsistencies in spacing, typography, and interaction states.
  • Documented changes in Figma for visibility.
• Research for Future Improvements
  • Conducted interviews with designers & developers to understand pain points.
  • Benchmarked against industry-leading design systems (Atlassian, Material 3, Fluent).
  • Explored accessibility improvements (color contrast, keyboard navigation, screen-reader labels).
  • Proposed scalable token-based theming system to enable light/dark mode and multi-brand use cases.

Challenges

• Design debt: We didn’t have a file to start working from! so we took screenshots to recreate all the user flows and from there, created the layouts for the screens we needed to work with. This would then be sent to development for the necessary modifications.
• Scaling: We had to take into account the product’s scalability and its future transformation. It was important to design with long-term growth and adaptability in mind.
• Documentation gaps

Approach

Current System Audit

• Created an inventory of all components in production.
• Mapped all user flows within the HP Smart app: print, scan, copy, and so on.
• Survey other HP product libraries and create elements and components aligned with them. Ensure consistency and coherence across the ecosystem.
• Create the design library.

Documentation Improvements

• Create usage guidelines specifically for HP Smart.
• Improved changelog visibility for cross-team communication.

Future-Focused Research

• Explored design tokens for color, spacing, and typography to enable scalability.
• Studied how other design systems manage accessibility-first components.

Outcomes

Immediate Impact

We created a Figma library from scratch to use in future designs. We mapped all the flows, recreated reusable and scalable components, and documented everything thoroughly.

Future Roadmap (Proposals)

• Design Tokens: Implement token-based theming across products.
• Accessibility Enhancements: System-wide compliance with WCAG 2.2 AA.
• Contribution Model: Define process for designers/devs to propose new components.

Learnings

• A design system is never “done” — it requires a balance between maintenance and innovation.
• Clear communication (documentation + changelogs) is just as important as the components themselves.
• Anticipating scalability (theming, accessibility, cross-product needs) prevents design debt down the road.

Project Overview

HP offers multiple apps (HP Smart for printers, Support Assistant for updates, etc.), each serving specific products. This fragmented experience creates friction for users managing multiple HP devices.

Objective: Design a unified platform to manage all HP devices and services in one place, creating a seamless, ecosystem-driven user experience.

Problem Statement

• Users must download different apps for different HP devices.
• Device management is inconsistent across apps.
• Lack of a central hub reduces brand loyalty and cross-product engagement.
• Users expect ecosystem experiences (like Apple ecosystem, Samsung SmartThings).

Research

Competitive Analysis

• Apple Ecosystem: Unified experience via iCloud + Settings.
• Microsoft 365: Centralized device + support management.

Key learnings:

• Users expect one app for all devices.
• Transparency in device health builds trust.
• Cross-device workflows (e.g., scan from printer → send to PC → share to cloud) add value.

User Interviews

Insights from HP product owners:

• “I hate switching apps just to update drivers vs. scan a doc.”
• “I want to see all my devices in one place.”
• “If HP offered a single hub, I’d use it daily.”

Design Goals

1. Unify device management: All HP devices in one dashboard.
2. Improve support & transparency: Real-time health, updates, and troubleshooting.
3. Enable cross-device workflows: Print, scan, sync, and share seamlessly.
4. Scalable system: Future-proof for new HP products and services.

Design Process

Information Architecture (IA)

• Home → Devices overview
• Device detail → Health, updates, quick actions
• Services → HP Care, ink subscription, accessories
• Account → Profile, subscriptions, settings

Wireframes

• Explored card-based dashboards for devices.
• Designed quick action shortcuts (e.g., Print, Scan, Update).
• Created modular navigation to scale with future devices.

Visual Design

• Built around HP’s brand language: clean blues, minimal layouts, bold typography.
• Added status indicators (green = healthy, orange = needs attention).
• Used iconography to differentiate device types.

Outcomes

What me and my team did within “Digital Services” in La Masía was handled to a design agency in the US who continued developing the new product. They finally come up with the “HP app”, the official application from HP that allows users to manage their HP devices, including printers and PCs, from a single interface. As you can notice, the design didn’t vary that much from ours.

Product Overview

This product idea came directly from HP USA for us in Barcelona to develop and launch.

HP All-In Plan is a subscription-based service designed to handle all printing needs under one monthly plan. It includes:

• A new HP printer (no upfront cost)
• Automatic ink delivery when ink runs low
• Optional paper add-on service (paper delivered before you run out)
• Continuous printer coverage, including support and next-business-day replacement if needed
• Printer upgrades after the subscription term, with recycling of the old printer
• Risk-free 30-day trial and flexible cancellation (with some fees depending on timeline)

Essentially, HP owns the printer and consumables during the subscription; users pay monthly to cover all printing, support, and upgrades.

Because HP already has separate services (e.g. Instant Ink, support, hardware sales), All-In Plan is an effort to bundle and simplify the user experience around printing.

I was specifically in charge of designing the Post Purchase flow.

Research

Competitive Analysis

We benchmarked subscription/ecosystem models such as:

• Printer-as-a-service models from other vendors
• Hardware + consumables + service bundles in other industries (e.g. razor blade subscriptions, coffee machines + pods)

User Interviews

We conducted Interviews with users who own HP printers and are currently Instant Ink users, have used it in the past or considered ink subscriptions, and users that don’t have any previous HP printer. For this we Key takeaways:

• Many don’t fully understand what happens when ink runs out or hardware breaks.
• They want peace of mind—a “set and forget” feeling.
• They dislike surprises: extra fees, complicated cancellation, hidden conditions.
• They appreciate eco-friendly promises (recycling, sustainable materials).

Design Process

Information Architecture

Key sections in the app (or web dashboard):

• Dashboard / Home: summary of status (ink, paper, coverage, next upgrade)
• Plan Details: what’s included (printer, ink, paper add-on, support)
• Modify Plan: add or remove paper, adjust page volume, upgrade printer
• Support & Coverage: live chat, FAQs, ticketing, hardware replacement status
• Billing / Account Settings: payments, cancellation, terms

User Flows (Core Tasks)

1. Onboarding / Sign Up
   • Choose a printer
   • Choose base plan (ink page allowance + optional paper)
   • Confirm terms and start trial
2. Modify/Add Services
   • Enable / disable paper add-on
   • Increase page plan mid-cycle
   • Schedule upgrade or defer
3. Support & Hardware Issue
   • Report issue via chat / app
   • View current hardware status
   • If needed, trigger next-business-day replacement
4. Cancel / Return
   • Understand cancellation costs (if within term)
   • Return printer & supplies via prepaid shipping
   • Confirm cancellation

Wireframes

Some key screens to design:

• Home dashboard with cards for “Ink status,” “Paper status,” etc.
• Plan modification screen (sliders or toggles for page volume, paper add-on)
• Upgrade printer screen (show eligibility, timeline, recyclability)
• Support / help screen with live chat and ticket view
• Cancellation flow with clear warnings & confirmation

Outcome

For Users

• Simplifies printing: one subscription covers hardware, ink, paper (optional), support
• Peace of mind: continuous coverage, next-day replacement, automatic ink delivery
• Flexibility: users can scale usage or add paper optionally
• Transparency: dashboard clearly communicates status, costs, and terms

For HP

• Stronger customer retention: users are “locked in” through value and convenience
• Recurring revenue model rather than one-time hardware sale
• Opportunities for upsell (higher page plans, paper subscription)
• Branding boost: positions HP not only as hardware but as a service provider