Brandon E.B. Ward

View Original

Delivering Quality Experiences

Photo by Michaela Baum on Unsplash

1. The Basic Design Process

The Brief

We've all seen the cliché memes even if we haven't experienced them ourselves:

Make the logo bigger! Make it pop! Add more sizzle! Make it fresh! Wow me!

And, honestly, we've also seen some sites that do just that, some even do it well. Everything from auto-playing music and sound effects, to parallax, animated gradients, interactive video, even websites that are almost full-blown video games in their own right.

It can feel as if every call with the client begins in a similar vein.

"We're building <APP> for <VERTICAL>. It's like <OTHER APP>, but ours will be different because <POP/SIZZLE/GAMIFICATION>."

We nod our heads. "It'll have dynamic, user-content-driven dashboards!" Yep. "And we want it to work on mobile and tablets." Absolutely. "It'd be cool if we could have some ML and AR involved there too, but we're not sure how yet. We're hoping you can help us figure that part out." Nothing new here. You want it to be accessible too right? “Oh yeah, accessibility! If we have time left, do that!” <sigh>

Research

You do your research. You talk to the stakeholders. You ask hundreds of questions of your client's customers. You unravel the knot of unknowns, and patterns of user behavior emerge. You begin to understand what the business actually needs, and what the users actually need. You rough out an IA and test it. You see the pitfalls in the current journey. You identify inefficiencies and problems, er, opportunities across the service layers. You present your findings. "Yes! You get it!" the client says. We're all on the same page. You understand the problem, and you begin solving it.

Photo by Leon on Unsplash

UX Design

You wireframe. You prototype. You assure the client that, no, these aren't the actual colors. No, that's not English it's called Greeked text. “Why does it look like Latin if it's called Greeked text? Why don't the numbers in those columns add up?” So you replace all the lorem ipsum with real-ish copy and adjust the numbers to make a little sense. Okay, now they get it. No, that's likely not the font you'll use, we're just trying to get a sense of how things work first. Visual design will come later. Okay, they get it. Sort of. So, you begin testing.

Photo by Amélie Mourichon on Unsplash

Testing

Testing goes great. You uncover some problems with the IA. No biggie, super-easy change. You see some small issues with some labels, so you wordsmith those. There are a couple of show-stoppers that make you feel stupid. How did you not see that before!? But you see it now, and you've already got 2 or 3 ideas for how to solve that. Things are smokin! You report your results. It tested through the roof, and you're very confident users will experience very little friction. They'll be able to easily grasp the tasks with no supervision. You've organized things with clear paths. Sequential work is laid out so it's obvious what came before, what they're doing now, and what comes next. The client begins to see how amazing this new vision is. So you move on to visuals.

Photo by UX Indonesia on Unsplash

Visual UI Design

The visual designers kill it. Maybe it's another team. Maybe it's you. Maybe it's Maybelline. They've transformed your usable, utilitarian, efficiency-driven low-fi wires into gorgeous, pixel-perfect renderings of the final vision.

And here's where things can get dicey.

Photo by Daniel Korpai on Unsplash

2. The Road To Destruction

Make it Pop!

"I like it..." says the HiPPO. "...but I don't love it." This is nothing new. We're designers, and this is the path we've chosen. Okay, that's fair. What don't you love about it?

"Oh, I don't know. It just doesn't pop/wow/sizzle/whatever. Have you been to <THAT HOT VIDEO GAMESITE>? They've got lasers, and real-time AR video that places you right in the middle of the screen and when you move your mouse around your little guy runs after it! And when you scroll, it scrolls horizontally, not vertically, which gives it a panoramic feeling! It's really cool!"

Everyone is forcing smiles and nodding...

"I know our accounting platform isn't a video game, but why can't we do something cool like make the avatars move around, or use their webcams to show a real-time view of their face so they don't have to upload a photo? What if when they scrolled, the data grid used that cool parallax motion so the columns moved underneath one another like those cool Miyazaki films? Anyway, all our competitors scroll vertically...what if we laid all our stuff out horizontally? It'd really set us apart!"

Okay - so I may be exaggerating some client requests and expectations, but honestly, not by very much.

The infamous LingsCars.com

Note: I don’t hate Lingscars.com for a number of reasons. Perhaps that’s another article.

