Week 1: Introduction to UX and UI design

In the final assignment of this course, you will be responsible for redesigning an online ordering element and a table reservation element following the UX UI process you will learn. 

False

You will learn the UX UI process by following the redesign of the online ordering element. Then, you will get instructions to redesign the table reservation element as a final project. 

Hello and welcome to this course on the principles of user
experience and user interface, or UX and UI for short. UX and UI are all about people. Everyone wants to experience
the latest technology, but they don’t want to
spend too much time or strain their already
busy minds’ doing so. Therefore, if you want a
website to be successful, it is crucial to
get both correct. This course will give you an
introduction to UX and UI. There is a lot more to be
learned about these disciplines. However, the course
will give you a sample and an understanding
of what is involved. The course is structured
around a situation that Adrian and Mario are having with their Little Lemon
Restaurant website. The website was
designed and coded without UX and UI principles applied to the online elements of ordering food for delivery and reserving a table
in the restaurant. Throughout the course, you’ll be guided
through the process of UX and UI methodologies to resolve one of these issues, ordering food online
from their website via a mobile device. The other issue,
reserving a table, will be the theme of your
final course assignment. That’s just a brief overview of what the course will be like. But it does serve to
illustrate some of the tasks UX and UI professionals
encounter. During the course, you’ll
be introduced to these and the many other tasks that form the duties of a
UX and UI professional. In particular, you will learn
to differentiate UX and UI, use Figma, one of the most
popular design tools today, evaluate interactive designs, create a contemporary
user interface. You will also learn to create
a low-fidelity design, simple and low-tech concept. All you need for that
is a pen and paper and transform it into
a high-fidelity design which is functional
and interactive and very close to
the final product. Finally, create a prototype. Don’t worry about these terms if you’re not
familiar with them, you will cover them throughout your journey
in this course. In other words, in
the course project, you will get to
create a prototype or a mock-up of the
final proposed design which can be tested
to validate ideas and design assumptions made. But you can relax,
you’re not expected to become a UX or UI
professional right now. There are many videos
in your course that will gradually guide
you toward that goal. Watch, pause, rewind,
and re-watch the videos until you’re confident
in your skills. Then consolidate your knowledge by consulting the
course readings and put your skills
into practice during the course exercises. Along the way, you’ll encounter
several knowledge quizzes where you can self-check
your progress. Just like you, there
are a number of people considering a career as
a UX/UI professional, and the course
discussion prompts will enable you to connect
with them, your classmates, as you move through
the materials. It’s a great way to share
knowledge, discuss difficulties, and make new friends. To be successful in this course, it is helpful to
commit to a regular and disciplined
approach to learning. You need to be serious
about your study and if possible, map
out a study schedule with dates and times so you can devote to
attending the course. It’s an online
self-paced course, but it does help to
think of your study in terms of regular attendance
at a learning institute. In summary, this
course provides you with a complete
introduction to UX and UI. Best of luck in your
learning journey.

At Meta, we have 3.5 billion people
who use our products every day. They use them in various different ways. This is what the role of the product
designer is to remind the rest of the cross functional teams of the reason
why we’re building the things that we’re building. Yeah, half of the planet, no pressure casual, I’m Petra and I’m a product designer at meta reality labs and I live in London, I think that people very often think that product designers spend all of their time designing, That is actually not true. Product designers spend most of their
time talking to people most of their time in documents and actually thinking
holistically about the product every day. I get surprised by how users
actually interact with our products, very rewarding to realize that you are, you are wrong in your assumptions,
it’s kind of humbling to see that and obviously when you’re building
global products for so many people, you have to remind
yourself that not everyone are going to be using the products in the way
that you thought about them. We are constantly talking to the people
that were building products for. It’s probably one of
the best part of my work. To be honest, these conversations
remind you that you are not your user get surprised absolutely every
day of how people interact or decide to interact with whatever
we’re building Throughout my life. I have been exposed to software,
the reason was quite banal, I think I wanted to Photoshop myself
next to Orlando Bloom when I was 12. So this was my first
exposure to Photoshop. From that point onwards,
I kind of spiraled into other types of software and
told myself how to code as well. When I graduated from illustration,
I was already experimenting with new technologies, like connect some
interesting tech like Arduino, I also had a raspberry pi and I was
just building interactive experiences. So this very naturally led itself
into a role of a digital designer. At the time,
my first role was designing for a platform as a digital
slash graphic designer. And from that point onwards I
went into front end engineering, I would say that I wasn’t
the best engineer, I was more interested in the user journey,
how products work, what are the problems that
these products solve? So it was a very natural shift from
being a front end developer to becoming a product designer and actually playing
on my visual skills a little bit more. I worked between Web mobile VR and
augmented reality, so it really depends on the project
that I have at hand today. Generally the day starts with me
catching up with emails and catching up with whatever has happened whilst I
was asleep that as a global company. So a lot can happen during the night. After an hour or so. I would then catch up with my lead
engineer and my product manager and then the day will start from there,
we working very cross functional teams. That means that you might have
meetings with someone from content design who are the people who
are looking after our written content or you might be working with someone
from marketing if you have a new feature that is coming up or
you might be working with your engineers, which as a designer is
probably most likely. I think engineers and designers do
sometimes tend to have a disconnect particularly because designers
might not know the code base, might not understand the the engineering
limitations and on the opposite side, engineers might not really know
what the design process is. What’s important is to
from the very beginning, build a very strong partnerships
between the two functions. I would actually say whenever as
an engineer, you’re starting to work with the designer, don’t dive into
the work straightaway pose. And take some time to
understand this person, talk through the processes that
you’re both comfortable with and after that dive into the more
technical aspects of the work, like requirements or dependencies or
discussing the actual functionalities that you’re
going to be building together. Don’t be afraid of designers. I’ve seen that quite a few
times where front end engineers tend not to not to contradict
their designers but feel free to have a conversation. If you can see that your designer that the
design does not fit the requirements or is not going to be easy to execute or
there’s a less costly way to execute it. Go to your designer, speak to them,
have a conversation, designers are here to help you. We are partners in this endeavor, and we’re ultimately going
towards the same goal. So it’s absolutely vital for
us to collaborate. Good luck on your journey
of becoming an engineer. It might feel daunting at times,
but stick to it. It is worth it when you see how you impact
the life of people who use your products.

