Client: HP Inc. GXD Solutions

The Goal

Visual design for the responsive printer hardware setup application (OOBE – Out Of Box Experience), to enhance and improve customer user experience when setting up various HP printer models. An example in this presentation is the new HP printer model - HP Tango and HP Tango X.

The Implementation

I have worked with an experienced cross-disciplinary team of IX and UX designers to create visual design prototype mock-ups, style guides, iconography, illustrations, animations, and responsive design patterns, adhering to HP global brand guidelines.

Utilizing the agile software development method, I worked with the HP software development team to produce the final UX design.

The Process

1.     Research and evaluate the existing printer setup experience OWS (OOBE Web Services).
2.     Come up with initial pattern mock-ups based on IX wire-frames.
3.     Review and evaluate with a team and implement revisions.
4.     Create high fidelity prototypes for user testing.
5.     Incorporate revisions and finalize design.
6.    Create final responsive pattern version.
7.     Create a style guide, defining font, colors, buttons, and other specifications.
8.     Publish final patterns to Zeplin for the development team.
9.     Guide and review development production.
10.   Support ongoing development and application updates.

Software

Adobe Photoshop, Adobe Illustrator, Adobe XD, Zeplin

View Style guide PDF here

Client: HP Inc. GXD solutions

The Goal

Fundamental style elements for illustrations used in printed and digital materials.

Printed materials might include, but are not limited to: set-up cards, flyers, posters, printer box packaging, and booklets.

Digital uses might include, but are not limited to: mobile applications, web and software desktop applications, printer display panels, web pages, and animations.

The goal is to drive consistency in all delivered materials and execute illustrations that are clear, clean, and simple.

The key principles for building illustrations are:

• Create a clear, visually inviting style.

• Reduce complexity by eliminating unnecessary details.

• Reinforce the HP brand through consistent line weights, color palettes, arrow and callout sizes, product perspectives, and graphic sizes.

The Implementation

Worked with HP’s GXD Creative Director to create visual illustrative style comps and style guides for HP global brand guidelines.

Worked with a remote team of visual designers to implement and guide them during the process of moving to new illustration and animation styles. Reviewed and guided them through the creation and understanding of new guideline principles.  

The Process

1.     Research and evaluate existing HP Learning instructional illustrative styles.
2.     Come up with initial illustration comps.
3.     Review and evaluate with a team and implement revisions.
4.     Create high fidelity prototype for user testing.
5.     Incorporate revisions and finalize design.
6.     Create final illustrations.
7.     Create a style guide, defining stroke weights, colors, and positioning.
8.     Review with a remote group of VX designers and explain the new principles.
9.     Guide and review development production.

Software

Hand drawn sketches, Adobe Illustrator, Adobe InDesign

View HP Illustration style guide here

Client: HP Inc. GXD solutions, HP Instant Ink Program

The Goal

Fundamental style elements for illustrations used in HP Instant Ink programs and services.

Printed materials: setup cards, flyers, posters, printer box packaging, and booklets.

Digital uses: mobile applications, web and software desktop applications, printer display panels, web pages, and animations.

The Implementation

Worked with HP’s GXD Creative Director and HP Instant Ink UX and IX designers to create visual illustrative style comps using new illustration style, which enhanced the overall customer experience.

The Process

1.     Evaluate existing HP Instant Ink look and feel.
2.    Come up with initial illustration comps.
3.     Review with the team and implement revisions.
4.     Create high fidelity prototype for user testing.
5.     Incorporate revisions and finalize design.
6.     Create final illustrations based on newly defined illustrative style.
7.     Review with a remote group of VX designers and explain the new principles.
9.     Guide and review development production.

Software

Hand drawn sketches, Adobe Illustrator, Adobe InDesign

Client: HP Inc. GXD solutions

The Goal

The fundamental specifications for creating the GIF and MP4 animations used in digital materials such as mobile applications, web and software desktop applications, printer display panels, and web pages. In addition, to guide visual designers in the creation of content with Adobe Illustrator CC, animation design and implementation in Adobe Animate CC.

The goal is to drive consistency in all delivered materials and execute animations that are clear, clean, and simple.

Key principles for building animations are:

• Create a clear, visually inviting style.

• Reduce complexity by eliminating unnecessary details.

• Reinforce the HP brand through a consistent illustration style (referring to existing HP Illustration Style Guide), animation sizes, file format, speed, and motion styling.

