Interaction Design, Inc. logo. UX Consulting.
 
Navigation: Home
Navigation: Services
Navigation: Product design
Navigation: Usability testing
Navigation: Expert reviews
Navigation: Customer research
Navigation: Featured portfolio samples
Featured portfolio
Current page: Full portfolio
  Navigation: Projects by category
Navigation: Research topics
Navigation: Book list
Navigation: About us
Navigation: Background
Navigation: Design teams
Navigation: Contact us
 

Portfolio: WorldPay — Merchant Portal

This was a long and very rewarding engagement, from product inception to initial release. It was not just another design project, though, because it included helping WorldPay create a new process for product development.

Problem

WorldPay needed a new version of the Merchant Portal, reporting software they provide to users of their credit card processing services. It provides extensive reporting so merchants can track transactions and monitor their cash flow. This was a complete redesign.

Here's the new home page:

Home page

The project was a success. From the usability study of the first prototype to customer interviews with the final product, customers liked the new features and the updated UI. See more examples below with descriptions of the design process.

Goals

WorldPay's goals for the new Portal included:

  • Updating the product. WorldPay wanted to update and improve the user experience, including appearance and interactions.
  • Adding self-service features. Allowing customers to do more on their own would save money by reducing support calls, and earn money by making the company’s services more attractive.
  • Developing a new process. This is what made it more than just a design project. I helped them create a new process for product development for the company.

The new Portal met all of these goals. We know that because we did customer research throughout the process.

Solution

I acted as as the lead UX designer and information architect. Activities included:

  • Creating a new user experience (UX). I developed a new UX model. This included a new information architecture, new styles of interaction and a UI that was easier to explore while allowing fewer errors. I used the new model to design a new UI for all parts the product.
  • Collaborating. I worked on graphic design (with my graphic design partner) and a UI spec (with the UX person I helped hire). I also worked closely with people in engineering, product management, senior management, legal, QA and sales.
  • Doing customer research. A usability study of the first prototype gave us an idea for a great new feature. Customer visits later on showed us new ways of using the product, which led to other important features.
  • Reviewing requirements and design documents. I took the user's point of view during reviews. I recommended ways to separate design and business requirements in project documents.
  • Doing user acceptance testing and reviewing bug fixes. This helped the Portal met its usability goals.

Results

In interviews and usability studies, customers said they like the updated UI and the new features. While the new product displays the same useful data as before, customers told us it is easier to explore, provides better feedback and assistance, looks better and is easier to use.

I was afraid that they would see the new self-service features as more work for themselves. Instead, they saw it as a time savings and liked being able to do things themselves (see a blog post on self-service tools).

A new product-development process

This was not just another design project. I helped WorldPay create a new process for product development:

  • Introducing user-centered design. I introduced many useful techniques, including Group Design Workshops, rapid prototyping, usability studies and customer visits.
  • Helping create a new UX group. WorldPay formed a UX group. I helped with the initial hire and mentored the new designer.
  • Spreading the word about the new product and process. Training sessions and a formal presentation to the sales force helped internal people understand what we were doing differently and prepare them for the launch. Demos to potential customers showed the company's dedication to meeting customer needs.

Visual history of the project

These images show how the design evolved. See the home page, report pages and new self-service pages.

Home page examples

Mega-menu example

Information architecture

A new information architecture makes finding things easier. Mega-menus create logical groups of reports and commands.

Merchants said it's easier to explore the product.

Initial prototype of the home page

Early mockup of the home page

Much about the new home page came from the Group Design Workshop, where staffers from many departments introduced great ideas.

These first mockups were complete enough for a first round of usability studies.
An early rendition of the graphic designer's work, in HTML for usability testing

Graphic design model in HTML

The graphic designer started working on a visual design model once we completed the basic interactions.

We used her HTML mockups for a second usability study.
Home page in the shipping version

Working code prototype

We added and refined features, creating this informative home page.

We used working versions of the product for more usability studies, customer interviews, training sessions and sales demos.

 

"" Back to top  

 

Report pages, where customers generate reports about their businesses

Initial version of a report page

Early report mockups

Here’s an early design of a page for specifying reports.

A big change in the new Portal is reducing the steps to modify and re-run a report.

The graphic designer's version of a report page

Updates to reports

This final version of the report UI shows:

  • Reports as search. We treat report generation as a search through the data, although we don’t present it that way. Report options now stay on the page, making modifying the search easier.
  • User control. Users can click a button to hide the options and focus on the data. We help them avoid errors as well.
  • Contextual help. Every page has a “How to use this report” link that displays an overview. There are also ToolTips, a glossary and FAQs.
"" Back to top  

 

Self-service items that let customers do more themselves and save money for the company

Self service feature: Manage Terminals

Terminal nicknames

Some customers have a lot of terminals for swiping credit cards. A new feature, suggested by a usability participant, allows them to create nicknames for terminals.

Even people with just one or two terminals thought it is a great way to identify them.

Self service feature: order Supplies with popup

Ordering supplies

Ordering supplies for terminals formerly required a phone call.

Now customers do it online at their convenience.

And we made it just a little easier: Clicking on the terminal name in the order form displays a popup image of the terminal, just to be sure it's the right one.

   

 

"" Back to top

Click to return to previous page Back to previous page

 

 
   
EC