You just started working in a small company. You expected to work exclusively on the UI, or the user interface, of the website since that is what you really like to do. Your colleagues are asking you to conduct a UX , or user experience, study to find out how customers feel while using the website. Do you think this is a fair expectation of your colleagues? 

Yes

Typically, in a smaller company, a “designer” might need to fulfill both the roles of UX and UI. Researching user needs, designing solutions and coding them up.

Hello and welcome to this course on
the principles of user interface and user experience,
most commonly referred to as UX and Ui. Adrian, one of the co owners of
the Little Lemon restaurant, noticed they are not getting many
orders or reservations on the website. He likes the old look and feel but
recognizes something needs to be done. Adrian knows you are interested
in user experience and user interface or UX and UI for short. He asks if you would like to
redesign the Little Lemon website. This is a great opportunity for you to
learn and put your skills into practice. You accept Adrian’s invitation to redesign
the website and you just can’t wait to learn more about UX and UI to help Adrian
and to explore careers in the field. In this video, you will learn how to differentiate
between the disciplines of UX and UI and identify the typical roles they
fulfill in the product design life cycle. You’ll also identify the careers for
a UX or UI designer in different sized companies. As an aspiring UX UI professional,
it is important to know what each discipline is and
what kinds of jobs there are in the field. Let’s consider the Little Lemon Restaurant
and how UX and UI might be contextualized and
differentiated within that organization. First up, UX. UX is not just about the Little Lemon
website or app user interface. UX is about a customer or user experience
with the Little Lemon business as a whole, the staff, the service, the food,
the décor, the menu design, restrooms and
of course the website and apps. However, we will focus on the UX
process applied to the design and redesign of the Little Lemon website. UX is about asking questions, questions
like what are the customers’ needs? What’s stopping them from
achieving their goals? How intuitive is the website to use? Can users order food easily? Can customers get from one section
to another quickly and efficiently, like selecting dishes and
customizing their order? And it’s about providing answers
to those questions in the product. Now on to what the users see, the UI. The Little Lemon website in this context
is the primary point of contact for the users. UI provides information that users
first see and then interact with, elements like type, color buttons,
shapes, icons and images. Successful UI design has to do with
grouping and assembling these elements in a way that helps users achieve
their goals quickly and efficiently while looking beautiful and
adhering to the brand of the restaurant. UX and UI both inform each other,
and when used together, they can combine to make beautiful
products that are a joy to use. For example,
a UX designer will research and identify needs and iteratively
proposed solutions via prototypes. A UI designer will create logical and
beautiful layouts and interactive flows informed by
a systemized design library. It’s worth noting that
the roles within UX and UI can be as nuanced as
the discipline itself. In different companies,
these roles will mean different things. In a smaller company, a designer might
need to fulfill both the roles of UX and UI, researching user needs,
designing solutions, and coding them up. Whereas in larger companies, there may be
specialized roles within the disciplines. For example, a UX researcher may focus
on just research and a UX copywriter may focus on the content, words, and the tone
of voice used in your product copy. Some UI designers may focus
entirely on the upkeep and management of the design system,
a repository of interactive elements and components, whereas others may specialize
in accessibility, making sure to provide the best possible experience to
users that may have impairments. What is certain is that knowing what is
involved in each of these disciplines and applying them appropriately can give
way to beautifully designed and usable products. Throughout this course, you will follow
the redesign of the ordering element of the Little Lemon website where UX and
UI principles are applied. Then you will have an opportunity
to apply them yourself in the table reservation element In
the final course project. In this video, you learned about key
differences between UX and UI and some job roles that exist in
the product design lifecycle. You also learned about careers for a UX or
UI designer in different sized companies

