by Nirupama G

Do we really think we need to apply engineering into user experience? Why Not?

User Experience Engineering is more than Usability Engineering. We often confuse ourselves thinking that an easy to use intuitive application is good user experience. No! Its just good usability. Usability engineering is just a layer that influence User’s experience, but User Experience Engineering is a bigger picture which comprises of Visual Design, Interaction Design, Information Architecture and Content Strategy.

In this article, I have written about the Design Thinking process, building mood board, Design System and the best practices.

The Design Thinking Process: How to get Started?

Sometimes, the toughest part of a new project is to get started. But there are few common things that everyone should do to get started which will hopefully result in efficient use of time, and a better result.

UI Concept

The first stage of Design Thinking Process is to gain understanding of a problem you are trying to solve. This can be done by interacting with the experts to find out more about the area of concern through observing, engaging with people to understand their experiences.

In this stage, a substantial amount of information is collected for use in the next step and to develop the best possible understanding of the users, their needs, and the problems that underlie the development of your product.

User Research

We need to start thinking about our users. We need to look at all the requirements and list out the questions and the clarifications we have and hand it over to the Users. We will get more ideas from the users, which will help to build the product better.

User persona

“Personas are fictional characters created to represent the different user types that might use a site, brand, or product in a similar way.” Wikipedia

In simple, Personas are composed on the basis of the data that you are interviewing, testing and analysing typical users. The main purpose of making them is to define the most common need of our customers.

A User Profile / Persona describes the goals, expectations and motivations of real people.

  1. We need to know why they come to our site.
  2. What are they looking for?
  3. What makes them nervous?
  4. What are their pain points?

Sample Template of a Persona

Bio: It should be a short paragraph to describe user journey.

Goals:

  1. The Goals the user hopes to achieve
  2. A Task that needs to be completed
  3. Experience to be felt
  4. Value to be achieved

Frustrations:

  1. The frustrations the user wants to avoid.
  2. The obstacles that prevent the user from reaching his goals
  3. The Product or service that currently does not exist.

Mood boards:

As designers, we aim to optimize and speed up our process. The idea from Atomic Design is to allow UX designers, UI designers and front-end developers to work in parallel instead of a waterfall process.

A mood board is one of the visual deliverables in the design process. It is a collage that generally consists of images, text, and objects that describes the feelings we obtain through the digital products aside from the actual layout of pages.

So, how to do it?

The first thing we need to do is evaluate the project and we should pick the mood board style which will best suit our product. There are many ways in presenting a mood board. We need to select the Refined template mood board where we can have different elements for colours, buttons, icons etc.

Based on the theme, we need to further collect screenshots, photos, colour swatches, and we should not only investigate the things which are pretty and but also collect the bits and pieces which might help to accomplish the goals for our product.

So now, you may think what’s the benefit of creating this Mood board?

  1. Create Mock-ups faster, based on the client needs. By preparing this mood board, it will help to create a visual guide with a clear vision, and it will also be very easy to jump into visual design once this is finalized.
  2. Client participation is very important in all projects. So, mood boards will make it clear to them that we are listening and considering their inputs.
  3. Mood boards are so much fun, they will reduce the frustration and there won’t be any limitations in the layout for the elements we select.

Wireframes

The logical place to start the actual design process is with a rough wireframe.

Wireframes are the visual representation or a skeleton of any project structure. It will define the bones and the elements that will work in our layout and will let us know the placement of the content in our prototype.

We need to be clear about our project targets and develop them through wireframing by using simple elements.

We need to start the wireframing with paper and pencil which makes a lot of sense. It will help the concepts to flow easily and It will be easy to make the changes after we discuss with team.

Design / Prototype

So once the Layout is finalized, the next step will be to work on the final graphics.

To build a high-quality design, we need to start building the high-fidelity designs with the ideas we got from the Mood board and the low fidelity wireframes.

What tools to use?

To explore on various ideas, basic pencil drawing is enough but for high fidelity designs, the tools that can be used are Adobe XD or Sketch. We need to move all the Wireframes to Adobe XD and bring that to your team or real users, do some tests, and test how they react and what feedback we get and create a new design based on their feedback and take it to the user again.

As per the Design Process, UI and UX needs to agree with each other. UI is about beauty, UX sometimes has a different approach. So, we need to be very strict with colours, fonts, padding etc.

So here the Design System plays a very important role, and it also needs human effort to maintain that, and to be updated daily to bring all the UI consistently.

What is a Design System and why we need to create a Design System?

A Design System is a set of Components guided by clear standards, that can be assembled together to build any number of products in different combinations. So, in short, its reusable, scalable, shared among teams, and it follows certain standards.

Are you sure it’s called a “Design system”?

It has many names. Brad Frost calls it “Atomic Design”. AirBNB Calls it “Design Language”. So, the Industry is still finding out a name which can also be called as Pattern library, User Interface library etc.

Are Design Systems Synonymous to Style Guides?

Style Guides mainly focus on Style which includes Styles, colours, fonts and logos and brand attributes.  Design system is more than just visual presentation which focuses on ecosystem.

Conclusion:

The main objective of each UX design process is the equivalent – make incredible UX for your clients. To be successful in the current digital market, we should concentrate on the User Experience.

So, in a nutshell, UX design should consider the Why, What and How of Product Use.

The Why involves the user’s motivations for adopting a product, what addresses the things that people can do with a product and its functionality, and finally, the How relates to the design of functionality in a pleasant way which overall will form the meaningful User experience.