DEV Community

Cover image for Frontend Touch User Experience UX - Weekend - 1
Mohamed Khaled Yousef
Mohamed Khaled Yousef

Posted on

Frontend Touch User Experience UX - Weekend - 1

Last 8 months, I worked as frontend and UX in the same time. I didn't know a lot about UX but it was mandatory to search and learn more about it to engage and help the team. It was a great journey and here's I share what I learned.


  1. What is User Experience and why learn it?
  2. The foundations of User Experience design
    1. The user-centered mindset
    2. The key stages of the UX process
    3. Iteration in design

1. What is User Experience and why learn it?

This UX image from Webdesignerdepot

User Experience is a description for all the interactions between a customer and your business, online and offline, at any time.
User Experience it's called UX for short, but it's often also referred to as UCD, which is User Centered Design.
UX is a super dynamic field with ever-evolving tools and trends. UX is a simple bit of technology can make a huge impact to a business. UX used to build a beautiful and friendly product to our users.

UX designers are responsible for designing an app or a system
with the users in mind. The goal is to design a solution that is
easy to use, efficient and attractive. So UXer is someone who solve user problems or user needs and provide good user experiences

And what it's really at the heart of it is that you're keeping your user at the heart of everything that you're designing. So in order to be able to do this, you need to have a really good understanding of who they are and what they need.
And it's often confused with UI, but this is User Interface, and this is literally just how your user interacts with you on a screen. Whereas you UX actually covers a lot more than that. It's every interaction that your customer would have with your business online and offline.

We're just going be focusing on UX designing websites.

Important personal design philosophy by Richard Wilshire said "Making the complex appear simple and the intimidating seem easy".

But it is really important to keep in mind that

  • Your user experience actually covers everything and every interaction that your customer will have with your business.
  • So user experience design is something that begins at the very start of an idea and it goes all the way through the lifetime of your product or your site.
    1. It's starts with very high level concepts and understanding the problems and the opportunities that you've identified.
    2. It then goes on to researching your users, finding out who they are, what their needs are, what they like and don't like, and how they interact with your business.
    3. The next key part is getting feedback from your users to constantly improve your design. And this is called "iterating". And what it literally means is to go around and find improvements and improve on them.

Why is UX design so important?

Well, there's a lot of research out there which shows how important it is to design with your users at the center.
The increase that you can get in terms of profits and in terms of engagement can be absolutely huge. A lot of companies are just starting to realize this, and they're investing a lot more into their UX design, because they realize the amount of cost they can save for later down the line in being able - in having to redesign and redevelop all these sites and services. If they just focused on UX design to begin with.
A lot of this has to do with how customers' expectations have changed over time.
So say 10 years ago, it was quite normal for a customer to log onto a website or a system and find a very slow and clunky experience. And there was only a few companies, a few high end companies those days, that did delightful and neat design.

But nowadays, this is the norm or the base. Customers expect to log onto a website and find an experience which is very efficient, very pleasing/satisfied, and quite intuitive. And if they don't get that, it's incredibly frustrating. And what we can actually do is we can measure the drop off rates. And these are the rates at which customers drop off from or abandon or left a website or an app at different stages of the journey due to poor performance.

And UX is all about minimizing those pain points in the journey to ensure that your website has the most successful design possible.

So here are some surprising statistics about UX design.

  1. First of all, 79% of people, if they don't like what they find on a site, will go back and search for another site.
  2. 90% of users have stopped using an app due to poor performance.
  3. 86% of people have uninstalled or deleted an app because of problems with its performance.
  4. And what's more, if a company can improve its customer experience score by 10%, and this is a score that a company gets based on various things, including how easy their service is to understand. Now, if they can improve the score by 10%, it can translate into over $1 billion worth of revenue, which is a staggering amount.

Let's ask you a question, What's your favorite websites or apps? And why?

For me, Apps I prefer and like to use: Facebook, Amazon, Quora, Careem and Behance. Why? Because they are beautiful and friendly websites ( Good usability )
My favorite is amazon. It is simply easy to navigate products, purchase, compare and see in real time where the product is.
Oh, Sure I can't ignore DEV where I meet and learn from this great community. Really DEV has a great value for me and I like what @Ben Halpern do with his team to make us always connected in this great platform and how easy use DEV.


2. The foundations of User Experience design.

We're going to look at the key approach, the attitude, the process elements which are necessary for UX design and the impact it can have on your business.
And the three things that we're going to look at is

  1. The user-centered mindset.
  2. The key stages of the UX process
  3. Iteration in design.

1. the user-centered mindset"

This user-centered mindset image from Inclusive Microsoft Design book
What's really important here is to keep your user at the center of your design at all times. So consider how your product would impact them.
Now remember you're as UXer is not the user. So just because it works for you, it might not necessarily work for them.
It is crucial to adopt a user-centered mind-set during the design process.
User centered Design is an iterative design process where we involve users and their needs within each phase of the design process to create usable and accessible products and services.
We involve users by conducting user research (surveys, interviews, focus groups or workshops) to develop an understanding of their needs and specify user requirements.

A key part of this is trying to understand your user.
Now one way to do this is to approach it with a bit of curiosity. So UX has to be a curious person. So ask questions like :

  • Why and what if. Try and approach it with empathy (Knowing the other/User) and put yourselves in their shoes.
  • And try and go in with an open mind. Try and get rid of any sort of preconceptions/preconceived ideas that you might go in with initially.

Now remember to consider all parts of the user experience. So it's not just the UI or the screen that the customer would interact with, but it's every single interaction that they would have with your business:

  • So are they going into a physical store?
  • Are they going to be receiving a delivery?
  • Are they going to be calling up?
  • And think about what they expect from each of these interactions and think about how they would react to it.

So now we found out about how important it is to keep the user at the center of your design.

2. let's move on to the key stages/steps in the UX process.

This ux-process image from Webstarsltd

Now exactly how you design will depend a lot on what you're trying to create.
So whether it's an app, or a website, or a product, or a service, but most of them will have the following five stages in common.

  1. Discover/Search: First of all, you want to discover more about your users and other relevant products.
  2. Define/Describe: Second, you want to define and describe your concept. So what are you really trying to create?
  3. Design: Third, you want to design the behavior. So we'll talk more about prototypes and principles for doing so later.
  4. Develop: Fourth, you want to develop your design. So this is where you add the details, the visual branding, and you test it on your users.
  5. Deliver/Release: And fifth, you release your product or your site. But it doesn't finish there, because continually improving your design is a key part of the whole process.

3. Iteration in design.

This iteration in design image from justinmind

We said before, continually improving your design is a key part of the whole process. So now we're going to look at iteration in design in a bit more depth.
Now design is not a one-off activity, and these steps don't always come one after the other. Sometimes you have to loop around and revisit it in a more fluid way.
But the really important thing to keep in mind is that continually improving your product is a normal and effective part of the process. And we're going to look at prototyping and user testing a bit later on.

Now it's easy to get attached to the first idea of a design that you might have, but it's really important to keep in mind that the best way to ensure success is to base your decisions around real data from real users. This is the best indicator that you can get to see how your product or your site will be received by a wider group. And it doesn't finish there. Improving and iterating your product or your site is something that will continue throughout the lifetime of your site.

An example in real life about Iteration in design:

I have noticed is that for example YouTube has changed a lot since its release in 2005. The YouTube Team has also tried new functions over the years, but reversed them if they get too much negative feedback on those functions. I remember they moved the comment section to the top of the video recommendations as opposed to after them like we have it today (in the mobile app.) It makes sense, but the users didn't like a sudden change like that so I assume they reverted the changes based on that.

Resource: the fundamental process for effective UX design

Top comments (0)