product managers don’t tell designers or
engineers to do this, we focus on bringing everyone together
on a strategy that we believe in. So we are very collaborative and we really value what developers think, what engineers think
because we are a team and we are trying to build this together. Hi my name is Jason,
I am a product manager at meta. I work in the facebook,
web app and web platform team. So my day is filled with I
think three core things. The first one is reading, understanding
what is happening with the product with the market, with leadership and
with other teams, I have to sort of a really good idea of
what is happening in order to lead to section number two which is thinking that
happens in writing often and it’s really crystallizing like product strategy,
figuring out what the communication is trying to figure out what the plan is for
the entire team or setting goals. The third part is collaboration which
usually happens meeting other people. I will send information
via a written document, but a lot of times it is getting in a room
with an engineer working through a problem together and it’s like figuring out,
hey this is a product strategy, what does it take to build this, what does
it actually take to make this happen in H one or this year and
how do we bring it to life? What is the trade off? So those three things are,
would usually take up, take up my time as a product manager. If you think about technical skills. Product managers actually have
less technical skills and a lot of the people we work with. The main one that I use is analysis. I actually rely on the data scientists to
pull and do a lot of the hard numbers but I have to digest and
understand what it means. Collaboration is a core skill set because
what we are doing is working with engineers to make
the product come to life. So a lot of the soft skills
include written communication and verbal communication. It’s really can we bring our ideas and
thinking and make other and help other people understand and
come along for the ride. Product managers with engineers and
all of our other stakeholders. We are building amazing products and
that in itself is just really hard to do. So first we have to actually know
what’s a winning product and have a clear strategy making that happen. That is challenging and
in the absolute best way and that’s what makes this
job really fulfilling. I work with product designers and
engineers very heavily. They are two of my top stakeholders
with product designers. I am really bringing
the product strategy and creating a visual representation
of what that looks like so far. To give an example let’s say I have this
concept and strategy that we really need navigation to be more persistent and so
people can access some of the stuff. I will write that as a strategy. The product designers will then
visualize it into an actual menu, What are the pixels? How big is it? What are the actual colors? Should we show notification or not? And they they’ve taken the product
strategy and turned us into a visual item. We then together work with the engineer
to build that menu, you know the menu, the desires that put and say it’s like 80
or 100 pixels or whatever the heck it is, will actually could put that in the code. So the three of us will work very
closely together to realize this product which occupies a very important
role in the broader strategy. So some things that
an engineer could focus on to become a very effective engineer. First you have to master the craft
of being a good engineer, which is excellent coding and
excellent execution. In addition to that
collaboration is very important. The product designer,
the product manager and engineer. We all are working together
to build an amazing product. Communication goes a really long way when
you’re working in a team communication would really help us make sure we’re
moving together and as a result helps make sure we build a phenomenal product
building things is incredibly fulfilling. There’s nothing like that feeling
when you launch something and people love it and
you know that you built this and that’s what you’ll be able to
do when you finish this course

In your final course project, you will redesign the layout of a simple page with no interaction for the Little Lemon's mobile version of their website. 

No

In your final project, you will redesign an interactive table reservation element, following the specifications you will receive to complete your project. 

Adrian, one of the co-owners of the Little Lemon restaurant, manages all things
related to product. He asked you to carry out the redesign of the
Little Lemon website following a UX/UI process. Throughout this course, you will learn the theory
underpinning UX and UI and apply your newly
learned skills to redesign parts
of their website. In this video, you
will learn about the context in which you
will explore UX and UI. You will also get an overview of how the redesign
process will happen. Finally, you will
get a description of what you will be
able to accomplish in the final course project. In the contexts you
will be working on, customers are having issues using the Little Lemon website to order food for delivery
and reserve a table. Throughout the course, you will learn UX
and UI principles and best practices
used to identify and get a better understanding
of these issues. You will follow the
redesign process of the online ordering elements with the customer in the
forefront of all decision-making. Then you will explore
a solution and test it to make sure that customers find this element intuitive
and enjoyable to use. After learning about what’s
involved in the UX/UI process, it’ll be your turn to practice
the skills you learned and create a solution for the
table reservation element. You will receive an assignment outlining what needs
to be produced at the end of the course. What you will produce at the end will be an interactive element that you will be
able to showcase to your prospective employers. You will start your work based on data gathered
from customers while they used the website. Throughout the course,
you will learn about UX and UI principles
and best practices that you will apply
to your project designing the table reservation
interactive element. The reserving a table
element will broadly contain features the
customers can select, such as number of
diners, a date and time, and a special requirement
comments box. After these are selected, the customer will
add their details. These include name,
phone number, email address, and
credit card details. When they have
completed these stages and confirm the booking, they will receive confirmation
on screen and via email. This will be your creation, so as you go through
the process, you may include any
additional features that you find necessary. On completion of the course, you will apply the
methods and processes to design the table
reservation process of the mobile Little
Lemon website for users.

You started working on the Little Lemon project.  You’re focusing on designing the website. Is this all that UX involves? 

No

UX includes everything related to all the interactions that a user has with a company, its services and products.

