Did UX kill visual design?
UX Director Yesenia Perez-Cruz and Principal Designer Roy Stanfield on the tension between visual design and UX
The Inside Shopify UX podcast is back for season two… both audibly and now, visually. Listen with your favorite podcast app or watch new episodes on YouTube.
Our host, UX Director Lola Oyelayo-Pearson, will be chatting with leaders and crafters on the Shopify UX team and will be asking questions like ‘has UX killed visual design?’ and ‘Is design an inclusive practice?’.
If you’re low on time or prefer reading, continue for the TL;DL of Episode 2: Did UX kill visual design?
Watch on YouTube and Spotify, or subscribe wherever you listen to podcasts.
In this episode, Lola Oyelayo-Pearson chats with Yesenia Perez-Cruz and Roy Stanfield about the tension between visual design and UX. Yesenia is the UX director for the Build team, more specifically client foundations. They help deliver high quality experiences faster through tools, including the Polaris design system. Roy is a principal designer currently working on the Merchant Services team. As a principal designer at Shopify, Roy moves between teams, diving into particularly tricky projects to create green paths for iterative work to proceed forward.
Debunking design system myths
Design systems are tools that can help us build faster, but designers still need to engage in critical thinking to find the right solution.
While design systems are powerful tools that help us get things done faster, they can sometimes feel limiting. Lola says, “I find that the biggest risk with design systems is that you turn designers into layout people. It’s just, here’s all the pieces. ‘I’m just going to organize them in a two dimensional way,’ as opposed to ‘Hey, I have a bunch of problems that I need to solve, and I’m going to work through some kind of UI or experience where I can make choices about what actually ends up on the page.’”
It’s up to designers to know how to use the tools, lay out screens, how to have a good sense of hierarchy, and when things should be conveyed with more visual affordance versus words. Yesenia breaks it down further saying, “Sometimes the perception about a design system is that it has all of those building blocks and you’re just like plugging and playing, but actually there still needs to be designers that are intentionally thinking about ‘How do I use this tool set in a critical way’ and ‘How do I push it when it’s not working?’, and ‘How can I break out, when it’s not working or when I need to do something new’.”
So what does this mean when it comes to Polaris? Roy believes there’s a lot of room for updates and ways to move Polaris forward both in terms of visual look and feel so that it feels more future-forward. He says, “We’re in a great space where our designers can push the demand. They can show where Polaris was excellent a few years ago for an admin-centric world, and where new products that are being developed could benefit from a rethink of certain components, or an addition of certain components. And what I’m really looking forward to at Shopify is, I feel like we’re on the road to creating that kind of demand through our UX work.”
Visual design vs UX
Visual design isn’t dead, but we may have to do some resuscitating.
The tension between visual design and UX is something Yesenia says she sees across the industry, not just at Shopify. She attributes this to digital design being less of a mature practice. As designers, we spend a lot of time trying to defend our work — whether it’s a reaction against the snobby visual designer that hates Comic Sans or the UXer that’s sharing every step in their process to attempt to legitimize their work. Yesenia believes we need to change the way we talk about our work. Instead of describing design as having an underlying layer that’s the functionality and a pretty, veneer layer on top, we should be focused on how design makes the audience feel.
She says, “Visual design is not about the veneer that is on top of something. It’s about the visceral reaction that someone has when they first encounter a design and how it makes them feel. And then once you get past the visceral reaction, then it’s, ‘Okay, does this work? How well does this work?’.’’
“Visual design is not about the veneer that is on top of something. It’s about the visceral reaction that someone has when they first encounter a design and how it makes them feel.”
To make this even more clear, Yesenia brings up the widely-known Craigslist metaphor known for being an example of why visual design doesn’t matter. “The thing about Craigslist is that the design looks like classified ads. And so like the metaphor is there and it’s appropriate. And it’s actually not a good justification for why visual design doesn’t matter. It just means that in that case, that choice made sense for that product.”
Lola expands on the gap between the UX and visual design by saying there are two extremes of internet. It’s very easy for anyone to bootstrap UI. There are now so many design systems and tools, including ours, that are super easy to grab and copy-paste. But on the other side, there’s Dribbble and other sites filled with design that’s absolutely stunning craftsmanship, but most likely not buildable or usable in the real world.
Lola says, “And then you’ve got the reality in between, which is companies have products where we’re solving problems and still trying to make stuff that’s beautiful and good-looking but having to deal with the inheritance of legacy. There’s like a bunch of complex things in there that still demand our attention, but yet we still want to see this great, visceral thing. We still want people to see our designs and be like, wow, that is a good looking piece.”
Piloting a new hiring process
Implementing a new async portfolio pre-screening process has helped the team rebalance our visual design quality bar and has increased efficiency in the interview process overall.
This divide between visual design and UX at Shopify is something the team is working to address — and that starts with rethinking the way we hire new designers into the organization. Roy notes that we had support to do this: “We’re starting to confront the idea that we needed to sort of rebalance the UX team towards visual design in order to project ourselves into the future of design. Thanks to our VP of UX, Cynthia, and our Director of Merchant Services, Monica, there was an openness and desire to do better.”
“We’re starting to confront the idea that we needed to sort of rebalance the UX team towards visual design in order to project ourselves into the future of design.”
Historically, the first step in a traditional design interview process is the portfolio review. Typically a candidate would participate in an in-person (video chat in our case now that Shopify is digital by design) where they walk the interviewer through their portfolio. The candidate would then receive a yes or no. Our process included two of these interviews. Not only did it make the process redundant, but we were starting to see conflicting opinions which created confusion about criteria.
The team came up with a pilot to replace one of those in-person reviews with this async portfolio review process. Yesenia describes the new approach: “We have been looking at a blind pre-screening where portfolios come in and there are people that are assigned to screen for a baseline of visual design chops. We created some criteria and we went through with a small group to define what are the signals that would tell us whether someone has that baseline quality bar for visual design.”
Those signals include typography, hierarchy, the ability to design space, an opinionated grid, point of view, and even a sense of joy. Roy reports, “We’ve found some major benefits [to the pilot]. One, there’s a high correlation between people that are passing that visual design screen and also passing the UX interview and getting hired.
“The other big benefit is we now have a great set of data to work from, to train other people inside of our company on how to do these interviews going forward. And lastly, I’d say, it’s hard to quantify exactly, […] but it looks like we’ve saved something like 150 in-person interview hours for our interviewers by doing the async upfront.”
Evoking a visceral reaction
Why say it when you can show it?
As mentioned in our previous episode, Shopify UX recently released two very opinionated UI-oriented experiences that focus our developer audiences — Dev Docs and Hydrogen. Lola asks Yesenia and Roy about how they were able to inject style into their projects, especially in relation to an established design system like Polaris.
Yesenia believes we can over-index on trying to explain a feeling just with words. She says, “When we were working on shopify.dev, some of the things that we wanted to convey to people were, ‘Hey, you should feel excited about working on this platform. This platform makes it really easy for you to get started. There’s a great opportunity for you here.’”
She goes on to say that you can certainly do this by listing bullet points and adding generic images of code, but it won’t create a visceral response from a developer. That’s where the idea of leaning into pixel art and gaming metaphors came from. The team working on it deeply understands developer culture. “When you can convey [your idea] with an illustration, you don’t have to be so literal with words,” says Yesenia. “Something that I think about a lot when it comes to visual design and flare is, it has to feel authentic. Where style can go wrong is if it feels inauthentic. And if it feels like you don’t understand the people that you’re designing for.”
“Something that I think about a lot when it comes to visual design and flare is, it has to feel authentic. Where style can go wrong is if it feels inauthentic. And if it feels like you don’t understand the people that you’re designing for.”
Yesenia reminds us it’s easier to do this when you’re working on something that’s for a super focused audience. When we’re designing for merchants there’s much more variability — like where merchants live, the types of goods they sell, and the fact that they have standalone brands. It becomes trickier to figure out how to be spiky in those places.
From Roy’s point of view, as someone who’s trying to inject style into the merchant experience, he relies on the fundamentals and his design influences. He shares that when he was getting started in design, he spent a lot of time copying and recreating layouts. So much so that he learned the precise dimensions by heart. The other thing that keeps him going is learning about people that have created work that he admires. Make sure to check out this video he referenced about how Bas Ording and Steve Jobs collaborated on the doc we all know and love today.
Breaking out
It’s clear from the conversation that creativity and visual design are still very much needed when we’re trying to create experiences for different audiences. Systems help us build faster and more efficiently, but we’ll always run into situations where we need to break out of those systems to get our message across. Great designers know when and how to do that.
Extra credit
Want to dig in more on the topics discussed in this episode?
- Lola Oyelayo-Pearson
- Yesenia Perez-Cruz
- Roy Stanfield
- Polaris
- Hydrogen
- Shopify Dev Docs
- Oral History of Bas Ording
- Stripe Press
- Gall’s Law: “A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over with a working simple system.” —John Gall, The Systems Bible
- Jakob’s Law: “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed.” —Jakob Nielsen
- Read the full transcript.
