Tiny Guide to UI/UX

The official definition of User Experience (UX) is "A person’s perceptions and responses resulting from the use and/or anticipated use of a product, system or service.” (ISO 9241-210:2010, subsection 2.15). In simpler terms, making the experience if the user interacts with the product as best as possible.

UI / UX Design Process

💡

The UX design process can be divided into four key phases: user research, design, testing, and implementation. While the UX design process does typically take place in that order, it’s important to note that UX is an iterative process.

Phase-1: Understand

💡

The starting point for a UX design project. Research teaches us about the users, their behaviour, goals, motivations, and needs.

Phase-2: Ideate

💡

The next step in the UX design process is to create wireframes and prototypes. This gives you something tangible to test on real and potential users, which is crucial in making sure that your designs can be developed in full scale. In this phase, UI designers will comeup with multiple iterations test their viability and how users interact, gain valuable feedback and put the feedback to work in next phase of the process.

User Flow

Complete guide to user flows - your map to UX success

Imagine you're a builder, standing beside a foundation. Your boss hands you a bunch of bricks and a cement mixer and says "just build something cool with those...". No blueprint, no layout. How many houses have you been in where you had to enter through the bathroom, then out into the garage, into the bedroom and into the kitchen?

https://www.justinmind.com/blog/user-flow/

The How (and Why) of User Flows

The ability to create and think in user flows is one of the most important skills in a UX designer's toolkit. What's a user flow? Why do we make one? 👩🏻‍💻 Increases our awareness of the user 🎯 Helps us focus on the user's tasks 🧱 Sets a foundation for other work ⚠️ Supports troubleshooting 👥 Improves team communication Great, and how do we make a user flow?

https://uxtools.co/blog/the-how-and-why-of-user-flows/

Wireframing

The Design Sprint - GV

The sprint gives teams a shortcut to learning without building and launching. The sprint is a five-day process for answering critical business questions through design, prototyping, and testing ideas with customers. Developed at GV, it's a "greatest hits" of business strategy, innovation, behavior science, design thinking, and more-packaged into a battle-tested process that any team can use.

https://www.gv.com/sprint/

The Guide to Wireframing - For Designers, PMs, Engineers and Anyone Who Touches Product. Free E-book By UXPin

User experience remains a priority for digital platforms and products. We will be taking a closer look at the power of wireframing and the examples, comparisons, frameworks, references and insights to help you better utilize wireframes in your product and development process.

https://www.uxpin.com/studio/ebooks/guide-to-wireframing/

Rapid Prototyping

Perfect Your UX Design Process - A Guide to Prototype Design

The process of prototyping-from creating simple wireframes to testing fully functional mockups-is one of the most potent and powerful set of skills any designer can master. It's also fraught with peril in workplaces where the process is skipped in lieu of just "designing a prototype" as a simple deliverable to give to the next department to build.

https://www.toptal.com/designers/prototyping/guide-to-prototype-design

The ultimate guide to prototyping

Prototypes are a UX designer's best friend. They provide an extensive list of benefits to product development teams, clients and users. Prototypes are a close replica of what the end result of a product will look like, usually without code. They incorporate most of the final UI design and interaction that the finished product will have.

https://www.justinmind.com/prototyping

Phase-3: Test

💡

Testing is a core part of the overall UX design process. UX designers test because it allows them to improve upon the original product or site design and to see if the changes they made during the ‘design’ phase stand up to scrutiny. It’s a great way to eliminate problems or user difficulties that were unforeseen in the design phase before getting started on the implementation phase.

Usability Testing

Usability Testing 101

Usability testing is a popular UX research methodology. In a usability-testing session, a researcher (called a "facilitator" or a "moderator") asks a participant to perform tasks, usually using one or more specific user interfaces. While the participant completes each task, the researcher observes the participant's behavior and listens for feedback.

https://www.nngroup.com/articles/usability-testing-101/