Adrian learns that his customers
are frustrated that they can’t easily book a table or order for
delivery from the website. He knows that these are issues he wants to
resolve so they can gain more business. You jump in to help Adrian achieve
his business goals by applying the principles of UX UI. You will start exploring UX and learning
how following UX process will enable you to solve these issues from
the user’s perspective. Increasing sales and
keeping customers coming back for more. In this video,
you will learn to define what UX is and recognize that UX is a process
with several stages. UX means user experience. It includes everything related to all
the interactions that a user has with a company, its services and products. How does something like a remote control,
a phone, an app or a website feel to use? How do you feel before, during and
after interacting with the product? Can users achieve what they
want easily from a product? Does the interface provide a smooth,
enjoyable experience, making your users feel in control? Why do customers keep coming back for
more? Let’s explore this a little further now. Don norman, one of the most famous
researchers in the field of design, coined the term U X. He was concerned with the experience
customers were having with the product. How could users find the product in store,
how could they get at home? What was it like opening the box,
how easy where the assembly instructions? What did it feel like to use,
was it intuitive and enjoyable, UX is about all of this? Have you ever used an appliance and you
didn’t know whether it was on or off, or use an app where you had a hard
time getting what you wanted. These are problems UX can solve, a
product’s features need to be discoverable so you know what you are looking for. Successful product design also
needs to converse with you, it needs to give you
feedback on your actions. You don’t want your users to be confused
about why nothing happens when they click or tap a button. Considering and designing for the user and not what you think the user
wants are key to successful UX. Take a minute to think about something or
some product that has been designed intuitively and
one that makes no sense at all to use. How would you improve that design for
all users, regardless of their age and ability. What would you change? To understand what UX really is,
it’s important to recognize that UX has been refined into a process which
you will explore in more detail later. But let’s get a quick overview of it, so you have an idea of what
the process involves. The process is iterative, you may have to
go back to previous steps to adjust your design to suit the customers and
business goals several times. If you are designing something,
you observe people doing the task. And from that you can identify problems
that they may have completing that task. You then may have some ideas to work on. Then you prototype your
intended solution and test it. This is the process in summary. You repeat each of these stages and
the steps within them and test your design again and again until you have something
that is usable and enjoyable for everyone. Following these steps and
considering best practice methods and behaviors in current Web and product design will help you redesign the
order form of the Little Lemon website. In this video, you covered what UX is,
what the stages are and how you can apply them to
the successful redesign of a product or service by considering
your users from the start.

You are redesigning the Little Lemon website and you want to make sure that you prevent users from doing things they shouldn’t. And if they end up making a mistake, you want users to be able to fix it easily. Which UX usability component is best described above?

Errors

That’s right. Good usability tries to prevent errors from happening and provide an easy way of fixing mistakes.

After speaking with Adrian, you realize that the
fact that customers are not able to
easily place an order or reserve a table through
the Little Lemon website is a usability issue and
not only a design issue. As an aspiring UX UI designer, you will need to employ
methods to help frame your thinking to deliver the
best experience to users. In this process, you will gain a better understanding of customers and their
frustrations. You need to think about aligning the customer’s goals with
Adrian’s business goals. In this video, you will
learn to recognize UX goals, how to consider applying
these to your thinking, and the user design process, and to identify Nielsen’s
usability quality components. You will now cover usability an essential concept
in UX and UI design. Usability gauges how intuitive or easier
product is to use. Jacob Nielsen’s, a highly recognized professional in
the field of usability, proposes that you can evaluate usability through five
usability components. They are learnability,
efficiency, memorability, errors,
and satisfaction. Let’s start with learnability. When his customers are trying
to order for delivery, Adrian wants the process to be easy to learn from the
first time they do it. The second component
is efficiency. What if users want to
change their order? Is it easy to do, and can they do it quickly
and efficiently? Third, comes memorability. What if a user gets distracted? Is it easy to remember where
they were when they return? How quickly can they
find where they were? Next, go to usability
needs to consider errors. What if a user makes a mistake? The design should provide solutions to these mistakes and address them
before they happen. Finally, comes satisfaction. Is the website pleasant
or satisfying to use? Do users enjoy using it? Is it easy to use? Measuring user satisfaction
is not an easy task. However, you know how
it feels when you use an intuitive and
well-designed product. It helps to think
about the usability, quality components at all
stages of your design. If you consider them
from the outset, you will solve problems
earlier in the process. You now need to think about the people using your
design and consider ways in which your design can be satisfying and enjoyable
for them to use. When you use a product, you can go through a
range of emotions, from board to happy, to excited, to confused, and
sometimes giving up. Considering your
user’s experience goals early is a
methodology that you can employ to help remember the ever-changing nature of
your user’s experiences. You can organize your
experience goals into desirable and
undesirable aspects. Let’s think about your
customer and their goals. You want your product to be
enjoyable and fun to use. You also want your design to be relaxing, satisfying,
and efficient. You will surely want
your customers to be engaged, motivated,
and stimulated. Another important point,
you won’t want them to have to think too hard
to use your product. It should be intuitive.
On the other hand, you don’t want your
website or app to be slow, confusing, or
complicated to use. You don’t want your
customers to feel bored, frustrated, or stressed. Customers need to easily find the correct part of the site to accomplish what they want. How can your solution be helpful without being patronizing
or presumptive. For, example, when reserving
a table at Little Lemon, costumer’s needs to
know if the table is available and how long
they can reserve it for. Can your design provide
this information to the user so they can feel
supported and empowered? Is the information presented clearly without being annoying? Suppose a customer is using crutches and would like
to sit by the door. Could your design potentially
satisfy this requirement? If not, can the user find this information easily
enough if they need to? Although you have not
implemented any design yet, you are considering your
users goals and needs, and thinking about
ways you can help them satisfy these through
your design solutions. In this video, you learned to recognize the
importance of UX goals, how to consider applying
these to your thinking, and the user design
process and to identify Nielsen’s usability
quality components. These are key methods to inform smart and enjoyable designs. Remember, it’s important to take them into account early in your process to try to avoid
problems before they happen.

You really want to get started with the UX process and are trying to recall what the order of the stages are. Which option presents the right order? 

Empathize, define, ideate, prototype, test

Yes. That is the correct order.

