Component skills for digital product designers
Skills to learn as a digital product designer
Liked this essay? Follow Ashish on Twitter
A while back this tweet by Andrew Allen made the rounds. It illustrates the learning gap for design:
It’s true. For example, look at these themes that the designers on the Buzzfeed team pursue in the course of the their growth as designers:
There is Visual Design, UX Design, Toolkit, Process (the ‘Design’ bucket in Allen’s figure); Recruiting, Culture, Leadership, Mentorship, Communication, Transparency (the ‘Management’ bucket); Data (the ‘Statistics’ bucket) and Fluency, Patterns, Product Thinking (Overlap of ‘Design’, ‘Computer Science’ and ‘Business’).
That’s quite a bit of stuff to learn. It can be a bit scary for someone starting out.
Where to begin?
If Allen’s tweet is the 30,000 feet view, how do you zoom a bit closer to the ground and get started? Which skills do you start learning first?
At Zomato, my previous company, me and one of my teammates got a chance to prototype this.
Arpit has been a developer for several years and he wanted to try out for the design team. So we designed a 10 day bootcamp of sorts where he tried on a design project every day, and we followed it up with a two-way crit. We would critique the design, and then we would critique the process.
The idea was to help Arpit get the path to becoming a designer and identifying core component skills that could be useful to anyone starting out as a designer.
Here’s are the 5 component skills we identified:
1. Craftsmanship
You may have come across this under the moniker of ‘visual design’, and some companies even have ‘Visual Designers’. Craftsmanship means you have a high bar for the quality of execution of the final product. Stuff like alignment and spacing, good typographic and element hierarchy, color contrast, tasteful motion and transitions, having a voice and a personality, maintaining the appropriate line weight for your iconography or something mundane like remembering to export bitmap assets for multiple screen resolutions.
How do you practice craft as a beginner?
If you want to see what good craftsmanship in user interface design looks like, look at the videos by the folks over at Refactoring UI. Try doing that yourself. Self-initiated redesigns are a great way to practice this.
The Daily UI project, which sends you a design prompt daily is also IMO an activity to hone your craft. I’ve seen designers really up their craft game once they go through all the prompts.
Learn design basics like CRAP, that is, Contrast, Repetition, Alignment, Proximity (from the Non-designer’s design book discovered through Scott Doorley).
What about educational background? Craftsmanship depends on how much practice you have with your medium. What does that mean? Apps are screen-based products, which means people with training in graphic design are already pre-disposed to being good at the craft of user-interface design. (Perhaps, once VR becomes mainstream, the game designers of the world would perhaps be pre-disposed towards goods craftsmanship of VR experiences.)
2. Low-level product logic
Let’s go back to our example of a graphic designer. How a graphic designer will design a book will vary considerable from how she designs a poster and will vary from how she designs an app.
There are certain conventions that the form of your product will dictate. For example the navigational conventions of in the form of a website is different from the form of an Android app. The possible interactions on devices are are different (don’t you hate that there is no “hover” on a touchscreen device ? 😝). You need to create loading states (as API request take time) as well as empty states (as API requests might return an empty set) which you won’t have to do if the form was physical (like a book).
Learning and practicing this is what I call “low-level product logic”.
I’ve noticed how graphic designers who are completely new to digital product design often design apps that feel very ‘magazine-like’ instead of ‘app-like’.
While innovation is certain possible with low-level product logic, this is the zone of helping a user be in a predictable environment. As Jakob Nielsen says:
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.
How do you get better at this?
Well practice is definitely useful here, but you have you pair that with education and observation.
For example the site Laws of UX catalogs important laws that you should learn.
You can read essays written by the Nielsen Norman Group or Luke W.
And you have to be observant, you have to notice product conventions developing and changing. For example, there was a time when hamburger menu was not an acceptable interface element and there were rabid debates on both sides of the argument.
3. Real-world product logic
This is sometimes called ‘product thinking’. This is about the real world consequences of your design work. Are you trying to help people select the perfect restaurant for a date? Or are you helping them sign up for an event? Perhaps you are trying to help people in remote locations do an effective video call.
Does the series of screens you present to your user help them achieve that?
Real-world product logic is zooming way out and knowing that the controls, the copy and the screen you have designed are ultimately meant to help a user achieve something (or the business achieve something).
One of the projects that Pranu, another one of my teammates undertook at Zomato was designing an app for restaurant staff to accept online orders . As he shares in his design story here, he had to give up on the conventions of material design, (a.k.a. lower-level product logic). He was designing for cheap smartphones with shitty screen contrast to be used be people who could be bombarded by order queries. He had to understand the context of use, as he expertly shows in the sketch below to understand the “real world” product logic:
This is where tools like user journey maps can be super helpful. This is why you need empathy. And in today’s world you need more than just empathy. For example, are you thinking about the second or third order consequences of your product? Consider the tools Tristan Harris and team is creating to help users spend their time well or Alan Cooper’s Ancestry Thinking. Perhaps you want to learn about why we behave the way we do and read both Daniel Kahneman’s as well as Gerd Gigerenzer. You should learn more about behavior design through the work of BJ Fogg.
4. Approach and tactics
This is where things like design process and tools come in. For example, let’s consider the notion of “Diverging and Converging” in your design work:
A single screen can some times take quite a bit of divergent exploration before you converge on an answer. For example, look below at Juhi’s divergent exploration of a screen:
One thing that me and Arpit noticed in his approach was that he was trying to get the screen right on a single artboard itself. That is understandable. A developer won’t write 30 parallel functions to achieve the same result. If anything, he’d start with a function that gets the job done and then modify the function to reduce unnecessary variables or improve speed. Whereas, a designer needs to generate these choices, compare and then converge. It’s a different approach.
Over time, you will collect a bevy of tools in your design toolkit. They might be learning software tools React, Figma, or Principle. Or it might be research tools like journey maps or card sorting. It might be qualitative research tools like extreme user interviews, or it might be quantitative tools like understanding DAUs, MAUs and cohorts. Over time you might even turn that into a “process”.
But you’ve got to learn to be nimble with your tools. Beyond just knowing how to use a tool, you need to get better at knowing when and if you need to use something given your problem constraints. This is why I call this “approach and tactics” instead of process.
For one great approach, take the lovely Skillshare classes by Kara Hodecker.
5. Inter-personal and organizational skills
You are excited. You’ve nailed it. You’ve found the right user problem to solve, and made a killer prototype. All you need is the go ahead from your key stakeholders to ship off the Zeplin screens to the developers. You shoot off an email with a .zip attachment to the stakeholders and CC your team. Then you go party. Except you don’t hear back. When you run into your product manager, you find out that the email just got buried.
Here’s my question: Was email the right channel for this sign-off? Perhaps you needed a 15 minute in-person meeting.
Or if a email was indeed the channel, do you really expect people to download the .zip file and then go through it? Can the subject line be better? What is this the “Final prototype” of? Can you say more in the email body about the kind of feedback you want?
This is what I call “Email UX”. Similarly, there is “Meeting UX” and “Presentation UX”. Yes, you are have done the design work, but you have to be equally thoughtful about how you share and present it.
Or if you are in a team, as you must be, how do you collaborate? How do you do crit sessions? How do you take harsh feedback? All of these are key skills that a designer needs to master if they have to thrive in a work environment.
Your communication skills, your ability to facilitate meetings and conversations, building connections and gaining influence, collaboration skills, ability to take feedback, speaking up, all of these comes under “Interpersonal and organizational skills”.
Recommended reads are books like Articulating Design Decisions and Thanks for the feedback.
What do you folks think? Would love to hear feedback or comments.
Sidenotes
“Show me, Move me, Motivate me” from d.media — designing media that matters
A class that I took in 2012 and then got a chance to co-teach later is the class d.media at the Stanford d.school. The original curriculum is designed by Scott Doorley, Dave Baggeroer and Enrique Allen.
Right after I wrote down my “component skills” I face-palmed because it seemed like I had re-stated the guiding framework they crafted for the class, which was Visual Design, Interaction Design and Behavior Design.
Drawing on the right side of the brain
One of my favorite books is Betty Edwards’ Drawing on the Right Side of the Brain. Betty breaks down the magical skill of drawing into something anyone can learn. She does that with a) belief that it is possible b) a series of non-traditional exercises to ‘hack’ the non-drawer’s brain and c) by deconstructing what the sub-skills of ‘Drawing’ are. This for example is her framework for learning drawing:
I think design is very learnable, if only you can do the same.
DiSSS
Another framework I like is Tim Ferriss’ DiSSS framework, which also takes a skill and breaks it into sub-skills or components. Tim’s used it on everything from learning languages to learning how to cook.
Execution, product thinking, influence
Julie Zhou’s recommendation for beginners is to work on your craft and execution skills, followed by product thinking and then your influencing skills.
Liked this essay? Follow Ashish on Twitter
