Before any interface exists, there is a stack of paper. Sketching is the
cheapest way to get an idea out of your head and in front of someone else,
and the cheapest way to throw it away when it turns out to be wrong.
I facilitate and coach design teams on design thinking, and sketching is the
part of that training people resist hardest — usually because they think the
drawing has to be good. It doesn't. It has to be fast, and there have to be a
lot of them.
These are mine, though several are from work with other people: the Critical
Alphabet screens are an interface for Lesley-Ann Noel's card deck, and the
Comunify sketches came out of a project with Mark and Saïda.
Gallery View larger: A sketch titled UKG Pro Navigation, comparing three navigation models. The legacy pattern is annotated with scalability, usability and accessibility problems; the design system's common navigation is marked as a paradigm shift for existing users; the proposed solution is a hybrid using left navigation for high-level content and tabs for secondary views. View larger: Two sketched screens for recruiting. On the left an applicants list with filters and a row of candidates. On the right a Schedule interview with Joan Smith panel for an accountant requisition, asking who is interviewing, collecting date and time, offering a Cronofy calendar connection, and providing a message field. View larger: Three sketched states of a Candidate Cultivation campaign builder, progressing from an empty untitled campaign with one message, to a named Nurture Data Scientists campaign with 39 recipients, to a multi-step sequence with conditions and resend-if-not-opened rules between messages. View larger: A sketched Candidate Cultivation screen showing a newsletter series: September, October and November messages chained by send-next-message rules set to 30 days, ending with a resend-if-not-opened rule and 39 recipients. View larger: A sketch titled The Designer's Critical Alphabet, digital version, crediting Lesley-Ann Noel PhD. Four phone screens are labelled words view, letters view, add new word with automatic definition, and add question to designer. The letters view shows a colourful A to Z grid. View larger: Five phone screens continuing the Critical Alphabet app: adding a word, adding a question, a success screen reading A is for ableism, adding media, and an expanded view offering comment, edit and share. View larger: Three phone screens for the Critical Alphabet app showing the commenting flow: an expanded card with comment, edit and share actions, a comments view, and the keyboard open while a comment is typed. View larger: Interaction notes for the Critical Alphabet app, drawn as three diagrams with arrows: cards stack as words are added to a letter category, a card expands when tapped with vertical scrolling, and horizontal swipe gestures move between letters. View larger: A sketch of the Comunify app, dated June 2021 and credited to Mark, Saïda and Paiva. Four phone screens cover a splash screen, a setup screen asking how the person wants to use the app and about their hearing, and two conversation screens where a deaf user introduces themselves and captures the other person's name. View larger: Four more Comunify app screens following a conversation in an airport: opening the keyboard, typing a question about the American Airlines check-in, adding a speaker whose reply is transcribed as take a left to terminal C, and the introduction screen. View larger: Two sketched screens for a tool called WTFocus, version 0.1. The left pane lists selectable elements — link, input, select, checkbox, radio button, landmark. The right pane configures a link's label and state, and chooses a screen reader target, voice and speed, with a preview and play control. View larger: Two layout explorations for WTFocus. One presents components as a grid with an accessible link panel beside it; the other keeps a vertical element list with the screen reader settings collapsed under the configuration panel. View larger: Two nearly identical WTFocus layouts in their empty state, with an element list on the left and an empty Recent panel on the right, used to compare spacing and proportion. View larger: A six-frame storyboard for a workshop called Back to the Future, held at Tulane in November 2020. The frames run intro why, ice breaker aging app, activity one ask the future, activity two ask the past, reflection how does this change the way you design, and conclusion resources. Previous Next
A sketch titled UKG Pro Navigation, comparing three navigation models. The legacy pattern is annotated with scalability, usability and accessibility problems; the design system's common navigation is marked as a paradigm shift for existing users; the proposed solution is a hybrid using left navigation for high-level content and tabs for secondary views.