You’re eager to start working
on the Little Lemon website and you know you need to follow UX process
to accomplish the task successfully. So you begin to investigate
the stages of UX design. In this video you will recognize
the steps of the UX process and identify how you can apply them. Let’s start exploring how following a UX
process can enable you to create a better website for Adrian. Increasing sales and
keeping customers coming back for more. UX is a very process driven discipline. There are several different models that
you can follow in carrying out a UX design or redesign. While there is no one size fits all
approach, following some key steps will help ensure the successful implementation
of a rich user experience design. Let’s cover the UX process and
how you will apply it to the redesign of Little Lemons website
throughout this course. And don’t worry it’s okay if you don’t
know what some of these terms are. Now, we will go into more detail later. The five stages of the UX
process are empathize, define ideate prototype and test. It is important to keep in mind that UX
is an iterative process which means you may have to go back to the previous
stage to adjust and refine it. Let’s start with the empathize stage. You get permission to interview and observe Adrian’s customers at
various stages of trying to complete tasks on the restaurant website
like ordering a meal for delivery. You want to listen to their frustrations. The key here is to understand
your user’s needs. From the results of this research, you can create a persona that you can then
reference throughout the design process. You will also create an empathy,
map a scenario and journey map to empathize
more with this persona. This will also keep your ideas grounded so
to avoid making assumptions. The second stage in the process you
will follow is the defined stage. You collate and distill all of the
information collected from your users and identify the key problems and
needs that they are having. You also prioritize these frustrations or
pain points by importance. You now know who your users are,
what their frustrations are and what problems you need to solve. You will create a user needs statement
that clearly outlines the needs your users have. Once you know the issues and
who you’re solving for, you can ideate. Ideating is about generating ideas. You can do this by sketching,
brainstorming, mind mapping and even handwriting notes. The key here is to keep an open mind and
not commit to one specific idea and this may be iterated
throughout the design process. To iterate is to reflect on your work and
refine and improve your design. You will sketch out your ideas into
something that will address the little lemon customers needs. You will then develop
them into wire frames. A wire frame is a two dimensional
representation of the user interface which is concerned with the placement and hierarchy of content
the functionalities that are offered. And the expected actions
that users will take. Next comes the prototype, which is
a simulation of the final product. You have iterated and refined your
ideas into a fresh new solution but you cannot assume it will work for
everyone and release it just yet. You should simulate how it will
behave first with a prototype, take your wire frame and flesh it out. Give it some color, put in some buttons
and text and make it interactive. You can simulate a real scenario for your customers to help them
achieve their required goals. Since UX is an iterative process
based on user and client feedback, you may also have to
iterate at this stage. So your ideas are constantly being refined
into something approaching a final design solution. Then you will test your design, the testing stages where you present your
solution to users and get their feedback. You create a test script with some
clear instructions focusing on achieving a task or tasks. Your test participants,
customers in this case, interact with your prototype while
trying to achieve the task at hand. Any frustrations can be communicated and
highlighted at this stage and you can go back and address them
before the next stage of the process. The final stages, the build stage, you
have listened to users empathize with them and aim to solve their needs through
iterative design techniques. You’ve watched them use your product and
have tweeted to make it easier and more intuitive. Now it’s time to build, ensuring you
follow these steps can help ensure you are going to build a product that
addresses the needs of your users and offers a great user experience. In this video, you recognize the key
steps involved in the UX process and identified how you can apply them. You can use these tools to make the
redesign of the Little Lemon website more user friendly.

Which of the following is part of the UI of a digital product? Select all that apply. 

• How information is laid out
• The icons
• What happens when you click something
• The text
• The colors

You already covered UX
principles that you can apply to the little Lemon
website as you improve its ordering and reservation
functionalities. But you know that you
also need to improve the user interface. So you’re excited to find out
more about UI design. In this video, you
will learn to: explain the concepts of the UI
component of UX UI, identify applications of UI and recognize the importance
of successful UI design. To interface with
something means interacting or
communicating with it. You can interface with
other humans and you can interface with
computers and applications. People do it every day to communicate with
colleagues and friends by email and text messages
or with technology, for example, a printer by
changing its settings and interfacing with a
barista while they interact with a machine
to make a coffee. Think about how you use your devices to achieve
any number of tasks, like getting
directions to places, taking online classes,
or ordering food. A graphical user
interface or GUI presents interactive visual
components people can interact with on-screen to
communicate with technology. For consistency, we
refer to it as a UI. The information and how it
is laid out, the icons, colors, text, shapes, and
information that is all the UI. What happens when you
tap or click something? That’s the UI too. Interfaces are
about communication and since the dawn of time, humans have used tools as a means to communicate
with each other. Cave drawings show
us that people used sticks to illustrate
stories and events. The stick became the quill
and the quill became the pen, which is still something
used every day to convey messages and to communicate
intent to others. Think of the modern keyboard, which is derived
from the typewriter. Humans interacted
with a typewriter by hitting keys with their
fingers to assemble words. You do the same thing
today when you are posting a status update on your
favorite social network. Interfaces are also about
tasks. Think about a car. The dashboard is a perfect
example of a user interface. If the driver performs a task like pressing
the gas pedal, the car responds
and the speedometer reacts on the dashboard
and you also go faster. When you interact with
your phone to check the Wi-Fi signal and the battery level,
that is communication. The importance of a
well-designed user interface cannot be overestimated. Think of the interface on a medical device that can
communicate vitals to a doctor or the controls of an airplane that can keep
passengers safe in a storm. The intuitiveness of their
designs can help save lives. Xerox PARC was the first PC with a graphical user interface. This UI was refined
over the years and the Xerox Star was launched in 1981 as a personal computer. The introduction and
widespread application of many design metaphors
such as the desktop, Windows, menus, and icons were and are
still in use today. These design metaphors helped
users complete tasks by associating familiar
mental models with this then-new
unfamiliar space. Another milestone
was the introduction of smartphones and tablets, which utilize
multi-touch screens, facilitating the use of
gestures to interact with them. Developers and designers
were able to innovate and create applications to
run on these devices. This phase, in particular, has brought on the
current state of UI. It is ubiquitous. You can
see it everywhere from the absolute use to modern
electric vehicle dashboards. In this course,
you will focus on UI apply to the
design of a website. However, the methods
and concepts can apply to a range of outputs
like applications. In this video, you learned
about user interface design, its history and evolution, and the importance its role
plays around those daily. Keeping the history and
concepts in mind can help you create a better UI design for
the little Lemon website.

