Users & Personas
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.
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.
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.
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.
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.
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:
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.
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.
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: 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.