You ask me, “Do you think LendUp’s design is high quality?” and I stammer. “Yeah I mean, we use patterns ... we think about accessibility ...” My face feels hot. “We do design reviews …” I back up slowly. “We try to include delight ...” I slip into the elevator and mash the >< button. Heart pounding, I pull out my phone and drop it. I pick it up and Slack the design team: “we rly should tihnk about define what ‘quality’ means for design.” [sic]
This was just a crazy dream. But the seven of us on the LendUp Design team, we talk about our dreams, and sometimes, like this time, we are dreaming the same dream. So last January we decided to get into our dream, like Inception. 2018 would be the year we define what “quality” means for LendUp Design.
What We Talk About When We Talk About Design Quality
Defining “quality” is hard. Pretty sure the guy in Zen and the Art of Motorcycle Maintenance didn't figure it out. But standards of quality are quite common. Today I learned that a standard of quality in sewing is “The seam finish is appropriate to the garment fabric.” We could work with standards that sound like that. We should actually borrow that one for our company swag.
If sewing could do it, maybe we could too. Perhaps it’s possible to create some finite list of standards for designing websites and apps. But surely other designers had already cracked this case. I'd seen them in my dream, watching me through clear-framed glasses, judging me.
So we researched some potential starting points:
- Google's HEART framework: Hard to argue with something that apparently works for Google; they do OK. But this framework doesn’t really care about what the design is, as long as a lot of people use it.
- Nielsen's Usability Heuristics: Undeniable knowledge from before we were even internet babies. We should build from this, but we have certainly learned some things in the past 20 years too.
- CARMEL: A modern enhancement of Nielsen’s, from a small UX consultancy. It covered all the dimensions we tend to talk about anyway: Consistency, Accessibility, Recovery, Memory, Efficiency, and Language. These describe the nature of a design solution rather than its performance metrics. We liked the specific callout of accessibility and the kind-of-funny acronym. We substituted Coherence for Consistency, for reasons shown below. And we guessed that any principle we might think of for “design quality" could be part of one of these dimensions. Sold!
L-R: Coherence, Consistency.
Make It Sweet
“How might you say this design solution is Efficient? How is it considerate of Memory?” We kicked CARMEL’s tires in design reviews. By being comfortable with the vagueness, we were able to remain open to learn how to specifically define these dimensions for our team.
- Where do our interpretations seem to align naturally? Coherence.
- Where are we all over the place? Efficiency, Memory.
- What needs to be super specific? Accessibility, Recovery.
- What might be left a bit more to interpretation? Language.
In this way, we defined “quality” for LendUp Design:
- Coherence: Everything feels like it belongs. Use our UI component library. New ideas can be invented as long as they’re added to the library.
- Accessibility: It’s accessible to users of varying abilities on various devices. Comply with at least WCAG 2.1 level AA, and ensure the same high-quality experience is available from a broad range of devices and browsers.
- Recovery: Potential errors are prevented up front or easy to recover from. Classify potential errors (e.g. required input, invalid input, system errors), and use this classification to prevent, handle, and recover from them coherently.
- Memory: It doesn't make the customer think. Adhere to usability principles that we’ve distilled from a fresh study of the fundamentals (Krug, Nielsen, Cooper, Laws of UX).
- Efficiency: It is easy to perform a task or find information. But with limited space and attention, everything can’t be as easy as possible. Use the Obvious, Easy, Possible framework to force those decisions.
- Language: It speaks the customer's language. Everything complies with the LendUp Editorial Style Guide, which is based on principles of clear writing and years of expertise in copywriting for financial services.
We did it. I smile knowingly and put my feet up, warmed by a profound sense of inner peace. I am on a beach. Palms sway in the fragrant breeze. I notice the seams of my canvas chair, how they beautifully complement the fabric.
Jakob Nielsen takes the frozen daiquiri from my hand, and sips from the straw for probably like fifteen seconds.
"Ahhhhhhh. So. There's no Sketch plug-in for CARMEL. You can't just push pixels until usability happens. You’ve figured out how to define quality, but how exactly do you plan to build it into your products?"
For the 1768th time in my life, I grudgingly concede to Jakob Nielsen. We can review a screen we designed and say, OK, seems like quality work. But it’s not obvious how clear our thinking was, and how well our intent was realized in the design. For example:
- Which tasks were intended to be the most efficient? Are they?
- This implies X is most important, followed by Y, then Z. Is that what we wanted?
- We seem to handle this one error well, but did we account for all potential errors?
CARMELization: How Quality Emerges From The Design Process
To structure our thinking as we work through a design problem, we recently adapted a simple four-step design process from GV’s Design Sprint. When CARMEL came along, we realized it could fit right into this process. Some dimension of CARMEL is appropriate to consider at each step, so by the time the process is complete, we’ve considered all dimensions. Like this:
- Step 1: Understand the problem In the beginning, we focus on the problem, not yet the solution.
- Step 2, Diverge: Explore different approaches Here we make sure we’re thinking clearly about potential solutions. Just by reviewing wireframes, we can evaluate visual hierarchy, whether a screen seems overloaded, our understanding of potential errors, and more. We’re considering Efficiency,Memory,Recovery, and Accessibility.
- Step 3, Converge: Build out the best approach Now, we review comps, ensuring the most important things look important, that errors are handled well, that our visual design and copywriting are on-brand, among other things. Thus we cover Coherence and Language, and complete Efficiency, Memory, and Recovery too.
- Step 4, Deliver: See through implementation and release By now, we’re covered ... except most of Accessibility. So we test the implementation, ensure it complies with accessibility standards, and that it works as intended in all our supported devices and browsers.
I’m happy to tell you the design dreams are getting less stressful. A couple nights ago, while soaring majestically above Big Sur, I saw Jared Spool zooming at me and we high-fived. And by day, we have other new superpowers to try out:
- We can measure quality: CARMEL frees us from speculation and subjectivity, and makes it easy to identify and prioritize design improvements.
- We can’t miss quality: Our design process tells us precisely when and how to consider and address each dimension of CARMEL.
- We can all do it: It doesn’t matter if one designer is an accessibility expert and another a visual whiz. We can consistently deliver the same standard of quality as a team.
We probably didn’t nail “quality” on the first try, so we’re already excited to improve it and push it farther. Our list of potential ideas for 2019 includes world-class accessibility, incorporating way more expert usability knowledge (that’s why Jared Spool was there), and publishing these standards for anyone to use. You don’t have to solve this alone. We can be in your dream if you’ll be in ours.