The right sidebar displays properties organized in three different panels: design, prototype and inspect. 

Yes

The panels in the right sidebar are design, prototype and inspect. 

By now you should have learned
the principles of UX and UI design. You are on the right track to create
a redesign for the ordering and reservation elements of
the little lemon website. To get started on the redesign, you
need to learn a standard industry design tool to create layouts and
test them with users. So now is a good time to
start learning Figma. In this video you will
explore how to navigate and use the Figma interface and
recognize its sections. Figma is a free online UX UI
design prototyping tool. It is collaborative and
assist designers and developers in building digital products. It allows them to edit, comment and
review designs and code together. It is web based so
it works on all platforms like Macs, PCs running Windows, Linux and Chromebook. In this course you will cover the main
stages of designing a website in Figma from wire frames and
mock ups to an interactive prototype. You will explore the basic tools and
get familiar with more advanced features like auto layout components and
prototyping. To access Figma go to www.figma.com and
sign up for a free account. In Figma you can build teams and create shared work spaces where you
can work simultaneously on files. You can choose to start with a free
starter or a paid professional plan. If you are a student or educator you can access all of Figma’s
professional features for free. Just visit Figma.com/education/apply to verify your education account. Now let’s explore Figma. After I log in,
I am presented with the options, new design, new Fig Jam file and
import file. I select new design file. The interface displays the editor. It seems pretty blank the first time
I open it but don’t worry about it. You will cover the sections
in the Figma interface now. On top there is a tool bar which contains
a variety of tools and functions. In the center of the screen there is
the canvas where your design lives. Then there is the left sidebar with
the layers, assets and pages in your file. And then on the right there is a right
sidebar which contains three panels. But let’s take it easy and cover each of
the main sections in more detail now. Let’s start with the canvas. The canvas is the background for
all of your designs. It’s where you’ll create and
evaluate your work. Now the menu. Figma’s menu can be accessed by
clicking the Figma icon on the top left of the screen. Take a minute to explore
the items in the menu. You can also search for a specific command
by typing it in the quick action option. Now let’s briefly check the toolbar. In the toolbar you can quickly
access the tools you’re likely to use most often like frames,
shapes, pan and text. The toolbar is contextual meaning that
what appears in it depends on which item you have selected. Next is the option section. It is located on the top center and
displays extra options for whichever tool you have selected. If nothing is selected,
Figma shows the file name. When something is selected,
contextual options will appear. For example if I have a shape
selected the options change to edit object group components or mask. Now let’s explore layers. I access layers by clicking
the layers tab in the left sidebar. Every element that I add to my design
appears in the layers panel on the left where they are listed and
organized into frames and groups. Don’t worry if you don’t fully
understand what layers, frames and groups are, you will cover them
in detail later in this course. Now let’s cover the right sidebar. It is a contextual section that can
show either the design, prototype or inspect panels. In this course you will mainly focus
on the design and prototype panels. The inspect panel can be used for
copying CSS values. If I select an object on the frame, the panel shows the properties related to
that specific object in the design panel. The panels in the right sidebar
are contextual meaning the information and settings change depending on
which object is selected. It contains positional information
dimensions, fill stroke and other effects. Now that you know how to sign up for
figma, navigate the user interface and recognize it sections. I encourage you to sign up and
explore Figma UI for yourself.

Does a customer journey map show the steps someone takes to complete a task?

Yes

It presents the steps someone takes to complete a given task. It can also identify their emotions along the steps as you track the UX Goals. 

