5 Steps To Start Learning UX Design On Your Own
A year and a half ago, I started self-teaching myself User Experience (UX) design. I originally have a product management background but I’ve always been attracted to UX design. In my last job, there was only one designer. He couldn’t cope with all the requests from 3 products managers. As a result I had to get my hands dirtier than usual, producing mockups on Sketch or prototyping tools like Moqups. I was quickly hooked.
But I knew I lacked several fundamentals of the discipline: design principles, resources, tools and constant empathy. Although I can’t say I’m a crack yet, I have spent a good deal of time looking for tips & resources online. I have learnt a lot from blogs, free online resources, communities, e-books, etc. To all those who want to start learning UX design on their own, here’s my contribution to your first steps in this exciting discipline.
(1) Start with the principles
Building your UX culture is like building a house: If you don’t design the foundations right, the whole building will collapse at some point. The very foundations of UX are design principles. You need to incorporate them in your thought process in order to build robust flows and interface. If you type “UX design principles” on Google you’ll find tons of resources. But I advise you to visit Laws of UX, a collection of the “maxims and principles that designers can consider when building user interfaces”. One of their most famous laws is “Jakob’s Law”:
This design principle encourages UX designers to re-use existing patterns as much as they can. When you design a feature, there are high chances a similar mechanism already exists in an other app. Instead of trying to reinvent the wheel, benchmark other apps that have already nailed the problems you’re facing. You’ll do a favor to yourself and your users at the same time. To yourself, because you’ll waste less energy solving problems already solved in the tech industry. Your users, because they will feel more familiar with your app than if you’d tried to implement quirky, unexpected patterns.
Another interesting law on Laws of UX is the “Aesthetic Usability Effect”:
This principle stipulates that the more your product is aesthetically pleasing, the more your users are more likely to miss usability shortcomings in your app. Actionable conclusion: When you plan to run usability tests, try as much as possible to design a “low-fidelity” prototype (only shades of grey and very limited design choices: same font everywhere, square angles rather than radius on buttons, etc). The more your prototype evacuates the branding/UI of your app, the deeper insights you’re likely to get.
For each of the 19 principles listed on Laws of UX, try to find a few examples of that principle applied in a real app or website. Or better, try to find examples of the principle being NOT applied and how you would change the app to make sure it’s applied. This will help you better integrate all those principles.
Of course, I don’t consider Laws of UX to be the one and only source of design principles. There are very interesting reads on Medium as well, like on the very good publication UX Collective. Try to build your own culture on those topics!
(2) Build your own product culture
4 years ago, I was interviewed at BlaBlaCar for my first Product Manager position. The hiring manager asked me to list 3 apps I particularly enjoyed and why. Among those I listed, I remember speaking about TransferWise. “Why?”, my future boss would ask. I said that I thought the people building the TransferWise product were geniuses because they had managed to make their users forget they were doing something boring: making a money transfer. Instead, the experience almost looked like a regular transaction on an e-commerce website. This is an experience that’s usually viewed as exciting and easy by most consumers. Getting inspiration from e-commerce smooth checkout flows has widely contributed to TransferWise’s world-class UX.
When you start caring about UX, you need to build such a product culture. It’s important to start building your personal directory of the best products: what makes them unique, and are the main references in the for various patterns you can think of. For instance, if you want to ask a large, complex set of information in a simple way, Airbnb and N26 are world-class products to benchmark. How do they smoothen this experience? Thanks to progress bars, recap screens, one screen/one action experience, etc.
At Mozza, the UX crew I belong to, we’re constantly dissecting new apps. What makes them unique? What product methods can we extract out of them? This enable us to get inspiration for all our future clients. For instance, my friend Maxime Braud has uploaded on Slideshare great insights about why Zenly is such a good app:
In every app you’re using, try to make your own “UX audit”: what’s good, what’s less good? Here are some questions you can ask yourself:
- Do you understand what’s expected from you?
- Is the information you’re looking for accessible?
- Is it easily readable / ordered in a consistent way?
- Aren’t there too many choices available at the same time?
- Is the feature you’re using simplifying your life or do you feel you’re wasting time?
- Do you feel motivated / engaged with the content you see?
- Don’t you feel overwhelmed / oppressed with the choices you’re asked to make?
- etc…
If you don’t know where to start, take a few world-class apps (e.g. Uber, Spotify, Duolingo, Strava, Headspace, etc.) and look for some of their UX case studies on Google. Usability Geek and UX Planet are good blogs with hundreds of resources on this topic.
(3) Learn to use the right tools
When you start designing a new flow or interface, small details don’t matter. You’ll scrap your ideas several times. So don’t waste time building something good-looking. The more you’re likely to diverge, the more you shouldn’t open any design tool. Stick to pencil and paper! That’s the best way to explore many ideas and scrap them quickly. When I work on a product strategy, I come up with 2, 3 and more different ideas of UX my client could implement. In order not to spend hours prototyping screens that will be scrapped shortly after, I draw on paper.
You should then eliminate the least relevant ideas. By then, you should have max. 2 ideas left. This is the moment you can start designing actual mockups. At this stage, you’ll want to animate screens to see how they interact with each other. You still don’t want to bother with graphical choices (colors, size of the buttons, fonts, margins, etc). That’s why you should go for “low-fidelity” mockups. Choose arbitrary margins, buttons/headers/other components’ size and font. For colors, only use shades of grey (ideally max. 4). This will help you focus on the information hierarchy and the user flow.
Which tool to use during this step? Some UX designers already use digital design tools like Sketch or Figma. But it’s mostly a matter of personal preference and habit. If you’re not familiar with those tools, I’d recommend you use a wireframing tool (my personal preference is Moqups, but there are many alternatives like Balsamiq, Proto.io, etc). What’s the advantage with those tools? They offer a wide range of ready-to-use components (navbars, buttons, dropdowns, inputs, etc.), icons and images. They also enable you to easily create links between screens. That way, you’ll be able to show a real prototype to potential users. You’ll also spot some UX issues: misunderstandings, misclicks, etc. Working with a low-fidelity will enable you to correct those issues very quickly.
Once you’ve nailed the right UX, you will want to build a “high fidelity” prototype. That means figuring out all the graphic details: colors, fonts, margins and spacings, style of components (buttons, inputs, dropdowns, etc.).
I won’t go into details on this step as it’s almost another entire discipline of product design — UI design. However, if you want to do UI you must learn to use Sketch or Figma. Those tools will help you to craft very thorough interfaces. Sketch still has a larger community and more tutorial/resources available online. But Figma’s usage and community is picking up. More and more designers switch to Figma for its collaborative features and the fact that it also integrates prototyping. If you want to build prototypes on Sketch, you’ll have to add a plugin called Craft and upload your screens on InVision.
(4) Get inspiration thanks to online communities
Let’s say that you want to design a dashboard for a SaaS product or a search results page for a marketplace. But you have no idea where to start. Or you don’t know how to design the navigation menu. Thankfully, online design communities like Dribbble or Behance are huge. Just type “SaaS dashboard” or “search results” on Dribbble and you’ll find hundreds, if not thousands of inspirations. Designers sometimes even open source their work: they’ll attach the source (.sketch) files so you can reuse them.
In product design it’s important not to reinvent the wheel. You want to display a list of contacts? This is a pattern that already exists in many products. It’s probably not going to be the core feature of your product. Look for reusable elements on sites like Sketch App Sources, Sketch Repo and Uplabs. If you type “crm” on Uplabs, you’ll find dozens of free resources you can download. You’ll then be free to edit them with your own UI guidelines.
(5) Be empathic: Always test your screens
Once you have built your first “low fidelity” prototype, you will be very proud of you. But don’t build a too strong attachment to your work. If you show your screens to actual users, you’ll realize some parts of your prototype aren’t understood. It might be the content (wording, images, icons, etc.), the hierarchy of information, the flow (the order in which screens succeed one another) or the structure of the app altogether. Be prepared to iterate several times before nailing the right UX.
There are several ways you can test your screens:
- The easy way: with friends, family or colleagues. Let them use your prototype. Just give them some guidelines but don’t guide them too much. Ask them to describe what they see and what they understand from it. Caveat: Either they’ll want to please you so they won’t tell you the dirty truth about what’s wrong with your product, or they will already know your idea too well so you won’t get valuable feedback.
- The guerrilla way: Go find your potential users where they are. If it’s an app for waiters, go to restaurants. If it’s an app for teenagers, go look for them in front of the high school. Show them the prototype, explain them what it is about and ask them the same things as in the “easy way”. More tips about guerrilla testing in this article by Carolyn Chmielewski (former user researcher at BlaBlaCar).
- The quantitative way: If you want to validate that most users will understand your UX, it’s a good idea to test it quantitatively. This will answer the question: “What’s the % of users who found the button to activate feature X?”. The user testing platform Maze enables you to create missions your users will have to fulfill. It’s a great way to run tests asynchronously — your users will complete the Maze when they have free time, on their own. Caveat: You’ll get less insights about the understanding of your concept than when you’re talking directly with your users, face-to-face or over a call.
- The qualitative way: If you want to dive into deeper topics than the mere test of a prototype, this is the way to go. You’ll be able to put some insights into perspective and react on stuff users are Organize ˜45 minutes usability testing sessions. The structure I’d recommend is the following: introduction (5 mn), ask relevant context-setting questions to the user (5–10 mn), give context (3 mn), let them try the feature (25–30 mn), summary and questions (5 mn). It usually requires some logistics (recruiting users, booking a room, preparing an interview guide). If you have trouble meeting users physically, you can use the user research tool Lookback. If you want to learn more about how to run usability tests, read Don’t Make Me Think by Steve Krug and Sprint by Braden Kowitz.
I hope these advice will help you jump on the UX bandwagon! If you have any other advice on learning UX, feel free to react to this article in the comments section.
If you need help with UX design, you can hire experienced Product people of our crew. Contact us at hello@mozza.io and we’ll get back to you shortly!
Thank you for reading this article! Clap if it was useful to you so other people can see it too ❤️
Want to get more product tips? Sign up for my monthly newsletter to stay in touch! 👉 http://eepurl.com/gYTX2b
Thanks to Florent Liénard for the great tips.
