Project header for HP PurchasEdge.

Project objective header

Redesigning and improving the visuals for the HP PurchasEdge site

Learn more

Project objective header

Creating a proposal for the HP PurchasEdge Find-a-Member system

Learn more

Project objective header

Enhancing the HP PurchasEdge product and checkout experience

Learn more

Users & Personas

Personas for HP PurchasEdge.

Disclaimer: The opinions expressed here are my own, not of HP or FCB Seattle.

HP PurchasEdge is a reward and redeem service provided to business customers by Hewlett-Packard Company (HP) and is a client of FCB Seattle. FCB Seattle (DraftFCB Seattle at the time) chose me as their User Experience and User Interface Designer to help in redesigning and improving the visuals for the PurchasEdge site as well as creating a proposal for the Find-a-Member system and enhancing the product and checkout experience.

"...I worked with the FCB Seattle team to brighten up the site and bring it up to HP's current brand guidelines..."

Redesigning and Improving HP PurchasEdge

The previous HP PurchasEdge site was as dark as a dungeon; you had to feel around to find buttons and links, you'd hit your head on stalactites. You'd slip on bat guano and run the risk of impaling yourself on some stalagmites. I worked with the FCB Seattle (formerly DraftFCB Seattle) team to brighten up the site and bring it up to HP's current brand guidelines, which corrected all of those issues.

Screenshots of previous HP PurchasEdge
The pre-existing HP PurchasEdge sign in and description landing pages needing to be updated.

I was the sole designer on a team that included two project managers, a front-end developer, and back-end developer. We received direction and requirements from an HP PurchasEdge stakeholder. I was able to speak with her directly and ask questions pertaining to her asks (requirements). She was open and receptive to our ideas, which made the design phase of the project go smoothly. Furthermore, HP's branding guidelines were thorough and simple to follow. HP PurchasEdge requested ideas and proposals for features they wanted to add to the site for their redesign. For every proposal, I researched, compared how other companies were doing thing, pulled them into FCB-branded presentation decks, and designed how they could work. Some of those compositions are included.

HEWP_PurchasEdge_16_Overview_HP_InBrowser_AHEWP_PurchasEdge_16_Overview_HP_InBrowser_B

HP PurchasEdge: The embrightened and re-designed HP PurchasEdge landing page with updated branding per HP's branding guidelines.

Creating the Find-a-Member System

With any online property, there are back-end limitations to what you can do. Luckily, HP PurchasEdge wanted a super simple concept for their Find-a-Member system. The solution was simply an input with clear language that was directional. The Find a Member system was designed for sales associates in meetings with prospective or current business members of HP PurchasEdge. Knowing whether the company in question was a member of HP PurchasEdge would give the sales associate more insight on how to approach them as potential business members or current business members.

HP PurchasEdge Find a Member

Find a Member: The user has opted to Find a Member to gain insight on whether the business client is a HP PurchasEdge or not.

HP PurchasEdge Find a Member with an alert
Cannot Find a Member: The user may have selected the Search action without inserting a value into the input. This causes an alert to be shown instructing the user to insert the member's name or PEID.

HP PurchasEdge Find a Member with results

Members found: The user searched for a member in the HP PurchasEdge and results were returned. In the instance that the results were not what the user was looking for, the user screen allows the user to invite the prospective member to HP PurchasEdge.

HP PurchasEdge Find a Member with no results

No members found: The user searched for a member in the HP PurchasEdge but there was no results. The "no results" screen allows the user to invite the prospective member to HP PurchasEdge.

Enhancing the Product and Checkout Experience

Another ask by the stakeholders was to add more functionality with features to the product and checkout experience in order to give business members more of a voice and buying options. These features included increasing visibility of related products throughout HP PurchasEdge, placement of a product comparison feature, and adding reviews to product pages.

Grid_PBI-2-4-Product-details-AGrid_PBI-2-4-Product-details-B

Enhancing the Product and Checkout Experience: A re-designed HP PurchasEdge product page with featuring an interactive Product Recommendations section, a Related Products tab, and a Recently Viewed section to increase buying options for PurchasEdge members.

Competitor benchmark sketches showing inventory of content types and blocks.
Benchmarking: Competitor benchmark sketches showing inventory of content types and blocks.

Before I jumped into redesigning the product pages with asks from stakeholders, I did a "primitive" competitor benchmark and analysis with quick sketches showing placement of content types and blocks from Amazon, Canon, Epson, and Staples. Beside each sketch, I sharply rated whether the UX and UI of each page was "Good" or "Bad". From this point I was able to decide what was working well to help me design for the stakeholders' requests.

Sketched wireframes on grid paper showing story numbers and requirements.

Increasing visibility of related products

The stakeholder asked for recently viewed products, recommended products, and related products to be added throughout the HP PurchasEdge site from landing page to shopping cart. In fact, we added related products to the checkout process as well. The initial ask was for an interstitial screen that I felt was disruptive to the check-out process. I did some research not only in reading some select articles about checkout process and interstitial screens for last minute buying, but also as a user myself on several sites like Amazon, Office Depot, Office Max, Staples, GAP, etc. I had to cancel only 1 order. Some checkout processes are a little too good.

In the end, I presented two ideas: one satisfying the ask and vision of the stakeholder (represented here), and another that included a buy option that was inclusive to the checkout process instead interruptive like the interstitial screen. In the end, the stakeholder chose the second option as the better experience for users to the HP PurchasEdge site.

Here are some screens showing HP product placement, including the interstitial ask:

Product placement throughout HP PurchasEdge.

Project Feature

Proposing a product comparison feature and system

To help users choose the right product for their business, we proposed adding a comparison feature to product detail pages and search results pages. The Compare Products page features rewards points amounts, star ratings, print resolution, and many more product details.

Adding product reviews

Reviews are an integral part of choosing to purchase a product online. I leveraged HP's use of tabs and researched various competitors to inform my solution of displaying product reviews. In the highlighted screenshots, you'll take a peek into the Reviews tab. The screenshots display the stars for rating the product and form for inputting the review as well as a preview step after the user has written the review and rated the product.

Screenshots of HP PurchasEdge product reviews
Product reviews: A user can rate and write a review of the product and preview the review before submitting the review for approval.

The Reviews contains the usual features you'd see for online reviews, like pagination to view more reviews, helpful rating, industry and fleet information, and a call-to-action button for writing or editing a product review.

tw_mm_hppe_reviews3

Adding product reviews: A re-designed HP PurchasEdge product page with review functionality.

In closing

I thoroughly enjoyed working on this project. I believe we accomplished what we set out to do for HP PurchasEdge. I got to work with a great group of talented and cool people. And, I got over my fear of dark and dank dungeons.

Endeavors

Endeavors: Working with FCB Seattle

I divulge what it's like to be an independent designer working with one of the most reputable advertising agencies in the world.

Check it out

Image: OsakaWayne