You started getting ready to work
on the Little Lemon website and now you’re presented with findings about
five users who gave their consent to be interviewed and
observed while they were using it. This information gathering
is called user research. It gives you valuable information into
your customer experience as they order food and make reservations online. In other words,
it helps determine who the user is. In this video, you will identify how you
can use results from user interviews and observations in your design. You will also explore a customer
journey map, understanding and interpreting this data is key to
identifying who your user is and to identifying and
prioritizing their needs and goals. You’ll see how that is achieved by
compiling the results into a customer journey map which you will
learn more about soon. You’re going to come across
some terms like scenarios and segmentation which you may not be familiar
with but don’t worry about them now, they will be covered in
subsequent readings. Be sure to check them after this. User interviews are an effective
approach to learning more about how and what your users think and
what their goals are. From the user interview data you got, it was clear that among some other
issues which you will explore later. Customers were having difficulty
completing a food order on the website. Adrian got consent from two more
customers so you could observe and interview them while trying to
order a salad on the website. They were happy to participate and knew their data would be used
to inform your redesigns. Let’s examine the main issues
that customers were having while attempting to order food. First, all participants found it
difficult trying to find specific dishes. The Menu button was not
clearly identifiable and once discovered the drop down
provided was not categorized into food groups such as starters and
main dishes. Second, it was discovered that
the basket icon was not visible. Without the basket icon, one participant did not know whether they
had added items successfully or not. This simple oversight forced the user
to try to go back to the start again, only to find there was no back button or
a way of navigating to the home screen, so they abandoned the task. Third, another participant eventually
was successful in placing an order. However, they could not edit or
update that order. For example, while observing
the participant trying to order some food, it was noticed they wanted to add
an additional ingredient to the dish. There was no ability to
do this on the website. Finally, in another observation, the participants filled out all of
their information on the sign up form. However, they could not complete
the order because of an error. They tried numerous times and
kept getting a validation error. This was displayed only after they
had entered in their information. Once again, they abandoned the task. You can explore these results in more
detail in the additional readings. They contain valuable
information about user research. Make sure to check them out. If you design without conducting user
research, you end up making assumptions about your customers,
which may cause your product to fail. Something that may seem logical to you and
your experience and at the time of creation may prove
unusable to another person. Remember the stages of the UX
process you studied earlier? Designers empathize,
define, ideate, prototype and test. Well, the importance of empathy and
testing cannot be overstated. In this case, the ordering process
proved almost impossible for the test participants to use successfully. This is great data for you to use in
framing problems and ID8 in solutions. You can illustrate your
participants experiences through a customer journey map. It presents the steps someone
takes to complete a task. You can identify their emotions along
the steps as you track the UX goals. Let’s explore a customer journey map,
illustrating their experience. Keep in mind that you should keep
a record of the user’s interactions and reactions as they perform each task. The customer enters the website and
selects her meal. She wants to customize her order. She realizes she cannot. She abandons and
picks up the phone to call Adrian. From the top-down of the customer journey
map, you can list the customer’s name, image, scenario and expectations. Next, you can list the steps
she is trying to complete and track her thoughts and feelings,
enter the website, select and customize her order at her details and
pay. As she goes along, the journey map
captures what she does, what she thinks, says, and what her feelings are while
interacting with the website. In the end, you have a useful set of
takeaways that can help you empathize with the user to improve on your redesign. In this example, you are presented with
data from two user research methods, interviews and observations. In this video, you identified how to
use data from user interviews and observations and use this feedback to
prioritize key takeaway opportunities to create your design. You also explored
a customer journey map and how you can use it to
visualize your customer tasks. Make sure to cover the additional readings
to learn more about user research, interviews and observations. They will better prepare you to
redesign the Little Lemon website.

Is the persona a real person?

No

The user persona is a fictional character profile that represents the main clientele of a company. It’s a realistic model of the people you are seeking to assist.

Now that you have the findings from user research, interviews, and observations, you
can start working on the stages of the UX process. You may remember
from studying them earlier that they are empathize, define, ideate,
prototype, and test. By combining the information gathered from all
users interviewed, you will learn how to
develop a persona which will guide your decisions and
the UX design process, beginning with the
empathize stage. In this video, you will identify some of the
tools available in user research and
describe their role in the empathize stage
of the UX process. A key tool in the
empathize stage of the process is the user persona. The user persona is a fictional character
profile that represents the main
clientele of a company. It’s a realistic model of the people you are
seeking to assist. It guides designers
away from making assumptions and
encourages solutions, ground an empathy for
this fictitious user. Although this user
is fictitious, it is based on traits from user interviews
and observations. Think of a persona as a mixture of the
research participants. UX teams can create multiple
persona’s to solve for. It depends on the size of the project and the results
of the research data. In this case, two user
personas were created. One for a typical
returning customer and another for a new customer. Let’s explore one of them. Her name is Tilly, she is 60
years old and loves food. She lives close to the
Little Lemon restaurant. She loves their vegan
penne carbonara. She likes the convenience of ordering food for
delivery so she can enjoy it at home while watching her favorite TV
shows and movies. She orders for delivery
from her phone. Tilly likes things that work. She doesn’t mind
spending extra money on a product that
she knows will work. She’s on social media to keep in touch with
friends and family, but still find some websites and apps very frustrating to use. Let’s check Tilly’s persona. At the top there is a
photo Tilly’s name, age, gender, occupation,
and technical ability. Next there’s a one liner that
describes what Tilly does, loving aunt, great
friend, bad Gardner. On the right, there
is a short bio too. Next there is a
core needs section and a frustration section, listening Tilly’s goals and
describing frustrations as the barriers
that are stopping her from achieving those goals. This section reveals that she
can get easily frustrated. It’s worth noting that this is a light qualitative persona. There are different
types and you can read more about them in the additional resources
where you will also find a link to a persona
template created in figma. Next you will explore an empathy map that
has been created. Tilly is positioned in the
center of the empathy map, which is divided
into four quadrants describing what she says, thinks, does, and feels. Empathy maps, which are neither chronological
nor sequential, offer a glimpse into a
user’s character as a whole. The empathy map helps
you get to know Tilly better and put
yourself in her shoes. You’ll also find an
empathy map template in the additional resources. Finally, a scenario
was created for Tilly, which will help you
solve her problems. Remember, you’re
empathizing with Tilly, not redesigning
anything just yet. These tools help to create
the following scenario. Persona: Tilly, goal;
eat her favorite meal. Want; order a vegan penne
carbonara for delivery. Needs; access the site, select and customize her order. Resolution; input her details, pay for, and track her order. In this video, you’ve
identified some of the tools designers can use in the empathy
stage of the UX process. You also learned how to
describe their role in the empathize stage
of the UX process. Remember that it’s important
to set your thinking around the users and not
yourself by not assuming things about
your customers. This approach will
help guide you as you improve the
Little Lemon website.

