Laws of UX

A collection of psychology heuristics that designers can consider when building user interfaces.

Client
Self-Initiated
Role
Design & Development
Timeframe
Ongoing
Laws of UX

Challenge

As humans, we have an underlying “blueprint” for how we perceive and process the world around us, and the study of psychology helps us define this blueprint. As designers, we can leverage psychology to build more intuitive, human-centered products and experiences. Instead of forcing users to conform to the design of a product or experience, we can use some key principles from psychology as a guide for designing how people actually are. But knowing where to start can be a challenge. Which principles from psychology are useful? What are some examples of these principles at work?

research

Examples of psychology related resources that can feel somewhat inaccessible to designers.

Solution

Make complex psychology heuristics accessible to more designers through an interactive resource that collects those that are relevant to user experience design and presents them in a visually engaging way.

Inspiration

I began this project by collecting inspiration. During this time, one source of inspiration kept surfacing: vintage psychology book covers, specifically those published by Penguin Books. I was impressed with how these covers managed to communicate complex psychological concepts simply through the abstraction of color and shapes. These book covers informed the design approach and general aesthetic I would adopt throughout the project.

inspiration

Examples of vintage psychology book covers that provided lots of design inspiration.

Wireframes

Paper wireframes provided a way to quickly explore content structure, content choreography and layout variations.

wireframes

Paper wireframes used to explore ways to content and layout.

Design Exploration

UI exploration centered around how to communicate complex psychological heuristics through the use of color and shapes. The visual language of the website would evolve based on the language of the ‘covers’ that represented each heuristic.

design-exploration

Early design exploration that helped to evole the visual language of the website.

UI Highlights

The visual language established was the result of reduction and refinement with a goal of representing each heuristic in the simplest way possible. This language was then used to inform the design of the remaining UI.

ui_hero

Each heuristic is represented through the use of simple color and shapes.

Home Page

ui_detail

A summary of each heuristic is provided on the home page so users can quicly scan through them.

Detail Intro

ui_intro

An introduction of each heuristic is available once it’s selected.

ui_content

Key takeaways provide high-level guidance, while information on the origins and further reading provide valuable information so designers can learn more.

posters

Each heuristic has a corresponding print-ready poster that can be directly downloaded. The purpose of these posters is to help spread awareness and promote conversation around these heuristics.

Impact

The project was well received by the design community for making complex psychology laws accessible to more designers.

  • 1M+ page views since launch
  • 800K+ sessions since launch
  • Significant poster downloads
  • Awarded Site of the Year by UX Collective in The State of UX in 2019