HP Inc. – AI Companion App UX Design
Timeline:
April 8, 2024 – July 9, 2024 (3 Months contract)
Role:
UX Designer in a 4 person Design team
Tools Used:
Figma for design, JIRA for project tracking, Veneer UI and later Win UI design systems
Problem
Hewlett Packard Inc. (HP) needed a user-friendly way to help customers explore the AI capabilities of their new AI-enabled PCs, launched in April 2024. The challenge was guiding tech-savvy users who might not have extensive AI experience, while also showcasing exclusive deals from Independent Software Vendors (ISV) partners.
Solution
Between April and July 2024, we designed the AI Companion App to guide users through the AI features. The landing page introduced users to key AI interactions, while the dedicated partner page highlighted exclusive ISV offers. Midway through the project, we transitioned the design to the Win UI system to align with HP's updated standards.
My Role
As the UX Designer, I was responsible for designing both the homepage and the partner offers section, from wireframes to final prototypes in Figma. I collaborated closely with internal stakeholders and external ISV partners and ensured that the design adapted smoothly to the Win UI system as we progressed from April to July 2024.
Scope
The project included designing the landing page, which featured AI interactions, and the ISV offers section that showcased partner deals. We used Figma for design and JIRA for tracking deliverables. The scope also involved adapting to changing design systems and evolving requirements over the April to July 2024 timeline.
Context
During my short-term contract at HP, I worked as a UX Designer on the AI Companion App for their latest AI-enabled PCs. As part of a four-person design team, I was responsible for designing two major sections of the app: the Discover Landing Page and the ISV Providers Offers Page.
The app aimed to help users explore and interact with the AI features embedded in the AI PCs. Our primary user persona was tech-savvy individuals familiar with technology but likely not extensively experienced with AI tools. The design needed to guide them through AI functionalities while allowing them to explore the features independently.
ISV (Independent Software Vendor) providers are companies that develop software tailored for specific platforms or hardware. For this project, HP partnered with ISVs to offer AI-driven tools such as image generation and productivity software, designed to enhance the AI PC’s capabilities.
Impact & Business Outcomes
The AI Companion App was a crucial part of HP’s strategy to capture a larger share of the growing AI PC market, which is valued at over $200 billion. The app’s timely launch helped HP position itself as a leader in this competitive space. By improving user engagement with AI features, the app played a vital role in HP’s goal to double market growth rates. My design work on the Discover Landing Page and ISV Providers Offers Page directly contributed to meeting these business objectives.
Process: Double Diamond UX Framework
The Double Diamond design process is a widely used framework in UX that helps break down problem-solving into structured phases. It focuses on two key cycles: exploring a problem thoroughly and then finding the right solution. This approach allows for a deep understanding of user needs before arriving at a refined design. For this project, I followed the Double Diamond model, which consists of four essential phases:
Discovery
Goal:
Understand the needs of tech-savvy users unfamiliar with advanced AI features.
Define
Goal:
Define the structure and core features of the app.
Develop
Goal:
Create and refine prototypes.
Deliver
Goal:
Finalize designs and hand off to engineering.
Actions:
Collaborated with UX researchers to gain insights on user expectations.
Identified the need for a structured, intuitive interface that would help users explore AI functionalities without feeling overwhelmed.
Actions:
Developed three key sections for the home screen:
The Ask Prompt Bar for AI-driven interactions.
A Productivity Section highlighting tools from ISV partners and HP’s Analyze feature.
A PC Optimization Section showcasing AI's role in improving performance.
Ensured the design addressed user pain points by balancing education and ease of navigation.
Actions:
Designed multiple wireframe iterations in Figma based on feedback from internal teams and ISV partners.
Transitioned from Veneer UI to Win UI to maintain design consistency with HP’s updated guidelines.
Actions:
Delivered polished wireframes and mockups for both the home screen and the ISV partner section.
Collaborated with the visual designer to ensure branding consistency and passed the final assets to the engineering team.
Discover Landing Page
The Discover Landing Page was designed to educate and guide users through the AI PC’s features while allowing them to explore independently.
Key Features:
Ask Prompt Bar with Wheel of Fun: At the top of the screen, users can either type a question into the Ask Bar or choose from a selection of pre-populated prompts, called the Wheel of Fun. These prompts are randomly displayed based on topics relevant to the app’s features, such as Productivity, Analyze, and ISV tools. When a user clicks on a prompt, they are taken to the chat page where the question is pre-populated, and the AI-generated answer is displayed. This feature enhances user interaction by providing fun, contextual suggestions.
Note: Due to NDA restrictions, I am unable to display the exact final mockups or images used in the original designs. The images and wireframes shown here are near-final versions, with the content on the mockups replaced to comply with the NDA. All sensitive information has been removed, and the visuals shown provide a close approximation of the final deliverables.
Productivity Tools: This section highlights tools from ISV partners and HP's Analyze feature. Users interact with a combination of standard cards (leading to additional content or new tabs) and prompt cards (initiating a chat for further engagement). This encourages users to explore AI-driven productivity tools more deeply.
PC Optimization Section (Perform): This section guides users to tools that help enhance their PC's performance through AI. With a mix of standard and prompt cards, users can easily access features that improve system efficiency.
More Resources: At the bottom of the page, we included an overflow section offering additional resources and tools to ensure users had access to the full range of AI capabilities.
Discover Explorations:
ISV Providers Offers Page
What is an ISV Provider?
Independent Software Vendors (ISVs) develop specialized software for specific platforms or hardware. For HP’s AI Companion App, ISV partners provided AI-driven tools like image generation and productivity software.
Problem:
Originally, ISV Providers were integrated into the home screen. However, midway through the project, we decided to create a dedicated section to showcase exclusive ISV offers.
Process:
Stakeholder Collaboration: I worked with internal teams and external ISV partners to gather requirements and ensure smooth integration.
Wireframing & Feedback: Developed and iterated on wireframes based on feedback from stakeholders.
Final Design: The offers section featured clear ISV branding, descriptions, and easy-to-use Claim Offer buttons for exclusive deals.
Reflections
This project involved multiple pivots, including moving ISV Providers to a separate page and transitioning from Veneer UI to Win UI. The Double Diamond UX framework allowed us to adapt to these changes while maintaining a user-centered approach. Ultimately, the app delivered an intuitive AI experience that aligned with HP’s business goals of expanding their presence in the AI PC market.
More selected projects