I would say user
research can be one of the more frustrating
parts of the process. If it means that
you’ve have to change an idea or a product
that you’ve developed. But it’s also one of the
most rewarding pieces of the process because you’re seeing how your product actually impacts real people and it puts meaning to
your work as well. My name is Katie and I’m a Software Engineer on the
React Apps team at Meta. Me and my team work on building new features for facebook.com. User research is a way of collecting quantitative
feedback about how a product is fulfilling
user needs and how understandable it
is to an end-user. Users are the people
who are going to be interacting with
our products every day. We really need to make sure that we’re fulfilling user needs. The best way to do that is
by conducting user research. We collect user research through A/B testing, through surveys, through observing users
actually using the product, and by creating
personas as well. There’s a lot of
different techniques for user research and
we actually have user researchers at Facebook who are conducting it
nearly every day. User research is integral to the quality of
products at Meta. We conduct user
research as we’re starting to think around
the idea of a product, as we’re building a product
and releasing an MVP and even after we’ve launched a
product to make sure that it’s still
fulfilling user needs. We should collect user
feedback early and often just because we tend to pivot on the direction
and the look and feel of our products
based on user feedback. I would say designers
and PMs and user researchers tend to be involved in the
user research process. User researchers are the ones actually conducting
the research. They’re the ones asking
questions to users, conducting surveys,
having the user actually use a product and writing down their
feelings about it. Designers and PMs are more involved in the response
to user research. They’re collecting this
user feedback and they’re seeing what they need to change
about a certain product. It’s been really
surprising to me how much user research can influence the direction
of a product. I remember me and
my team built out a new groups feature
and we had just worked on the MVP and we
were giving it to a group of group admins to actually
come and use the feature. We actually ended up
changing a lot of things about this new feature after we collected
user feedback, even down to the
name of the product. It made sense to us, but it didn’t really make
sense to our end-users, so we really had to take a look at the direction of this product. I think one of the
biggest challenges that I faced as an engineer, hearing the results
of user research is seeing how it defies
your expectations. As an engineer, it can be really difficult to change really
big aspects of your product, especially features that
you’ve already built out. I think it’s
important to conduct user research early
and often just so you’re not dealing with the thrash of having
to completely overhaul your products because it doesn’t fit with the users like
you thought it would. It can also be super
rewarding though, because sometimes you show your product to users
and you realize how much value an individual
person gets out of your product and it really puts your work in
perspective too. User research is a great way to hear how a feature that we build is actually impacting
real people who are using it on a
day-to-day basis. It’s really cool to
hear personal anecdotes about how a feature
has positively impacted a group or
community and it really brings a human aspect to the work that I do every day. I think user research is a really important part
of the design process. You should really think about
the questions that you’re asking and try not to bias user research toward what you think a
product should look like. It’s good to get open, honest answers from
users because that will allow you to change and develop your product in a way
that will actually fit user needs at the
end of the day. In that way, you haven’t built
and launched your products that no one’s going
to use or understand.

Congratulations, you completed this module on
introduction to UX and UI. In this module, you explored
the basics of UX and UI and started studying
about user-centered design. It’s now time to recap
the key points and concepts you learned and
the skills that you gained. You began the module with a general introduction
to the course. After you completed
the first lesson, you are now able to
differentiate between UX and UI and identify career options for the UX and UI disciplines. After you covered an
introduction to UX and UI, you progress to lesson 2, where you focused on UX. In this lesson, you
learned to define UX and identify the key
stages in the UX process. Now, you’re also able to discuss UX goals and identify the
usability quality components. They are learnability,
efficiency, memorability, error,
and satisfaction. Still in lesson 2, you covered an overview of the UX process where you
recognized each of the stages, empathize, define, ideate,
iterate, and test. After studying UX, you are
ready to learn more about UI. In lesson 3, you learn to explain the concepts of UI
and describe its history. You also learn to identify
applications of UI, recognize the importance
of successful UI design, and explain different types of design, including
interaction design, human-centered design,
universal design, and design thinking. In addition, you’ve got
an introduction to Figma, the design tool you
explore in this course. After an introduction to UX, UI, and Figma, you covered
user-centered design. In this lesson, you use data
from customer interviews and observations to
better understand their issues while using
the little lemon website. In this process, you explored
a customer journey map and reviewed a persona in the empathy stage
of the UX process. You now have an initial
understanding of UX, UI, and user-centered design. You can explain the
differences between UX and UI and recognize the importance of
putting the customer in the forefront of your decisions as you work on your redesign. That’s a great start to
your UX and UI journey. Well done.