Hands-On UX Design for Developers

Chapter 1. What is UX?

Simply put, UX means User Experience. In this chapter, we'll explain how to choose the right approach for UX. Then we'll move on to what a UX designer is. We will cover the process of UX design, where we'll give you guidelines and tips on how to become a better UX designer. Finally, we will move on to the main topic of this book: full stack design. Also, we will discuss the processes and tools being used, and areas of design and development that are part of the full stack design process. Finally, we'll discuss how to become a full stack designer.

In this chapter, we will cover the following topics:

UX design and the difference between UI and UX
Who is a UX Designer?
UX designers, their role, and the processes they have to follow
Full stack design and the role of a full stack designer
Becoming a full stack designer

Why is UX so important?

UX can be in a wide range of features; even smaller parts of the application could prevent you from losing your audience. Let's say that two companies have a very similar product but one of the products offers a better UX, which means that this product will attract a greater number of users and will provide a better return-on-investment to the company. You can find this similarity in various products nowadays, such as web applications, video games, mobile apps, and, of course, even on physical products.

Specifically, the UX Professionals Association mentions the following six key benefits that business can derive from UX design:

It increases productivity
It increases sales and revenue
It reduces the cost of support and training
It reduces the cost of development and development time
It reduces the cost of maintenance
It increases customer satisfaction

UX design, as its name suggests, is about designing the ideal experience of using a service or product. As such, it can involve all types of products and services, for instance, about the design involved in a museum exhibition. However, mainly the term UX design is used in relation to websites, web applications, and other software applications.

Since late 2000, technologies have become increasingly complex, and the functionalities of applications and websites have become far broader and more intricate. Early websites were simple static pages that served information to feed curious searchers; however, a few decades later, websites became more interactive, offered a richer feel for the users globally, and more information as well. If we also count responsive websites, real-time applications, and mobile apps, we can see how easily users get the information that they need nowadays compared to earlier times.

But there is one interesting thing: if we boost UX and UI too fast, the users will not get used it, so everything should take place in a natural, discrete, ordered way.

As I mentioned earlier, the biggest mistake new start-ups or companies make is that they don't start their UX planning at the beginning of a project. Usually, you will hear comments such as, "We need to launch the product or services first, and we'll think about its look and feel later."

Well, I can say that this is totally insane.

It is like an architect saying,let's start the house, finish it, then later we'll think about its look; crazy, right?

Why? It sounds absurd for hundreds of reasons, as follows:

You will not know whether there is a need for your product or service in the first place
You will not have a single clue about whether you have done it right
It will cost you a lot of money
It will cost you time

That is why UX should be involved right from the beginning, that is, from the first phase of your product or service design, in order to avoid making these mistakes and to have a better return-on-investment (ROI).

A good UX design starts at the very beginning of your product, well-planned UX will help the development to move faster. Everything should be produced by general product guidelines.

Usually, my biggest challenge is when I am being asked by clients to improve their UX just before they go live. That is really difficult, since most of the time it is really late and almost impossible to change anything. Since their app is almost ready, its architecture is done and the budget has diminished, and, even worse, you don't have the option to make any changes without affecting their product because most of its parts were not created with the users in mind; the team just wanted it to work on the functionality side.

When users can't understand how to use a product, they will require instructions and training to use it. Such a product will be problematic for someone who has to use it on a daily basis. Due to this, they will look for alternative options.

Besides the user's involvement from the beginning of the product design/development, it's important to understand that all other teams in the company need to be involved on the UX design process, should have a good relationship among each other, and should help other teams for a better final result.

For example, the marketing team can get user feedback on issues they are having when using the product and send it to the UX team.

Hopefully, by now, your knowledge of UX design has increased, and you have a clear understanding of what it stands for, how it is used, and when you need to use it. Now, it is time to move on to explain what a full stack designer is.

Note

However, before we go there, just keep this in mind:

BETTER USER EXPERIENCE (UX) DESIGN = HAPPY TEAM = HAPPY USERS = MORE USERS = MORE REVENUE.

Who is a UX designer?

A UX designer is someone who investigates and analyzes how users feel about the products offered to them. UX designers then apply this knowledge to product development in order to ensure that the user has the best possible experience with that product. UX designers conduct research, analyze their findings, inform other members of the development team about their findings, monitor development projects to ensure that those findings are implemented, and do much more.

People usually presume that product design was simpler in the past. Well, they thought it was simpler because designers or product owners had a particular design in mind and built their products in a way that they thought was good and hoped their clients would like.

However, it was different because online competitions for solving specific problems were not as prominent as they are today, so even if the people didn't like a product much, they were forced to use it because there was no other option available to them. That is the reason why most of products used to be designed without users in mind.

