Facilitating business sales with a well designed service portal
Landing page image
HP Link Technology

HP launched a new technology in the print industry that helps companies protect their brands by offering visible and invisible marks embedded directly into their product packaging. We were tasked with creating a website to promote this new anti-counterfeiting solution.

COMPANY
HP INC
Pilots & Incubation Lab
Mar-Aug 2017
MY ROLE
UX Strategy Lead
Discovery research, Concept ideation, Content writing, Wireframing, Usability testing
TOOLS
Adobe XD, Axure, JIRA

GOALS FOR THE PORTAL

1. Pivot from a consumer product to an enterprise platform.

2. Present the value and benefits of this new security platform.

3. Funnel interested parties to sales staff for personal demos and trial opportunities.

DISCOVERY

Primary & Secondary Research

Early customer calls gave us an understanding of the business

We joined sales calls with potential customers to get a better understanding of their business needs, where our platform supported them well, and where our technology could support them but the way was not well understood.

Finding our Competitive Edge

Entering a new industry, it was important to understand what our competitors offered. We selected top competitors that offered a similar security solution to Link: Kezzler, GPAS, Arjo Solutions, and Frequentz. An Excel template allowed multiple team members to collect consistent information using pre-defined data points.

We learned that our unique marking technology was a strong advantage in the market, however it was missing several key components of a full end-to-end solution that we hadn't considered yet.

Competitive analysis

Workshops with stakeholders helped us understand the marketing funnel

I facilitated design workshops with our business stakeholders to define what information customers need in order to move from awareness, to consideration, and finally purchase of our product.

Onboarding workshop

Define

Journey Mapping

We shared our findings with stakeholders through journey maps

Our research findings were synthesized into the following onboarding customer journey map and socialized to the teams and stakeholders. The information we gathered defined the content we created for the site. 

Onboarding journey map

Content Creation

Based on what we learned from our research, we created targeted content for the website.
‍

Design update #1

Provide Key benefit information up front

Every question potential customers asked our business team became informative answers on the site and helped us create clear benefit and solution statements.

Onboarding journey map

Design update #2

Offer an automatic "Try before you buy" option

Potential customers wanted to test out the technology prior to making a financial commitment, so we added demos and opportunities to test the solution up front.

Onboarding journey map

Design update #3

Explain how the service integrates into the client's existing production process

We illustrated how the new service can be integrated into their existing packaging and supply chain process.

Onboarding journey map
DESIGN

Website Design

Website Design

We started with the Information Architecture of the new site

We defined the overall architecture of the site early on, which we later usability tested with low-fi prototypes.

IA diagram

We created wireframes based on our whiteboard sketches

Low-fi designs created based on our earlier hand-drawn sketches.

Wireframe images

Prototype

Mocks & Interactive Prototype

The interaction designer on the project created detailed mockups of each page based on the content definitions.

Mockup images

TEST

Research

Continuous User Research

Usability Testing

With the support of the team, we ran multiple usability studies per feature.

We started with basic navigation to ensure that potential customers were able to access the content we provided.

Usability Goals:

Evaluate the layout and design of the new Solution and Industry pages on the Link Serialization Website.

90% of users are able to:

  • Navigate from the main page to the solution pages
  • Navigate between the different solutions offered
  • Successfully use the Try It now feature
  • Find and download a sample white paper

Our biggest challenge was figuring out how to validate the content on the site when we did not have direct access to real customers.

That's when we turned to our stakeholders for help. The sales and marketing teams took our prototypes to conferences with them and sat down with potential customers using the content as part of their pitch. These sessions provided great feedback for us.

Regular Stakeholder reviews and feedback

We regularly held interactive reviews with internal stakeholders to incorporate their feedback into the design process.

Stakeholder reviews

We tracked customer behavior & usage

As we designed and implemented the site, we collected usage data throughout the process.

We analyzed the different paths taken by visitors to the site to see which pages were viewed, which were skipped, and where potential customers dropped off completely.

Google analytics

To verify that potential customers saw the main benefits of our new offering and were able to find and click on the CTA buttons, we tracked where visitors clicked (heat map) and how much of each page they viewed (scroll map). We checked these metrics repeatedly as we iterated on the website design.

Heat and scroll maps

Business Heading

Website content

"SPOT ON!"
Customers said the value proposition, benefits, and integration information was just what they need to evaluate the service. 

Navigation

Visitors used the navigation options in the header and within the secondary menus to find the content they were interested in within the site and accessed the CTA to start the free trial.

Effective Sales Tool

Customers were able to ask relevant questions about how the service could benefit their specific use case, saving the sales team time and effort.

✧

<Back to HomepageNext Case Study>