What I’ve learned from Product Design
A few lessons learned from different projects I’ve worked on over the last couple of months.
Working in the sport industry, I like to think about product design as quite similar to surfing.
Surfing, just like product design, is about:
- Doing your research: understanding the context and constraints (tide, swell, current, wind, …)
- Looking into multiple solutions: paddling around (a lot) trying to find the right one
- Taking the right decisions: picking the right wave, having a clear idea of where you want to get to, making the right turns and riding it all the way through
- Coordination and balance: coordinating different moving elements (your body, the wave, your board) and finding the right balance
- Constant iteration: falling, getting back up and starting all over again
What I really like about product design (and surfing too) is that it’s so much more than just pixel-pushing: it’s the never-ending search for a simple, intuitive/elegant and meaningful solution to a problem.
The search
I’m a big advocate of research. Why? Because research is all about adopting a beginner’s mindset, getting out there, outside of your comfort zone, and challenging your assumptions.
It’s about asking the right questions to understand better who your users are: their behaviours, needs and motivations. Instead of coming up with a ready-made solution to a problem that doesn’t even exist.
During The Design Crew course I followed, we were challenged to think about how we could simplify Airbnb’s check-in experience.
Instead of just relying on our gut instinct, speaking to different Airbnb users allowed us to better understand what are some of the pain points they can face when checking in.
If we hadn’t done this research phase and talked to real users, we wouldn’t have discovered that:
- Time: time is the currency, people don’t want to waste time checking into (or out of) a flat, they want to be able to do it on their terms
- People: different actors are involved in the check-in experience (guest, host, cleaning, …), and they each have their own schedule
- Flexibility: some guests book their accommodation before their travel, others book it the other way around
These insights really helped us reframe the problem we were trying to solve into providing flexibility around check-in.
From ideas to prototypes
This is probably my favorite part of any project I work on. Why? Because it’s when you explore plenty of different ideas.
The key is not getting hung up on one specific one. It’s accepting that many of these ideas will most probably never see the daylight, and that’s ok.
The more ideas you have, the more complicated it can also be for you to choose which one(s) to focus on.
I’ve found that a great tool to help in that decision-making process is design principles (Airbnb’s design principles). These guiding principles can be really useful when you need to decide what to keep and what to throw away.
Ideation is concrete and real. It’s where you start prototyping tangible solutions, whether that’s a low-fi sketch with pen and paper or a more high-fidelity mockup in a design tool.
It’s easy to get caught in the trap of going straight for a nicely polished high-fidelity mockups. Truth is, that tends to be more time-consuming.
One way I’ve learned to avoid that is by rating your idea based on different criteria on a scale from 1 to 5:
- Size of your audience
- Impact on your core features
- Impact on your business model
- Scope/level of effort required
The lower your result, the lower the fidelity of your prototype can be.
Speed & consistency
I’ve only started to learn how to use design tools recently, so I’m definitely not the fastest when it comes to designing complex flows with plenty of high fidelity mockups.
One thing I’ve found to be super handy in speeding up your design of a solution is design systems.
A design system is made up of all the reusable elements (colours, fonts, icons, cards, …) for you to use to build your experience in a consistent way. It’s got all the ingredients for you to choose from to cook up a great recipe.
Just like any good recipe, design systems are really fun to put together and adjust over time.
As we started building our Airbnb prototype, I decided to start recreating part of Airbnb’s own design system, so that we would be able to create a realistic prototype. One that would be as close as possible to what Airbnb’s app looks and feels like today.
Here are 3 parts of the design system which I found really fun working on: colours, icons and text.
Five(ty) shades of grey
Colours play a key role in your design. Each colour has a different meaning, conveys different emotions and can nudge you towards taking different actions (e.g. where to press to close that annoying pop-up).
Choosing the right colours for your design can be really tough especially when you don’t know where to start from.
A simple way to get started is to start with a greyscale. Picking a primary colour and from that colour creating different tones and shades.
These different shades can then be used to convey hierarchy throughout many elements of your design: copy (headings, body copy, ..), borders, lines, …
Nature is also a great source of inspiration to create your own colour palette.
One key notion I learned about when starting to use colours is accessibility.
Having a good enough contrast between your background and text colour is key so that people with different abilities can easily understand and navigate your experience. When displaying key information, leveraging other elements such as icons is another great way to make your design even more accessible.
Playing Playstation
Creating icons is more simple than it looks. It’s like playing with a Playstation controller. You get to play around different shapes: triangle, circle, square and cross to create icons.
These simple shapes can be combined in an infinite number of ways (united, subtracted, intersected, excluded) to create beautiful icons.
Don’t Lorem Ipsum
Design isn’t just fancy colours and shapes: it’s also text. If you look at your phone right now, what percentage of your screen is actually text?
The language and tone of voice you use are key in the interpretation/perception users will make of your product and how they will navigate through it.
As we were building out our Airbnb prototype, we realized that our language was inconsistent: we were using different words to convey the same message. As you can see in the first example below, we also weren’t using text in the right way to provide timely reassurance and information to our users.
So please don’t use Lorem Ipsum.
Test & learn
As I said before I’m a huge advocate of research. And testing is research.
Testing is taking your idea or prototype and asking real people to give it try. I love it because that’s when you get to see IRL how users are actually using your product.
If we go back to our Airbnb example, 2 of our key assumptions (which guided most of our design) were:
- People would want to modify their check-in time directly on their booking confirmation page
- People would want an automated service to make it faster to modify their check-in time
User testing made us realise that we were actually quite wrong:
- Most people wanted to chat directly with the host to change their check-in time
- They didn’t necessarily trust an automated service, and wanted a more human interaction to be sure the host got their request to change the check-in time
Getting this kind of live feedback is really crucial: it saves a lot of time, energy and money. I can only recommend testing a concept or idea early enough and regularly.
Sharing the results of a user research phase you’ve conducted isn’t the easiest task. You’ll tend to put so much energy into planning and conducting the testing that when it’s time to synthesise the learnings you got out of it there isn’t much energy left.
The analysis you make of any user research is crucial, even more so if you won’t be the one implementing the changes.
Here’s a framework I’ve learned to rapidly gather and share learnings:
- Observation: what happened? how many users did this?
- Hypothesis: why did they do this?
- Suggested solution(s): what change could be implemented to fix this?
- Verbatim and/or raw footage: which quote and/or video clip illustrates that observation? That way you leave no place for second-guessing or interpretation
What’s your story?
Last but not least: storytelling. Remember when you were 10 years old and your teacher asked you to stand in front of your entire class for Show and Tell. Well this is pretty much the same, except over the years you’ve grown much better at it.
I love animation movies. Animation movies are just amazing at creating that emotional connection and capturing your attention.
When presenting an idea or design, I like to think of it like an animation movie.
You start by setting the scene (the context), the actors that are in it (who your users are).
You go into the problem they face (the problem you’ve identified). You go through all the steps it took to solve that problem (your process & how you got to this solution).
And you end up happily showcasing the amazing solution you came up with.
That’s all folks! 👋
If you’ve read until here then I hope you enjoyed this article. Feel free to share it around & give any feedback 🙌
📚 If you’re interested in reading more about some of the topics above, here a few inspiring articles: