8 steps to help you become
a better UX and UI designer

Improving in UX and UI is a step-by-step process and in this article, we have 8 actionable steps to raise your game.

8 steps to help you become a better UX and UI designer are:

1. Start by getting to know the Five Stages of Design Thinking:
2. Research and implement design psychology
3. Stay up to date with the current design trends
4. Practice UX and UI design for websites that copy popular ones
5. Test your ideas
6. Take breaks
7. Practice as much as possible!
8. Take UX and UI courses

So let’s dig deeper.

We can boil “how to become a better UX and UI designer” down into one word: Practice! All the time. Whenever you can. Practice rebuilding existing sites.
I suggest searching for top-rated sites on Producthunt and recreating those. While you do this, ask yourself why the original designer made the UX and UI decisions that he did.
Why do they work and what type of journey is the user being guided through that makes this website so effective?

Before you even begin, take a look at our article on How to become a freelance web designer to ensure that you have all the basics covered.

To help you go from a UX designer to a UX expert extraordinaire, we have created a neat and actionable step by step guide that you can implement with ease!

Step 1: Implement design thinking into your processes

Design thinking, like UX and UI design, is based deeply on the psychology of your users.
We use design thinking to understand and study users so that we can create a process that offers useful solutions to defined problems.
Design thinking is about challenging our assumptions on how users think, followed by building and testing solutions tailored to your specific niche. (Read our article on How to find your niche)

Design thinking is more of a non-linear, iterative process that teams use to understand users, challenge assumptions, redefine problems and create innovative solutions to prototype and test. Involving five phases—Empathize, Define, Ideate, Prototype, and Test—it is most useful to tackle problems that are ill-defined or unknown.

When you are creating your site, from the very beginning you need to have a clear path as to how the end-user will engage with it and ultimately gain satisfaction from simply using the site. After all, that’s what websites are all about – User satisfaction.

Start by getting to know the Five Stages of Design Thinking:

• Stage 1: Empathize—Research Your Users’ Needs.
• Stage 2: Define—State Your Users’ Needs and Problems.
• Stage 3: Ideate—Challenge Assumptions and Create Ideas.
• Stage 4: Prototype—Start to Create Solutions.
• Stage 5: Test—Try Your Solutions Out.

Once you can repeat these in your sleep, follow these actionable steps to implement design thinking in everything you do:

1. Focus on the issue
   Before you even start designing, take the time to listen to your client. Ask the right questions to help them work towards what they want. For example, if you are designing a site for a person who has a cleaning company, ask them what they want their site to achieve. Is it to drive bookings? Is it to create awareness?
2. State your client’s needs
   Write down precisely what they need, and what they wish to achieve from their website. Flowmapp does a great job at offering a free service for you to map out your sitemap, user flows, personas, and customer journey map.

   

3. Practice your thinking
   For example, create an online survey for people in your area. Find out what they need in terms of websites or even other services. What is missing that could create a much-needed niche? Brainstorm ideas that could help to fulfill the needs of potential and existing clients.
   If you have not heard of the Crazy 8’s design ideas creation exercise, here is a great link to get you started. How Might We is another tool taken directly from the design sprint framework. This activity is simple, fun, and designed to help you turn problems into opportunities. It may even work in your everyday life as well!
4. Begin to create your site – being sure to collect feedback at every step
   This is a great way to get feedback and avoid pitfalls, ultimately making you a better UX designer.
   For example, before you look at wireframing, make sure that you think hard about your flow. Map out your screens and screen elements on a piece of paper with a pencil. You will be surprised at how old-school sketching helps you to get to where you want to be.
5. Try out different solutions at this stage in your site
   Ask your targeted audience which ones they prefer.

Remember: Moving a button into your audience’s line of sight doesn’t drive sales – user experience does!

Good UX and UI promote conversions through visual and written communication that connects with your audience.

Step 2: Research and implement design psychology

How people perceive, interpret, and act upon your design is all based on psychology and an exciting area to dive into to improve your UX skills.

Take the time to research design psychology.
Ask the users themselves what they are looking for, what their pain points are, and develop a design encompassing the path of least resistance.
If your users are forced to take in too much information or complex navigation, this will slow down their thinking and result in a lower conversion rate.
Rather, promote positive emotions through your copy and keep your navigation simple and to-the-point.

There are a few main principles that need to be applied to every design:

• Learn how to leverage emotions with UX
  The emotive design will attract more users and ultimately result in more conversions than a bland design that has no feeling.
  Designial covers this in detail in How to use emotional design to win clients.
• Empathy is the first step to solving any problem
  When you take empathy and apply it to products, it will have a huge impact on your users. In a good way. People want to feel heard. When your designs are empathetic and solve a problem that a user has, they feel like they are being listened to. To go more in-depth, have a look at this article here, which explains how empathy affects design thinking.
  Let’s say someone is thinking to start a new career in Tech – They have been raising their kids for the past, say, 10 years, and are now ready to step back into finding a career. They may feel that they are out of touch and can’t do this. To reach this audience, we must first connect with them by highlighting the fact that starting a new career is scary and give some tools to help them see just how much potential they have.
  Now that’s empathy in practice!