Also, I’m not talking about getting the right feedback at the right time. That’s a different issue, nicely addressed in this article by James Cook.

3. The Path To Quality

The Truth

It’s times like these my boss Tim is wont to say

The first thing about introducing anything "fresh and novel" is that you've created your own usability debt. By its very nature, the user is being introduced to something they may not be familiar with and will have to discover and learn. If this is a game, or a marketing site, maybe that's a great thing. If it's accounting software, it's not. In fact, in most (if not all) cases I'd argue introducing your own obstacles to clarity and efficiency, not managing to your user base's existing mental models is bad. It’s like tying your own shoelaces together then trying to sprint.

Remember Stephen Anderson's hierarchy of UX?

Concept and design by Stephen P. Anderson

We assume the app will be built to function reliably. Our job is to make it first usable and convenient. Only when we've established that base platform can we even begin to explore pleasure and meaning. If you try to design for uniqueness and stand-out visuals prematurely, you'll compromise your own foundation that your research and design teams spent so much time and effort establishing.

Does this mean we don't try to cross the chasm of convenience and push our apps into the pleasure zone? No. In fact, apps like Word and Excel could really use a healthy dose of pleasure and meaning, and dare I say convenience as well. But managing design and experience at this level gets exponentially harder. Your baseline reliable functionality that's relatively usable is table-steaks. It absolutely has to do that or nobody will use it at all. But if you don't even try to shoot for some novelty, some fresh expression, they may use it a bit, but have no desire to come back. This is one of the biggest problems with MVPs (minimum VIABLE products). When was the last time you really enjoyed an experience or app or site and said to yourself, "Wow, that was a really viable experience!"?

The Product Roadmap

This is why we choose to design and build Minimum VALUABLE Products (I'd also have accepted Minimum Lovable Products). Because MVP is so common though, we don't even use that acronym. We use Cupcake, Birthday Cake, and Wedding Cake.

Cupcake (your minimum valuable product) is what absolutely must ship, otherwise, there's no point. It's important to note here that Cupcake isn't a horizontal cut of the hierarchy though, sacrificing convenience, pleasure, and meaning for a baseline product that merely satisfies at an intellectual level. No, Cupcake products cut vertically up the pyramid, capturing a bit from every layer.

The cake analogy is so powerful, because at their core, all three types of cake are the same. You've got flour, eggs, sugar, cocoa, icing, maybe even a creamy filling and a topper. A bite of a cupcake and a wedding cake are essentially the same experience, just in a less substantial form.

  • Cupcake offers a compelling experience

  • Birthday Cake enhances that experience

  • Wedding Cake is the full realization of the product vision

Cupcake encompasses the things you KNOW you must deliver to provide real value.

Once that core value is delivered, you can begin on some Birthday Cake revisions, adding additional features, functions, dare I say, even sizzle, insomuch as they enhance the core experience of your app. You scale. You are able to handle more clients. But when you're building Cupcake, as much as you want that slick new feature or novel AR avatar experience, you have to justify that it's part of the core foundational experience and nobody would bother with your app without it, or, if it's an enhancement that can build onto the base in a fast-follow release (Birthday Cake). Wedding cakes are the "big show" of cakes.

Wedding Cake is what you envision your product to be two to five years from now, with all the bells and whistles that make Wedding Cakes so much more substantial than your humble cupcake. But all the while, you're really providing the core value in your initial cupcake offering, and getting hung up on fresh trends and unique, fun, and sizzling design can detract, and more often, even degrade, even break your core experience.

Have Your Cake & Eat It Too

To wit:

  1. The Basic Design Process

    • The Brief—Effective planning and setting expectations

    • Research—Discover insights into the problems you’re solving

    • UX Design—Design like you know you’re right

    • Testing—Test like you know you’re wrong

    • Visual UI Design—Enhance the experience with brand guides and style

  2. The Road To Destruction

    • Make it Pop!—Here be monsters

  3. The Path To Quality

    • The Truth—Keep it real, make sure you stay focused on what matters

    • The Product Roadmap—Cupcakes! Delicious, moist cupcakes!

Let's seek to build Cupcakes that span the layer-cake hierarchy from functional, to reliable, to usable, past the chasm of convenience, even to pleasure and meaning.

Once we've designed the thing the users actually need that supports the business' goals, don't let sparkle get in the way of delivering a great, valuable product.