What is Usability Testing? (and What it Isn't) | Hotjar

Usability testing is all about getting real people to interact with a website, app, or other product you've built and observing their behavior and reactions to it. Whether you start small by watching session recordings or go all out and rent a lab with eye-tracking equipment, usability testing is a necessary step to make sure you build an effective, efficient, and enjoyable experience for your users.

https://www.hotjar.com/usability-testing/

Card Sorting

Card Sorting 101 - Comprehensive Card Sorting Guide | Optimal Workshop

Throughout this 101, we'll illustrate how card sorting works with a project we created for this purpose. Our fictional news website The Wellington Daily is a magazine-style website that combines the latest news with opinion pieces and musings on culture and the future.

https://www.optimalworkshop.com/learn/101s/card-sorting/

How to Conduct An Effective Card Sort: A Comprehensive Guide

Card sorting is excellent for understanding mental models and how people categorize information. It also serves as a way to visualize the skeleton of a website or app. However, as with many qualitative user research techniques, many questions arise when creating one. Card sorting can be an extremely subjective process.

https://dscout.com/people-nerds/card-sorting

Surveying

28 Tips for Creating Great Qualitative Surveys

8 Summary: Qualitative surveys ask open-ended questions to find out more, sometimes in preparation for doing quantitative surveys. Test surveys to eliminate problems. Qualitative surveys ask open-ended questions to find out more, sometimes in preparation for doing quantitative surveys. Test surveys to eliminate problems. Sooner or later, most UX professionals will need to conduct a survey.

https://www.nngroup.com/articles/qualitative-surveys/

Heuristic Evaluation

Heuristic Analysis for UX: How to Run a Usability Evaluation

Design is an investment, not an expense. At the risk of stating the obvious: It's not enough to design a nice-looking product; it also has to be usable, and if you are to extract the largest ROI from a product, its usability - which generally refers to ease-of-use - takes on a vital importance.

https://uxdesign.cc/heuristic-analysis-for-ux-how-to-run-a-usability-evaluation-12c86d43936f

Heuristic Analysis for UX - How to Run a Usability Evaluation

Read the Spanish version of this article translated by Yesica Danderfer Design is an investment, not an expense. At the risk of stating the obvious: It's not enough to design a nice-looking product; it also has to be usable, and if you are to extract the largest ROI from a product, its usability-which generally refers to ease of use-takes on a vital importance.

https://www.toptal.com/designers/usability/usability-analysis-how-to-run-a-heuristic-evaluation

Diary Study

dscout.com

https://dscout.com/people-nerds/diary-study-guide

Diary Studies: Extending your UX research

Experience design expert Jodie Moule explains exactly what a diary study is and provides us with pro tips about how to run one successfully.-- Can't get enou...

https://www.youtube.com/watch?v=0awvMAcON-w

Phase-4: Implement

💡

The grand phase of development and roll-out. Work alongside with the dev teams to provide design insights and develop functional products that users love!

Design System

Design Systems Handbook

This book guides readers through best practices around planning, designing, building, and implementing a design system, with insights and first-hand experiences from experts who have gone through the journey. Available in ePub, PDF, audiobook and print formats. 01 Introducing design systems Marco Suarez covers basics of component-based design, misconceptions, and enabling design at scale.

https://www.designbetter.co/design-systems-handbook

Starting a design system in a start-up

In order to get a bird's eye view of all the use cases we need to cater to, it is important to audit existing components in our product. Yes, every single component on every page. This is a crucial step albeit a tedious one. For this, we took screenshots and used Trello to organise them.

https://uxdesign.cc/starting-a-design-system-in-a-start-up-3359f2d4784b

Accessibility

Designing for accessibility is not that hard

Digital accessibility refers to the practice of building digital content and applications that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech...

https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94

For

Form design best practices

These best practices serve to provide a shorthand when designing forms. Make sure to always keep in mind your context to determine the best presentation. Like most things in design, there are often exceptions to best practices. Here are the form elements I created to illustrate concepts in this article.

https://medium.com/nextux/form-design-best-practices-9525c321d759

Web Form Design: UX Strategies and Best Practices

Become an expert in the intricate process of building a website form whose UX delights customers and increases conversions.

https://elementor.com/blog/form-design-ux/

Information Architecture

An Excellent Beginner's Guide To Information Architecture

If you've heard about UX design, you've probably come across information architecture, or as it's often written for short 'IA'. Maybe you're attracted to IA because you enjoy solving problems, or you have a natural talent for organizing complex information in a clear and logical way. The world certainly needs information architects.

https://careerfoundry.com/en/blog/ux-design/a-beginners-guide-to-information-architecture/

The Comprehensive Guide to Information Architecture

As a standard part of the UX process, designers create information architecture when building products. Defining every avenue and path that users can take through an app or website, information architecture is much more than just a sitemap to show what page leads where.

https://www.toptal.com/designers/ia/guide-to-information-architecture

User Onboarding

Improve User Onboarding with Jobs-to-be-Done Insights

A great onboarding experience is one that proves to new users that your product will help them do the job that they want. To put it another way, the ideal onboarding experience is a short, easy and frictionless path to finding value. Of course, many products have unavoidable complexity.

https://www.intercom.com/blog/four-forces-user-onboarding/

Improve User Onboarding with Jobs-to-be-Done Insights

What is User Onboarding? | Pendo.io

User onboarding is the process by which new users become proficient in an application. User onboarding encompasses the initial experience in the application, online or offline training, goal-setting, and the organization's customer success process. Onboarding happens whether the experience is curated or not. Companies that prioritize the onboarding experience can make their users proficient much more quickly.

https://www.pendo.io/glossary/user-onboarding/

5 Examples of the Best User Onboarding Experiences

Product teams put a lot of time, thought, research, and effort into creating clever products that meet vital user needs. Excited by the new product, many users download or otherwise engage with it. But sometimes, very few people convert from interested downloaders to active users.

https://userguiding.com/blog/user-onboarding-examples/

Collaborative Templates in Miro

Miro Templates Library | Pick from 200+ Templates

Try our ready-made templates to help your team collaborate more quickly and efficiently. Discover the proven workflows, projects, and frameworks of the Miro community - or publish your own! More templates from the community Discover the proven workflows, projects, and frameworks of the Miro community - or publish your own!

https://miro.com/templates/

🖌️

UI/UX Tools

Default view

Tool

Tiny Guide to UI/UX