• Use your user research data
  Implement what you have learned from your users in your initial design. Be sure that your designs are clear, simple, and answer the exact question that your users need to be answered. Connect data points to translate your data into actionable bullet points. This will help you provide the perfect answer to your user’s needs.
  Here is a great article all about design research, and what to do with it.

How to do this:

1. Remember that too many choices overload the cognitive load, and result in loss of conversion. Keep your websites simple, and guide the users to each next, logical choice. For example, the new Slack interface is a great example of streamlined and paired down UX. Find it at www.slack.com.
   
   Some of the best advice I have ever received is, “pretend that you are designing for a 5th grader”. If it’s too complicated for a child to use, it’s not going to work.
2. Break things up into easily digestible bits of information. Avoid large text blocks, and make use of headlines and subheads.
3. Create user modules that are familiar to end-users. People don’t want to have to learn a whole new layout and how to do something. Take inspiration from what works, and go from there.
   For example, if you are including an About page, call the page “About”. Using a title such as “The magic behind us” will only create confusion, even if you do think it sounds more creative.
4. Leverage emotional triggers, whether natural or not. Use these to guide the users toward the correct decision. For example, clicking on that “learn more” or “order now” button.
5. Intent-based design i.e your design needs to have an end goal in mind for the user to head towards.
   That goal is something you discovered in the empathy mapping stage and a goal each design decision needs to work towards
   For example, if a user is looking to book a hotel and you know they have a disability, then make it clear on your design what accessibility options the hotel has. By doing this, you help them “find a hotel with accessibility for wheelchairs”.
   Boom! Intent-based design.

Step 3: Stay up to date with the current design trends

UX design is ever-expanding. As technology advances, or people’s tastes change, so must design trends.

Many exciting topics are being batted around, such as UX writing, the psychology of design, and loads more. Have a look at UX Planet for some super reading material.

With regards to top trends for the upcoming year, many of them will be around paired down and simplified websites, context with regards to content, collaborative design and new design systems. We need to change the way we do things, and our design ecosystems will begin to reflect this.

• Minimalistic design with a focus on information
  Dropbox is a great example of this. There are no distracting graphics, just a clean page where users can find exactly what they want, quickly and without fuss.
• Collaborative Design
  Previously, the design was mostly in-house. You would have a team of designers, all sitting in cubicles with computers. This is a static and unchanging way of doing things. Then came the concepts of agility and flow. From there, our needs became wider. People all over the world began to work together using clouds, and apps such as Slack, Trello, and Figma. This year, especially as old-school in-house agency teams are being phased out more and more, we will begin to see teams working together from anywhere in the world taking precedence.
• Designs Systems
  Leading on from collaborative designs will be new and more exciting design systems. We all remember Sketch right? Oh how far we have come from there! New design systems give you access to all sorts of goodies such as elements, templates, effects, and typography. They also take some of the strain off designing a thing all on your own, as you can not only be collaborative but also grant you access to ready-for-use solutions.
• Context
  Everything these days is about context. Websites will be designed with their content’s context in mind. For example, if you have a serious topic, such as an actionable charity, you won’t add upbeat, or pretty much any, animations to it. Every piece of information that we, or our users, ingest must be within context.
• Typography and animation
  Focus on fonts, font size, and interesting ways of writing things will take precedence over image-heavy web pages. The New Yorker does this very well. Animation of fonts is also becoming a very big thing. Funky, eye-catching, and fun these little nuggets will keep people’s attention, and drive them towards your site’s CTA.
  

How to do this:

1. Be sure to read up on trends articles whenever possible.
2. Practice building top websites.
3. Implement these trends into your existing work.

Step 4: Practice UX and UI design for websites that copy popular ones

Take the time to practice building existing sites.

Start by copying easy ones, then slightly more challenging, and so on. It’s like learning to cook. Destruct a recipe, (like in Master Chef) and learn the nuts and bolts of how it works. Build it up from there, and learn how to do all the tricks and intricacies.

How to do this:

1. Go to sites like Dribbble, Behance, or Product Hunt (this is our favorite) and find a project that is just above your current level.
   
2. Go through the site and start to think about all their design decisions.
3. Using what you have learned above note down what you would change
4. Then hit Figma.
5. Take a screenshot of the main page and save it as a PNG (easy with nimbus for chrome)
6. Place it on a fresh frame that is 1440 width
7. Grab the color scheme from (chrome extension)
8. Then use font Ninja to get the fonts and download them legally!
   
9. Add a grid and align it with the design of the screenshot
10. Start designing ON TOP of the screenshot and don’t cut corners; be pixel perfect

