Methods of UX Design – Overview


Have you already my post about ‘ What is UX? What are UX Research and Design? ‘? Or maybe you know what is User Experience, so you read first this overview of ‘ Methods of UX Research ‘. This third post complete notes I took during the MOOC ‘ Introduction to User Experience ‘ delivered by the edX platform. We focus there on the methods to produce a plan or a prototype of what will be the final product or outcome.

There is also a quiz with 10 questions to assess your knowledge about this topic.

1) What is UX Design?

Design is not the final product, not the income, but it is a plan for producing that product or that outcome. And it is a plan for arranging elements and those elements will depend on the type of product it is.

A design is a plan for arranging elements to accomplish a purpose. So, there is a purpose that this design is supposed to accomplish and it is supposed to help the users, or the consumers of the design to accomplish.

And ultimately, a design is mostly about how it works and the functionality, and not just about how it looks. Of course, it also includes what it looks like and what it feels like.

What is design?

Design is solving problems.

Quote from Bryan Lawson:

“Design is as much a matter of finding problems as it is soling them”

(How Designers Think)

It is also about articulating problems in such a way that you can understand what the form and the criteria of a solution ought to be.


The Design Process

  • understand the problem
  • generate possible solutions
  • analyze solutions and select the most promising
  • embody solution: to build some kind of a prototype that can be used for really understanding how this solution should work. And that can also be used for assessing whether or not we are moving along the right track
  • assess (find new problems): one’s that you missed the first time around (important requirements or constraints)
  • … and repeat!



What is special about UX Design?

Experiences are interactive:

  • time-based
  • action-response rules
  • action: command options
  • response: information presentation
  • complex system behavior (focus on usability)

Context is critical: understanding how and when and why people are using and interacting with our systems:

  • other interactions
  • other activities
  • what other people are involved


The UX Design Process

  • Understand the problem –> Study users: tasks and context
  • Generate possible solutions –> Sketch, storyboard, wireframe
  • Analyze and select –> Apply UX criteria
  • Embody solutions –> Build prototype
  • Assess (and find new problems) –> Apply UX Research methods (like users testing)
  • … and repeat! –> … and repeat!


2) Prototypes

A prototype is…

A representation of a design, made before the final solution exists.

(Bill Moggridge)


Why do we prototype in UX?

  • reification: to make something real or make something concrete so that we can test ideas and figure out if they are going to work.
  • reflection: we can reflect on whether (prototypes) are meeting the design goals that we have, or whether they are taking us in a different direction.
  • communication: we can bring other stakeholders into the conversation to figure out if the design idea is going to work.
  • assessment: it facilitates performing user tests or getting feedback from users.


Prototypes have many forms

A “representation of a design” can mean a:

  • verbal description
  • sketch
  • storyboard
  • navigation / flow diagram
  • video
  • physical model
  • formal specification


In UX we are talking about a representation of the system as it will be experienced by end users. And we typically produce prototypes at multiple levels of fidelity, from low fidelity to middle fidelity, to high fidelity prototypes as the design process progresses.

low-fi, mid-fi and hi-fi prototypes

=> Low-fidelity prototypes ignore things like graphics, like the colors and fonts that are going to be used. They don’t involve any programming.

low-fi prototypes

They’re often made on paper so that they can be created cheaply and thrown away when they’re not needed anymore. And they don’t use real data as a result.


mid fi prototypes

=> These prototypes would address all of the concerns that lo-fi prototypes address like functionality and task flow, but start to also look at concerns like the layout, how specifically are all of the different fields and controls going to be laid out.

They might start to address some of the issues of interactivity, so how it actually feels to interact with the system, and how you navigate from one part of the system to another.

hi fi prototypes

=> Then, towards the end of the design process, when we are pretty sure we have the basic idea of the design right, we would produce high fidelity prototypes, which would tackle some of these concerns that we have a thrust in the meeting low fidelity prototype like graphic design, some more interaction details like maybe animations. And more realistic data that would map what users would actually be interacting with.


Still a high fidelity prototype is not the final product. It would probably not involve the backend programming that would be required. And it might not have complete functional coverage, it would be focused on the task that that particular prototype is supposed to accomplish. Whether that’s to support a user test, to support communication with stakeholders and so forth.


Economic principle of prototyping

The best prototype is the one that, in the simplest and most efficient way, makes the possibilities of a design idea visible and measureable.

(Lim, Stolterman, and Tenenberg)

So early in the process, you are concerned with functionality and task coverage and you are less concerned with the details of how it is going to look and feel. Later in the process, after you have established the basic functionality, you are going to be more concerned about those issues. And that is why we progress through different levels of fidelity as we prototype.

The main reason that we do this is we want to avoid premature commitment which is:

  • investing resources (time, money) in a dead end
  • problems:
    • waste money and effort
    • exhaust project resources/timeline, stuck with a bad design
    • cognitive and emotional commitments hard to undo


Lo-fi prototyping maximizes the number of times you get to refine your design before you commit to code.

Lo-fi prototyping uses lightweight materials that are quick, cheap, and easy to change.


What happens before prototyping?

a) Assess:

  • current needs
  • establish guidelines and constraints
  • personas, scenarios, user stories, requirements

b) Design:

  • ideation
  • sketching
  • selection
  • synthesis

What happens after prototyping?

1) new assessment

2) redesign

3) more prototyping

and so on… (iteration)


3) Quiz

Did you perform well on the other quiz like ‘ What is UX? ‘ or the one about  ‘ Methods of UX Research ‘? So now, have a try with this quiz about ‘ Methods of UX Design ‘ that includes 10 questions.

Leave a Reply

Your email address will not be published. Required fields are marked *