UX increases the chances of a project's success when it finally comes to market, not least because it doesn't gamble on users taking to a product just because it's a brand name.

UX design can be found in a variety of project environments nowadays. The more complicated the project, the more essential its UX design is. Too many features handled the wrong way can deter users like nothing else.

You may not find dedicated UX teams in a start-up, but UX is always part of the objective. High-tech start-ups developing innovative projects need to understand how their users feel even more than established companies do.

The bigger the project is, the more resources it consumes, so UX becomes even more important to deliver a return on the investment.

The main methodology used to guarantee the UX in most projects is user-centered design. Simply put, user-centered design is all about designing with the user's needs and expected behaviors in mind.

We can say that if the heart of UX design is the concept of constant iterative optimization, then the problem is the blood the heart is pumping.

So, the approach for our future customers or users should be to find the problem that they are dealing with and then solve it for them. We have to find the problem and define it–feel the same pain that our users feel–and eliminate it for them. That is the highway to providing a great UX.

To stay on the right path, we will need a lot of analytical and intuitive skills, because one of the trickiest parts with problems is that when we have something that troubles us, it is difficult to define it.

In the past, the role of a UX designer was a bit more difficult, because we always had to prove the value of UX to the company we were working for, and it was a real struggle to explain to companies why UX is important and why they need to start focusing on it. However, nowadays, companies and start-ups have become aware of the importance of UX and take this user-centered design approach seriously.

UX design process

Like most other disciplines, UX design has its own process. UX design follows the user-centered design process, which looks like this:

Discovery and planning
Strategy
UX Research
Analysis
Design
Production

We will go deeper into each one of these in the later chapters of this book, but I will clarify a small point here: what each of this phases includes. To have a successful product result in the end, it is really important to follow all this stages strictly:

Research: By research, we mean that a statement of work is delivered to the client, with details such as the project's cost, timeline, and what its end result will be. Also, at this stage, team-planning will be included, so this is the initial preparation before starting the project and going deeper into it.
Strategy: This is the first phase, where we define what goal we want to achieve in this process. It deals with understanding what the benefit of the final product will be.
Discovery and Planning: This is usually referred as theDiscovery phase, and will include a lot of sub-phases inside its life cycle, such as interviews, user research, competition research, observations from users, and different surveys.
Analysis: Here, you write the insights on the data that you collected from the research phase and then define how UX design can help you with that data.
Design: This comes after you define clear goals and flows from the previous three phases and put your product to life by visualizing it and designing all the specific flows, refine them, and get input from the users by doing paper prototypes, wireframes, interactions, and UI designs.
Production: This phase is where all the visual designs are finished, and you validate the product with stakeholders and go through user testing sessions. In this phase, the UX design team has to collaborate a lot with the developers team and guide them to produce a high-quality product.

So, all these six stages of the UX process include the user feedback from the beginning of each stage and during the entire product life cycle.

Full stack design

Since we now understand what UX stands for, it's time to dive deeper into a trending topic that is getting a lot public attention, the full stack design.

As an example, let's look at designing a new logo. Usually, a graphic designer will create a bundle of graphical elements to give a better presentation to their client. For example, they will include the good and bad practices of logo use, negative logos, how it can be used in horizontal, and vertical space, favicons, and so on.

The idea of web frameworks, such as Bootstrap, Foundation even Google's Material Design guidelines, is similar; just like a graphic designer who has to provide all the rules, guides, and best practices of use for a logo that they created, the full stack designer provides web style guides, animations, graphical assets, interactions, and UI elements that will be used across the platform.

Today, a lot of companies, even larger ones, have built their own custom design frameworks to keep track of their product's UI.

So, creating this kind of framework, from A to Z, from the UX Research process to the final UI components that represent the core of your product concepts on many areas, I call this the full stack design process.

Who is a full stack designer?

It is important to clarify that the word full stack doesn't mean to do it all from designing, coding, database or management; it means that a person has developed multiple skills, which allow them to complete a design or a development project on their own. A full stack designer is someone who can work through the entire life cycle/process of the design phase, starting from conception, research, and wireframes to UI design and Visual Design. They will be involved in the prototyping process using specific tools, such as Marvel, InVision, or Sympli, and will finalize the process by providing frontend style guides and UI Prototypes and animations using HTML/CSS, WebFlow, Framer.js, SVG Animation, and so on.

By involving the frontend code, I don't mean that you have to be a great coder like you are on design side, but you should understand how the frontend code works and what technologies are behind it; in the following diagram, I have added the frontend code on both areas, that is, Design and Development:

A good designer does not focus only on the UI or on the Design itself, but also on other things that are connected to it. A designer needs to realize the influence of different factors that can affect the product result. So, the more you are involved in these connected or related areas, the better a full stack designer you will become. And one of the biggest benefits is to involve developers from the beginning stage of UX.

The difference between a regular designer and a full stack designer is the ability to think of the bigger picture, because a full stack designer will be involved in the UX Process, design patterns, critical thinking, coding techniques, and a lot of other tools that will help them to finish the project, while a regular designer is involved in a specific area of design only.

A roadmap to becoming a successful full stack designer

There are tons of things that you can do to become a full stack designer, but I would suggest these five points as a roadmap to becoming successful in a full stack designer career:

Learn the right skills
Learn the right tools
Show your work and gain some experience
Learn how to network and get connected with people
Build trust

We also should have the ability to receive different input from informations data, content, product requirements, feature requests, and so on, and develop different series of sketches and wireframes that will follow the best practices of UX design, solve problems, and, more importantly, create user-friendly experiences.

We need to be able to understand wireframes and design and every other UI component around them because this needs to be aligned with our client branding, that is, solving visual problems by providing a complete visual view and presentation of the product. Finally, we will need to be able to take these finalized UI designs and convert them into working prototypes, frontend code, or at least pieces of interactions just to show clearly our thinking for interactivity, functionality, and product look (UI).

Another thing that confuses people a lot about the full stack design field is the separation of frontend tasks. Usually, I prefer to clarify to the full stack developer that their task is to get the product to come to life by filling it with real data and add its interactivity to the backend and database by following the framework that was provided to them by the design team.

Usually, I see a lot of blogs written about the full stack designer as a designer who can code, but the central idea is not coding, but combining the framework, the toolset, and the assets of all the research that has happened on UX process phases into one complete bundle for the full stack developer to follow. Also web frameworks such as Material Design Guidelines, Bootstrap Framework, Animation showcases, and clear actions and functionalities can be also included in this bundle.

The word stack usually refers to the layers of technology in an application. So you can think of this as if you were to stack all design technologies on an application, starting from UX. It would look something like this:

UX design (Research, Wireframing, and Prototype): Using tools such as Balsamiq, Pen and Paper, and sketching
UI design (Visual Design, mockups, icons, and assets): Using tools such as Photoshop, Illustrator, SketchApp, and Adobe XD Design
Interaction Design (prototype of UI, animation, human interaction): Using tools such as Principle, Adobe After Effect, InVision, and FramerJS
Frontend side: This includes the following two areas:
- HTML and CSS for User Interface Design
- JavaScript + Advanced CSS features for Interface Interaction and Animations

So, putting this simply, you can see that a full stack designer is someone who can research, design, implement, prototype, mock up, and code or slice (HTML/CSS). They are knowledgeable about all types of designs starting with graphics, web, mobile, software, or more specific areas of a new product design.

A full stack designer is a designer who has a multi-set of different design skills, and who is able to understand, design, and maintain an awareness for the entire product structure. Also, this kind of designer can customize their list of skills for a specific project.

For example, one project might require their skill on visual design and create interaction examples to solve a specific problem, whereas the other challenge for them might be to think through information data and develop clear UX design flows and solutions. So, this kind of designer will have all the necessary skills for solving both challenges and they choose the right ones for a specific task.

Having this kind of skill makes their process really seamless and allows them to have higher expectations when it comes to finalizing the product. Plus, it can save them a lot of time and money.

If we talk about the difference between a full stack designer and a full stack developer, it is really simple, because full stack developers are more focused on understanding a different range and wide spectrum of technologies so that they can improve on the engineering side. On the other hand, full stack designers are more focused on understanding the process for creating the product so that they will be able to deliver a better design, better UX, and a better product.

So, in being a full stack designer for creating a digital or physical product, it is important to concentrate on the following core aspects:

Usability: We have to create and provide a clear and really easy-to-use product
Utility: The product itself needs to provide useful content and solve a user problem
Accessibility: The product needs to be accessible to different user categories
Desirability: The product is attractive and creates a good UX

The advantage that you will have by becoming a full stack designer is not about how to make things look beautiful; instead, you will be able to research human behaviors and needs. You will also understand how to structure the information collected by the research so that it makes sense when your team reads it, and you will be involved in prototyping and getting validation from whether real people find value in your product before you build it.

A lot of companies are starting to realize the value of these skills and what they mean to their business, so no matter your job title, if you have these skill in your toolbox, you are highly desired in the market.

However, on the other hand, if you choose not to expand your overall skill set, the end result will be really disappointing for your overall growth potential, which means you are essentially setting yourself up to fail in the long run, as nowadays, in the tech world, designers are expected to do rather more than just design things.

If you really want to become a better designer, you have to stop caring only for the design itself and start checking out the other parts that are connected to it, such as users, technologies, and the product itself.

When you start improving yourself on the other design-related parts, you will realize just how much of the big picture you were missing before, and you will even start understanding the key part of the development process that depends on the design itself.

By this, your work and your product design will become much better because of your overall realization that you've got around different processes that are related to design. This is how the mindset of a full stack designer actually works. Also, in the last few years, full stack designers essentially started to become extremely cross-disciplinary and increased in number at an astounding pace.

The moment that you choose to become a full stack designer is the moment that you decided to help everyone on your team, as well as the users, in creating a specific product.

Besides financial rewards, the biggest benefit of being a full stack designer is the opportunity to expand your skills.

Let me tell you a true story, something that happened to a really amazing Visual Designer that I knew and worked with. When I say amazing, I mean it. This guy's portfolio on the visual side was incredible, and it was a pleasure to work with him; however, even though everything that he designed looked really good, almost none of his designs ever came to life simply because they were without sense when you wanted to code or animate them based on your requirements. Why? Because he never cared for the other side of the process and design-related stuff design, such as research, user testing, user feedback, and coding. When we tried to implement his design on the coding side, most of the time it was so messy. Even after we brought it to life, it simply would not work for the users when we put that app or web service online. We just got a bunch of bad feedback because of its usability. We tried to convince him to make an effort to understand the other parts of the process, but it wasn't working so we had to let him go; we didn't have a choice.

He joined another reputable company; they were so happy to have him on board, but a few months later, other team members–mainly developers–started leaving the company. It was simply because it didn't work for them to work with someone who cared only for the product to be amazing and beautiful on the visual side when its real-life implementation wasn't working at all, and wasn't making sense.

Why am I am telling you this? Because, if you want to stick just with the design side, OK, that is your choice, but you will not achieve anything with that; without understanding the other parts connected to design, you will just fade away.In the worst scenario, few years back, these guys would last longer in the big companies because people were taking into consideration their amazing portfolios without checking their general knowledge on the implementation side or understanding what process they use for designing or developing a product.

Lately, a lot of blog posts have been written; too much confusion has been added by saying that a full stack design is not making sense, and they are mixing up this discipline by comparing people who only code, or who only design, with people which can do both of them. Actually, this discipline has nothing to do with this comparison; in the end, a new bunch of skills added to your toolbox will not hurt you. It is not about being a generalist, but about understanding the complete design process and all the parts connected to it. So, if you are feeling too lazy to learn how to write some lines of codes or a new prototyping tool, such as Principle, framer.js, or any other tool that will make your design process easier and better, then this is your call.

Keep in mind that knowledge is one of the most valuable things you can have. Happiness and usefulness depend upon it. Knowledge is the acquisition of facts and the application of them to life.

As a full stack designer, you will be able to recognize the limitations and expectations of the project during the plan of the UX Process or UI design itself. You will be able to know what will and will not work on your project in its early phase because you'll develop more realistic expectations of outcomes before you start to push the code or any visual design.

So, by this, you can see that having a full stack designer in your company does not only benefit the design team, but also all the other teams inside the company, even the employer. Apart from increased knowledge and an expanded set of skills, another benefit of a full stack designer is that they know exactly what to expect from visual designs that they have come up with in the coding stage because they are aware of what is possible and what is not in the coding phase itself, whether it is a bad or good approach, whether it will work for that specific UI or not, and much more.

Leonir Sep 19, 2018

As a newbie into UX design experience I found the book interesting and quite easy to understand. The author who is a well known in his Industry, did a great job not only explaining the theory behind UX Design but also mapping it with real life examples based on his wealth experience. This is a GO TO book for everyone who is starting with UX Design and for those with some experience and want to deep dive into UX Design.

Amazon Verified review

Dexter Retamar Sep 01, 2018

Whether you are a developer, designer, project manager, product owner or just curious to know what UX can do for your product or service, this book takes you through the whole journey and process for implementing a great UX. The author does an excellent job of presenting a wealth of information that can be applied to any project you may be working on. The book covers a broad subject, from research, basic design principles, psychology, prototyping, UI design, tools in the industry, handover to frontend implementation by presenting information clearly and relevant visual and example.Definitely, this book deserves a seat in your bookshelf, a great primer for those who are starting in UX but still a great refresher and a constant reference even for the seasoned.

Denese Dec 29, 2019

Great book

KC Sep 28, 2018

I couldn’t get passed the first few pages because of the grammatical errors. It appears no one proofread this book before publishing. The author does a poor job gathering his thoughts and explaining the phases of UX design. I do not recommend buying this book.

Hands-On UX Design for Developers: Design, prototype, and implement compelling user experiences from scratch.

What do you get with a Packt Subscription?