Here is my entry in the first ever “librarian design challenge” to design a library card onboarding experience. It is a long one-page application that mimics many of the single-page “call-to-action” pages you see so many of these days.
What I came up tries to address the following the things:
- Why you might want a library card
- How to tell if you’re eligible
- What steps to take to get one
I tought it was important to imagine the process culminating in an automatically generated temporary number and triggering the creation of a physical card. Let’s see how I did.
I thought I would start off by showing the simple wireframe that I created for the page. I used the bluntest of blunt instruments–a Sharpie and a piece of paper.
There are a few changes between this and the “final version” you’ll see below. You can see that I decided to add in the map component afterwards. So, a simple arrow accomplished that fact.
Making this wireframe was a good reminder for me that easy to produce, low-fidelity documents like this can be just as helpful as fancy clickable prototypes when you’re thinking through an idea.
So, here is the mockup that I created from the wireframe. I decided not to build an actual HTML mockup and used Keynote instead. While I like “thinking in code”, it is also nice to have the freedom to move bits around on the screen with abandon.
As I made this mockup though, I tried to not to put anything too outlandish that couldn’t actually be created for a modern browser (or even a not-so-modern one).
A little self-evaluation
I was pretty pleased with what I came up with. It did end up being a bit more of a marketing page that I had originally intended, but I wanted to try to convey the “whys and wherefores” of signing up for a card in a pretty straightforward and conversational way.