UX blunders or: how not to reinvent the wheel

Any designer’s first few works are embarrassing. But if they went the skeuomorphic route they can be really embarrassing. Lately I’ve been trying to rescue one such design for my UCSD HCI Capstone Project —It’s been a rough couple weeks.

Photo by Jackson Simmer on Unsplash

YumYam! began its life as an on-trolley device, a dashboard of sorts, that could guide shoppers through the grocery store aisles, automating a good portion of the shopping routine.

I went on to built a physical prototype for more informative user testing.

But this revealed the design to be a cumbersome solution, requiring extensive upfront costs, infrastructural upkeep, and slow onboarding of store franchises.

YumYam! had to be an app.

I wasn’t too pleased with this, so I mulishly set out to make this dashboard feel tangible, solid, yet curvy, colourful, and playful. In brief, a toy.

I picked the most childish, saccharine colour palette I could and paired it with hand-drawn icons encased in soft, bubbly buttons surrounded by isometric illustrations. All of this, of course, narrated by a typeface that might have been Comic Sans’ stoner roommate in their college days.

You can take a minute (or twenty) to stop laughing here.

Needless to say that, upon revisiting the Figma file some months later, my disappointment was immeasurable and my day was ruined.

What I thought at the time to be a fun, quirky design was in fact a dumpster fire of usability issues, attention sinks, redundant elements, subverted hierarchies, inscrutable features and, to sum it up, an impudent insult to all that is beautiful.

But it was my baby. My impudent insult to all that is beautiful.

“I can fix this,” I thought.
But I wanted to make this fun, so I laid out a few rules for myself:

• I had to maintain one skeuomorphic element in the interface.
• I couldn’t change the colour palette, except for adjustments in saturation and brightness for accessibility purposes.
• I had to keep the silly food themed wallpaper background.
• I had to keep the isometric illustrations.
• I couldn’t change the product’s information architecture or hierarchy of the elements.
• I had to progressively redesign individual elements on the old screens. No starting from scratch allowed.

These restraints highlighted how much one bad decision taken early in the design process can pigeonhole us later on, leading us onto a path of compromises that will result in a whole product feeling off, without it being necessarily possible to point at anything specific as the main culprit.

Here are a few key screens, pre and post redesign:

My primary blue was the only colour in the palette that got a touch-up.

The original dashboard gave space to a more conventional bar that maintains a layered skeuomorphic selector as part of my restraints. The wallpaper background got relegated to the navigation, and all distractions in terms of shapes and unnecessary accents were culled.

ngl: I like how the box stroke for the “Recipes” button went through the book pages in the original design.

Good Lord. Look at those + and — buttons… what was I thinking? The horror, the horror!

The “shopping” view adopts a darker palette for a less obtrusive experience.

And a few more of the redesigned screens for good measure:

YumYam! still feels off after its redesign. Not all tested users felt it, but I feel it. Is it because its old, candied self is baked into its very foundation? Is it just my personal bias speaking? Or will I be laugh-crying once again when I revisit this project in a few months?

Either way, I feel like this experience was a sort of mini-graduation within my design journey. In a sense I feel like even more of a newbie than when I first worked on this project, because some of the unknown unknowns have become known unknowns. It’s frankly humbling, and slightly uncomfortable. But I’ve shed that vain and stubborn desire to reinvent the wheel that afflicts many newcomers in any field.

Design is a vast discipline with a colourful history and a huge, hard-working community that relentlessly puts out inspiring resources for free.
I just wanna soak it all in for a little while; put my head down and do the work. All in all it’s a nice place to be.

Check out the full case study on my website.