Step 5: Test your ideas

Testing is a vital step in improving your UX designing skills.

Don’t stick to one idea, do a number of them for each project. Pitch each one to a targeted audience and let them choose which they prefer best. Once you have done that, perfect your chosen idea.

Keep your other tests, however, you never know when another chance will come along to make use of them.

How to do this

1. Do more than one design for each project.
2. Ask your audience on social platforms for feedback. Create a poll on Facebook, or offer a reward on Insta for leaving a comment.
3. Join Facebook groups where you can share your designs for feedback from other professionals and contribute your feedback to others – this is going to help you ask yourself good questions too. Such as: Is this the right design to answer the question the client has? Can I pair this down to make it simpler? Does this design have enough funnel functionality?
4. Plenty more here: https://www.justinmind.com/blog/usability-testing-tools/

Step 6: Take breaks

Deadlines are a thing, sure, but making sure that you take breaks is just as important. Coming back to your design with fresh eyes could be the difference between a bad one and a great piece of work.

We are all our own worst critics. When you have been sitting at a screen for hours, you’re bound to get sick of looking at the same design for hours on end.

Go away and come back to look at it with fresh eyes.

For example, you could be designing for a customer and getting frustrated. You send off the design purely out of exhaustion. The client takes a week to send feedback. There are two ways this could end:

1. When I opened it again I thought “Ooh! That’s a hot design! Did I do that?”
2. When I opened it again, I noticed a multitude of errors that the client has picked up and now has lost faith in my work.

Don’t be that guy. Take the time to rest, then come back to your work. I promise that it will reveal all sorts of things you may not have noticed before.

Step 7: Practice as much as possible!

Building sites is how you are going to get better at UX and UI. I covered the practising on existing sites part of this, but there is another way to practice becoming the best UX designer.

Practice by offering a discount to your immediate network. That’s not to say you should work for free, but the more projects you have under your belt, the more experienced you are going to be.

How to do this:

1. Offer your services to your network at a discount to get started.
2. Make up a brand and add the design to your portfolio (click here for a complete guide on how to create a portfolio)
3. Take a good look at the websites that you use every day. Do you see any problems with them? How would you go about creating solutions for these problems? Practice by designing a solution and implementing it in a practice design. These don’t have to be big sites, little local ones will work just fine.
4. Take the time to read up on sites like Quora about questions that you may have come across in your design experience.

Step 8: Take UX and UI courses

Learning is a never-ending thing. I know many “students” who are in their 40’s and even 50’s who simply never stop taking courses. And they are the guys who produced the best work.

UX design courses will keep you up to date on trends, new tech, and all sorts of things that you may miss if you live in your own bubble.

Web Courses Bangkok have several great UX and UI courses that you can take from anywhere in the world. Believe me, it is most definitely worth your time.

Conclusion

Ultimately, web design is all about how the user perceives the site. You could create the prettiest site in the world, with amazing animations and graphics, but if it does not connect with the end-user, then it is worthless.

A great UX designer can offer so much more than a basic WordPress site.
By breaking your process up into UX, UI, and Development, you show critical thinking and offer your client more value for money. This also means that you can charge 3 x more and still be affordable. It will also put you leaps and bounds ahead of your competition who only offers the basics.

So, to sum up exactly how to become a better UX and UI designer:

1. Implement design thinking into your processes
   • Focus on the issue.
   • State your client’s needs.
   • Practice your thinking.
   • Begin to create your site being sure to keep your client in the loop at every step.
   • Try out different solutions at this stage in your site. Ask your client which ones they prefer.
2. Research and implement design psychology
   • Remember that too many choices overload the cognitive load, keep it simple.
   • Break things up into easily digestible bits of information.
   • Create user modules that are familiar to end-users.
   • Leverage emotional triggers, whether natural or not.
3. Stay up to date with the current design trends.
   • Be sure to read up on trends article whenever possible.
   • Practice building top websites.
   • Implement these trends into your existing work.
4. Practice UX and UI design for websites that copy popular ones
   • Screenshot a website and copy the design, pixel for pixel.
   • Copy sites that you love.
   • Pick an easy site, then progressively harder and harder.
   • Stick to shades of grey initially until you have all the working of the site down. Color isn’t as important as functionality and layout.
5. Test your ideas
   • Do more than one design for each project.
   • Ask your audience on social platforms for feedback.
   • Join Facebook groups where you can share your designs for feedback from other professionals.
6. Take breaks
7. Practice as much as possible!
   • Offer your services to your network at a discount to get started.
   • Make up a brand and add the design to your portfolio.
8. Take UX and UI courses.

UX and UI design are integral in becoming the best freelance web designer that you can be. Follow the steps above to create sites that catch attention, create emotions, and ultimately result in conversions. After all, that’s kind of the whole point, isn’t it?