Cecilia Huster, User Experience Designer

 Portfolio  |  Resum√©  |  Linked In

Prototype: "Know Your Customer" Compliance

HTML prototype. Click to walk through.

HTML prototype

An important part of Lean UX is that we stop painting pretty, static images and start building interactive prototypes to communicate on a more visceral level what the user experience is. I firmly believe that the Compliance flow wouldn't have been nearly as long-winded if I had been able to demonstrate what it felt like to walk through. It takes three page loads after the user has logged in before we get to the point.

This happy-path HTML prototype has a simpler flow. As soon as the user has logged in, they get the lightbox. They can opt out, e.g if they have more urgent business to take care of in Resolution Center. Customer Service Calls go through the roof if we don't allow people to opt out, even when their account is hard restricted. It's cheaper to add a Skip link and some logic that sends out email reminders. It's also a much nicer user experience.


My favorite wireframing tool is Omnigraffle. Creating a simple click-trough prototype like this takes only a few hours and it's easy to iterate on it based on research findings. Under the hood it's image maps but it feels pretty real to research participants and stakeholders. I usually create HTML prototypes. No hosting environment is necessary. I often carry the prototype on a USB stick, so I'm not even dependent on a network connection. Business stakeholders often prefer PDF for demos, though. With Omnigraffle they're just as easy to create as HTML.

Click-through prototype in HTML >
Click-through prototype in PDF > (PDF, 546Kb)
User flow > (PDF, 114Kb)


I could also spend some more time and build the prototype in Axure and get even more functionality. Axure can even add working sliders and some fairly advanced form validation.

< Return to Portfolio page