Tasteful Product Design: What I Learnt from Her (Part One)

In the process of building Membr, I was influenced and learnt a lot from two pieces of art, the Spike Jonze movie Her and Tim Soret’s game, The Last Night (saving that one for a separate post).

Her(Left), The Last Night (Right)

Her is a movie that feels fresh every time I watch it. Its premise is on an introverted writer who buys an AI System to help him write but ends up enthralled by the system’s ability to learn and adapt, so much so, that he falls in love with it.

The world-building and design of Her is meticulous, but the everyday technology (or lack thereof) of the near future it depicts, is where it really shines. I could wax lyrical about the technology in Her, but I’ll save that for another post. Here’s the tl;dr on things I picked up:

Technology Is Present But Receded

The near-future setting of Her shows slightly advanced technology being a part of daily life but as a background player. A good example is Theo’s phone, a simple foldable with an art deco look, it’s functional but not ubiquitous.

1. Theo’s Phone | 2. No keyboard, Theo uses voice to interact with his computer, phone and gaming device.

Software is presented as a concierge experience. It’s there when needed and out of the way when not.

Design Should Have Purpose

Speaking to Pushing Pixels, Geoff McFetridge who was part of the design team on Her, echos dieter Rams when explaining his philosophy on good and bad design and how design should have purpose:

My belief is that web design is not about design, but rather about programming. Craigslist is beautiful because it’s so close to the function, with nothing in its way. To speak about Craigslist is to speak about the space in between good and bad design. I like when I’m closer to the thing, and you get there when it speaks to you. — Geoff

Interactive voice experience

Technology Should Have Aesthetic

aes·​thet·​ic | \ es-ˈthe-tik :
A particular theory or conception of beauty or art
- Merriam Webster

Some of the aesthetics that drive product design in Her are:

a) Minimalism
A lot of the technology in the world of Her is simple yet sleek. It’s characterized by geometric shapes that blend well with everyday products, giving the aforementioned Art Deco look.

The devices in Her have an Art Deco look

b) Micro-interactions
As evidenced in the OS 1 user interface. The animated interactions make the UI feel alive and not static or 1-dimensional.

1) OS 1 Loading 2) Cleaning the mail box

Membr’s micro-animations.

c) Muted Colour Palette
The color design of Her is dominated by muted colors (no pun intended). Everything from fashion, architecture and interior design to everyday products have a muted color palette. According to UXMag:

Muted colors have come to represent modernity, the contemporary, progressiveness, and efficiency. They represent what is new, and convey to viewers that the substance upon which they are looking has relevancy and isn’t out of date. — UXMag

This trend is already prevalent in today’s product design:

Today’s Product Design Trends

Good Design Is Like Great Story Telling

I believe the landmark of great storytelling is being able to effectively create a deep connection (emotional or otherwise) between the subject matter and the audience. And Her delivers on that, a believable future. Everything from the world-building and design, pacing and acting, all work together to deliver on that.

Great storytelling is the driving motif that still influences the design of Membr. That’s why the pre-design phase was the most critical (and enjoyable) stage in the building process. I spent a lot of time mood-boarding ideas and then prototyping them in Figma.

Initial Prototypes

And that wraps up Part One, but before you leave check out the Membr Beta. We’re fast approaching the release of Version 1 in May and the beta is a great way to help me further refine the product and build more useful features.

Thanks and see you in Part Two!