How we think about design at Yuppiechef.com
On the surface, Yuppiechef is an online store that sells kitchen- and homeware, but we’re also on a mission to bring people together — through food. Around a table. Sharing stories. As a team, we find the best way to communicate what we’re about is by sharing stories. What follows are three stories about UI and UX at Yuppiechef.com, and a big secret.
On little big details.
Or, that time we changed our logo and no-one noticed.
Some time in 2014, a few of us felt it was time for change. As a company, Yuppiechef was “growing up” and we’d added several layers to our online offering:
- An online cooking school
- A redesigned online registry service
- A Q&A forum
- And our blog and storefront
These layers brought about a few technical challenges that needed to be solved with branding, but we felt that perhaps we also needed to communicate this new season by redesigning our logo — which was about six or seven years old at the time.
We also felt that if we were going to mess with something this important, that we’d better do it right. It took months. We laboured over Pantone swatches and RGB values, fonts, kerning, a complete redesign versus an iteration, even the name at one point.
Halfway through, Kalahari.com blindsided everyone by redesigning their iconic Khoisan ribbon man — supposedly in an effort to make it more mobile friendly. The response from the design community was awful — most people pointing out how the new box icon wasn’t in perspective, and neither was the ‘K’ on the side of it. It seemed everyone disliked the change. A lot.
We panicked.
D-day came for our new logo and we pushed the merge button in BitBucket. And then we sat in silence, waiting for Twitter to light up with all manner of design venom and vitriol. And you know what? Nothing happened.
Nothing.
I learnt a few things that day:
- Sometimes, no-one actually cares. Sometimes no news is good news. And sometimes what you think is important isn’t important to your users.
- But I also learnt that you should do it anyway. The things that no-one sees are often more important than the ones they do (more on this in a bit). And that that little transition or that awesome illustration all adds up.
“Customers judge online credibility by evaluating visual design, copywriting, and interactions… Getting design details right can create positive emotional states that actually make products easier to use.” — Braden Kowitz, GV Partner
On design at scale.
Or, that time we found a random key and a half-eaten biscuit in our junk drawer.
We use a fair amount of intuition and data to constantly examine and reexamine our user interface and user experience. And we’re fearless enough to make changes to this stuff almost on the fly. We work iteratively. And we’re lucky enough to have gotten most of it right. Most of it.
But there are dark corners… Dark corners, skeletons and ghosts of Christmases past, and as Jason Fried from Basecamp calls it, “junk drawers” — the places on our site where you’ll find:
- a menu item that didn’t have anywhere else to go — you know, the “more” button?
- a form that doesn’t quite work because there’s some wonky validation
- a younger, cheekier version of our brand voice still hanging around
- a colour that wasn’t declared using a Sass variable
- or just something that looks totally outdated and forgotten
They pop up all the time, like a random key or half-eaten biscuit would in the creases of a couch. Or batteries in a drawer. Are they still fine? Are they not?
There are a number of reasons for this phenomenon. And hopefully, by sharing some of our reasons, this is helpful to someone going through the same stuff…
- Firstly, design at scale is difficult to get right. Really, really hard.
- I think our unique problem was that we looked at each product within our site — the storefront, the cooking school, the forum, the blog — individually, with different product owners. At the time, we still had this agency-client relationship with the other teams. Silos, if you like. And what happened was that the UI and UX ended up looking and feeling different in each of those. And, on a technical front, we ended up duplicating a lot of functionality and components, each time slightly differently.
- We didn’t have a single origin of truth for our visual language or user experience — some people call these patterns or style guides.
- And we weren’t looking at the bigger picture, the experience overall, and our affinities and affordances, common elements. We just built. And built. And built. And we built some dark corners and we shoved stuff into junk drawers.
It happens.
We’re slowly-but-surely chipping away at this and uncovering stuff all the time.
But then we’re also very startup still, and so sure, there are parts of our system and pieces of design — the dark corners of our site — that we know are ‘broken’, but our ability to balance the small stuff from the big, impactful stuff is what drives us forward. Yes, the little big details matter, but there’s also this balance you need to strike between shipping a product — knowing that you’re going to iterate on it — and pushing pixels.
I struggle with this every day.
On empathy.
Or, that time a completely blind person came to collect their order from us.
“Walking in another person’s shoes sounds easy enough, but moving past a cursory understanding takes time, effort, and an openness that is difficult to achieve.” — Michael Chapman, Ideo
About a year and a half ago, I happened to be standing downstairs in our reception area when a man and his wife walked in to collect an order. It was difficult not to notice that the man was blind. He introduced himself as Mark and proceeded to explain that he and his wife both love shopping on Yuppiechef. At the time, I thought nothing of it other than, “That’s cool,” and walked out. But a week or so later, I received an email from him.
I’m going to stop here and confess to a few things:
- As a designer, my single most morbid fear is losing my sight.
- Because of this fear, and because I’ve always thought it was kinda important, I’ve always tried to consider accessibility and at least include the basics, hoping that it’d help a few people. But, there’s a but…
- Our team had been trying for a while to solve some SEO issues in our code — switching to HTML5 elements, role attributes and including better descriptions on product pages, that kind of stuff. We weren’t trying to make our site more accessible to visually impaired people. We were mostly trying to make our site more accessible to Google! So out of pretty selfish reasons, really, we’d unintentionally made our site more accessible for people like Mark.
- Before this email, I’d also never, ever had an interaction with a visually impaired person. I was pretty nervous.
After I’d left the reception area that day, Mark asked for our team to all be thanked for making our site as accessible as we have, and wanted to get in touch with someone about it. His mail went on to explain what it’s actually like to shop on Yuppiechef and other ecommerce sites as a completely blind person, and he offered some suggestions for improving our accessibility. He even went on to point out a couple of bugs that we otherwise wouldn’t have spotted, as it were, because his screen reader picked them up.
I learnt some big lessons that day.
In recent months, particularly in the UI / UX community, there’s been a lot of talk about empathy. And though it’s become a bit of a buzzword like “personas” or “user stories”, I believe there’s a lot of truth in it. But I also believe we’ve hardly even scratched the surface of what this even means. And I count myself of the most guilty.
I know this all probably comes across as a bit preachy, but there are people out there, actual customers, who don’t get to see the visuals that you and I create — but they are interested in good design.
There’s this great line from an article I read recently by Michael Chapman from Ideo, which says, “Walking in another person’s shoes sounds easy enough, but moving past a cursory understanding takes time, effort, and an openness that is difficult to achieve.”
Our big secret.
It’s people. Firstly it’s our customers. But it’s also our team and how we communicate and work together to solve problems for our customers, and each other.
We’ve got incredibly talented people working with us — developers, marketers, forecasters… But I don’t believe we’re doing anything special. I think what’s made Yuppiechef what it is for the last ten years (we’re 10 this August, by the way) is that everyone knows everyone else by name, we eat lunch together, we share stories with each other, we all work in the same building, we all pitch in the warehouse when we need to, everyone writes cards to customers every day…
And we have conversations with our customers about what they like, what they don’t like. The customer service team is constantly taking note of issues and pain points. We’re reading every product review…
And all of this stuff is important, because when someone from customer service comes to the dev team describing an issue that a user is experiencing on checkout, we understand that this is a problem we can solve together, with honest discussion, because we’re friends.
And because we’ve had conversations with customers — actual people — we can put faces to names and realise that we’re not just fixing a bug on checkout, but that we’re solving someone’s problem and actually making someone’s day a little easier.
It’s people. Connecting people. In our case to great products and to each other over food. And it’s rad that design is able to play a small part in that.
This article is an adaptation of a talk I gave recently at Dribbble Meetup Cape Town, organised and sponsored by our friends at Isoflow. The Cape Town Dribbble Community were awarded the 2015 Silver Bucket Awards for being the best international Dribbble community. If you enjoyed this article, I have another you can read about “The Hidden Beauty of Impermanence.”