Used a combination of frame-by-frame animation and motion twining techniques. Frame-by-frame animation is considered the “traditional” method of animation, in that each frame has the same picture, but slightly altered. When the frames are played together, the images appear to move. This is the same basic technique used by traditional hand-animators who make animation appear smooth and coherent.

The Implementation

Worked with HP’s GXD Creative Director to create animations and the style.

Worked with a remote team of visual designers to implement and guide them during the process of transitioning to a new animation style. Reviewed and guided them through the creation and understanding of new guideline principles.

The Process

1.     Research and evaluate existing HP instructional animation styles.
2.     Come up with initial animation comps.
3.     Review and evaluate with the remote team and implement revisions.
4.     Create high fidelity prototype for user testing.
5.     Incorporate revisions and finalize design.
6.     Create final animations.
7.     Create a style guide, defining positioning, frame rate, speed.
8.     Review with remote group of VX designers and explain the new principles.
9.     Guide and review development production.

Software

Adobe Illustrator, Adobe Animate, Adobe InDesign

View HP Animation style guide here

Client: HP Inc. GXD solutions

The Goal

To design a responsive introductory screen for the HP-All-in-One Printer Remote App, which makes printing easier than ever and puts the tools you need in the palm of your hand.

With the HP-All-in-One Printer Remote App, the users can:

·  Set up your HP printer directly from the app.

·  View printer status and send prints on the go.

·  Print, copy, scan, and share documents and images directly from your mobile device.

·  Use your mobile device’s camera to create high-quality scans.

·  Order supplies and get support straight from the app.

The Implementation

Worked with HP’s GXD Creative Director and the UX/IX teams to create a responsive “Download App” screen, which could work for iOS, Android, and Win10 platforms. Illustrated original Photoshop images of the phone, tablet, and laptop.

The Process

1.     Research and evaluate existing HP-All-in-One Printer Remote App.
2.     Come up with initial design comps based on wire-frames.
3.     Review and evaluate with the team and implement revisions.
4.     Create high fidelity prototype for user testing.
5.     Incorporate revisions and finalize design.
6.    Create final production responsive design patterns.
7.     Work with the programing development team on implementation of the new design.

Software

Adobe Photoshop, Adobe XD, Zeplin

View Responsive Production PDF here

Client: HP Inc. GXD solutions

The Goal

Visual design for the HP printer setup website (123.hp.com) where the user can obtain solutions for the printer setup for all existing HP printer models. The site design should be clean and functional, focusing on interactive features rather than interesting visual solutions.

At 123.hp.com, the user can:

·  Prepare for the installation.

·  Download and install printer software.

·  Download and install the HP Printer drivers.

The Implementation

Worked with HP’s GXD Creative Director and the UX/IX teams to create a responsive website experience. Applied HP brand guidelines to make a clean and cohesive user experience, which works hand in hand with the HP-All-in-One Printer Remote App, and HP.com.

The Process

1.   Research and evaluate the existing 123.hp.com experience.
2.  Come up with initial design comps based on wire-frames.
3.   Review and evaluate with a team and implement revisions.
4.   Create high fidelity prototype for user testing.
5.   Incorporate revisions and finalize design.
6.   Create final production responsive design patterns.
7.    Work with the development team on implementation of the new design.
8.   Support ongoing development and application updates.

Software

Adobe Photoshop, Adobe XD, Zeplin

View 123.hp.com

View 123.hp.com Part 1 PDF

View 123.hp.com Part 2 PDF

Client: HP Inc. GXD solutions

The Goal

Visual design for the HP Easy Start, a desktop application to automatically install the latest driver and software for your printer. The App will help you download and install the printer driver for your version of Mac OS or Windows XP through Win 8. The design is meant to be clean and functional, focusing on interactive features and call to actions, rather than interesting visual solutions.

The Implementation

Worked with HP’s GXD Creative Director and the UX/IX team to create a desktop application experience. Applied HP brand guidelines to make a clean and cohesive user experience, which works hand in hand with the HP-All-in-One Printer Remote App, 123.hp.com, and HP.com.

The Process

1.   Research and evaluate the existing HP Easy Start software experience.
2.   Come up with initial design comps based on wireframes.
3.   Review and evaluate with a team and implement revisions.
4.   Create high fidelity prototype for user testing.
5.   Incorporate revisions and finalize design.
6.   Create final production design patterns.
7.    Create style guide.
8.   Work with the programing development team on implementation of the new design.
9.   Support ongoing development and application updates.

Software

Adobe Photoshop, Adobe XD, Zeplin, Adobe InDesign

View HP Easy Start style guide here