Lead Product Designer
Go to LinkedIn
The Dutch classifieds site Marktplaats.nl wanted to offer invoicing and payment services.
My employer at the time had a lot of experience with auction and single-merchant checkouts. It soon became apparent that classifieds sites are very different. In addition, Marktplaats has a devoted following in the Netherlands. For that reason it was important to stay close to their existing design language. Requirements gathering and solution sketching was challenging and a lot of fun!
I followed my employer's waterfall process for creating user flows and wireframes in Adobe Illustrator. These I then placed into a user experience specification document in Adobe InDesign, as dictated by the corporate process. It was pretty laborious, 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, Sketch or Omnigraffle.
My take on using Illustrator for design work is that it probably works best for agencies. For agencies it's important to produce a document that is 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. I can't see it being used in an Agile process today.
For in-house design, even in a waterfall process, 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 work in another tool, such as Sketch or Omnigraffle.
Create invoice wireframe
In this wireframe the orange and yellow boxes represent Marktplaats' existing page surround. The heading says what the page does and the sign posting under it conveys that it's a two-step process. Sellers want to avoid making mistakes in invoicing, so it's important to give them the opportunity to review their invoice before sending it to the buyer.
The little orange and yellow box underneath summarizes the most important information from the ad, including a thumbnail photo. It's reassuring for sellers to know that they're issuing an invoice for the correct item. It's a small detail, but it's the kind of thing that makes users trust your site and feel good about your brand.
Next come three text fields for the amount, the name of the buyer and their email address. That's all the information needed to issue an invoice. There's also a text area in case the seller wants to include some text on the invoice, e.g. thanking the buyer for their business.
Following Marktplaats' convention, the form ends with a submit button and a link to cancel out of the invoicing process.
Respecting Marktplaats' design language
Marktplaats has 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 to not give in to that temptation.
As a design professional, I need to be flexible enough to create an interaction that fits into an existing site. There may be room for improvement, but I'm not going to waste my coworkers' time by suggesting that they introduce anything wild, just because I like it. As Stephen Covey said "Seek First to Understand, Then to be Understood."
The Marktplaats people let me know that they appreciated that I enjoyed the challenge of creating pages in their design language.
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. I added these details to save time for myself and the rest of the team. They were not part of my employer's templates. Repetition is helpful for users of design documentation, as well as end users of designs.
The review page has a little more going on. First it repeats back to the user what they just entered. Repeating information back to the user, helps build trust.
The orange rectangle on the right lets the seller know that if the buyer uses this payment service, they enjoy 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 buyer protection doesn't cover, e.g. cars.
Review invoice wireframe
MADE IN PIXEL TOGETHER