Cecilia Huster, User Experience Designer

 Portfolio  |  Resumé  |  Linked In

Checkout: Invoice and Checkout Deliverables

eBay owns both PayPal and the Dutch classifieds site Marktplaats.nl. So it was a natural next step to offer PayPal checkout on Marktplaats.

When I came on board, the decision had been made to start the project but not how to go about it. It soon became apparent that classifieds are very different from auctions and regular e-commerce shopping basket applications. Requirements gathering and solution sketching was a lot of fun.

Using Adobe Illustrator and InDesign

I created user flows and wireframes in Adobe Illustrator. These were placed into a user experience specification document in Adobe InDesign. It was a somewhat laborious process, particularly when updates needed to be made. On the other hand the finished document was a lot more elegant than anything I've ever seen produced in Visio.

My take on using Illustrator for IA work is that it probably works best for agencies. For agencies it's important to produce a document that is easy to read and visually pleasing. They also often don't participate in the whole life cycle of an application, so the need to continually update documentation falls away.

For in-house IA, it works less well. Rightly or wrongly, there is usually less emphasis on producing a document that is pretty to look at when the audience is "just" your coworkers. The cumbersome updating process also means that time that could be spent designing is instead spent on repetitive importing and resizing. Personally, I'd rather invest some time on coming up with a Visio template that contains all the information needed once and for all.

Invoice Creation Examples

Create Invoice

Create Invoice Page

Superficially this wireframe created in Adobe Illustrator looks rather different from a Visio wireframe but all the same elements are there.

The orange and yellow page surround mimics the Marktplaats page architecture. Inside that you can glimpse the blue grid lines on the template under the meat of the page.

Respecting the Site

This page was designed to be displayed on the Marktplaats.nl site. That meant that it had to respect Marktplaats' very simple design conventions. The sign posting ("1. Create Invoice, 2. Review Invoice") is an example of that. Most sites would try to jazz it up a bit or at least introduce some colour. The point here was not to do that.

As a user experience professional, I need to be flexible enough to create an interaction that looks as if it had always been on the site. The Marktplaats people let me know that they appreciated that I enjoyed the challenge of creating pages in their design language.

Review Invoice Wireframe

Wireframe of Review Invoice Page

The review page has a little more going on. It repeats back to the user what they entered but it also adds some new elements.

The yellow element on the right lets the seller know that if the buyer uses PayPal to pay them, they enjoy PayPal buyer protection up to € 200. At the bottom right, in the box with the red outline, an alternative is shown. It's applied for things that PayPal buyer protection doesn't cover, e.g. cars.

Where does the Button Lead?

As on the previous page, arrows point from interactive elements to ovals with wireframe ID codes. Developers can see at a glance where a button is intended to lead. The wireframe ID is part of the heading. In this case it's MPLT 3.1. It's also repeated at the top right of each wireframe, so that I can keep track of it when I work on the wireframe in Illustrator.

< Return to Portfolio page