UX thoughts from a lighting designer
Fun fact — I’m a startup CEO and I have an art education.
The cool part of having an art education is that while it can mistakenly sound like I’m good at crafting and glitter glue, I’ve actually been professionally trained to solve problems about narrative and perception.
Now — working on our digital products — I’m discovering a lot of similarities between designing our app UX and lighting design.
LX (or stage electrics) is what’s written on my MA degree — time to put it in use again!
For years I worked on designing illumination patterns for the stage and other spaces. In this previous life my job was to observe processes (actors on stage) and behaviours (people in offices, apartments and public spaces) and decide the most appropriate way to set up luminaires and lighting instruments for the situation at hand.
And many parts of UX can be described with the same words.
A core rule to recognise good lighting (and I’m not speaking about special effects and fireworks) is that it’s best when you don’t notice it. Good lighting is pleasantly present, doesn’t bother you, doesn’t draw attention. It lets you navigate through the room and easily see the objects and people in it.
Good UX does exactly that. You’ll travel through the functions and features without giving them much thought, and your eyes are guided to the objects you’re supposed to look at.
Here’s a blast from my past about the 101 of lighting design. Maybe it’ll resonate with you if you’re working on UX as well.
Layers of lighting
Layers of lighting is a core theory for interior illumination — how to create functional lighting in a home, office or public building.
- Ambient lighting
This is the general illumination that should provide sufficient lighting to make sure there’s no thorough darkness in the room. We cannot guarantee that an area will never be used for any activities (users are very inventiva!), so there needs to be at least a little bit of light everywhere.
In LX (lighting design), this is usually covered with the presence of windows, and mounting large luminaires in the ceiling or walls. The goal is to cover most of the space with diffuse light that isn’t super strong and doesn’t cast much shadows.
In UX, the equivalent could be the general clarity and structure of the design. Keeping the obvious stuff in plain sight, or behind menus that make sense is what makes sure there are no dark corners.
2. Task lighting
For focused activities, more illumination is often needed. Additional illumination is often needed for working desks, kitchen counters and reading chairs.
In LX, the solution is pretty straightforward — take a lamp and point it at the area that needs the extra kick. Spotlights and desk lamps often allow users to configure the direction of the light and adjust according to the current need.
As a designer, I would often recommend portable floor lamps for private houses that were still in construction — the residents would not know to express their needs before the house was ready and in use. But by that time it was too late to change the electrical plan and permanent installations.
For digital products, UX lets you make changes even after the users have moved in. If the tasks at hand are not illuminated enough, you can push fixes or give your users the options to customize their settings — move their own floor lamps around and highlight the tasks and activities that were most important to them.
3. Accent lighting
Often misinterpreted as lighting effects, accent lighting is a wonderful source of clarity and safety, as it underlines the peculiarities of the space we are in. By highlighting decorative objects or architectural features, we’re giving the LX users signs of proportion and distance. A wall with highlights tells us “this is where the room ends”. Decorative wall lamps pace the distance and give us a visual clue about the length of the corridor.
Digital UX needs to do the same. We can include visual elements that tell us where sections start and end. We can annotate the expected length of content so that the users aren’t kept in the dark about whether they’re currently in a warehouse or a broom closet.
From stage to startup
Over the last couple of months I’ve been studying about the basics of digital UX. Our startup is a small team, and we cannot afford to hire an UX designer. I used to think this was a problem. Now I’m convinced otherwise.
- DIY hacking is absolutely worth it
After a few months of learning, trial and error, I’ve been able to really help my team. I now believe that if hiring a professional and skilled UX person would have upgraded our product design by 100%, I’ve been able to make a change of at least by 60%.
When I started, I thought I’d maybe make an impact of 10%. Now I’m convinced that even my DIY processes and prototypes have caused a major upgrade, and have been absolutely worth it.
Yes, I am lucky to have the previous experience of how to design things and use graphic design software. But we have people on our team who have neither, and they’ve also been able to learn extremely useful processes like solution brainstorming and user testing in a very short time.
- Doing UX tests and edits within the core team is more agile
Especially when you’re at an early stage and not 100% convinced your users understand how to user things. You really want the whole team involved in prototyping, testing and editing the design. Commissioning some nice looking layouts from a pro would never solve our actual problems (or would require endless back and forth and cost us a lot of money).
My process over 2 months
Here’s my very first interactive prototype in Figma, done on the second day of the 101 UX workshop I attended. This is mid-January 2021.
It’s a button that displays “HELLO <name>” when the button is pressed. I’m still really proud of this.
I quickly realized that I wanted our prototype to be more interactive that Figma allowed. So I soon looked into Axure. These prototypes looked more wireframes, but allowed for very complex interactions. I could pull information from the first screens and show data dashboards with the actual information my test users had submitted.
While my Axure prototype was really powerful, I was not structured enough as a designer to make it look good and usable. I needed something that would kind of do half of the design work for me.
Here’s my third choice for an interactive prototype — now in Sketch + Anima App. Here I have to make some compromises in terms of power (no data can be fetched from the previous screens), but the layout guides and snaps the pieces really nicely, so it’s a no-brainer to produce something that doesn’t look terrible.
After a month of work, I learned to build better animations so we could test out toggle features and selection interactions. Here’s what our prototype layouts looked like in the beginning of March 2021.
While the Sketch (for drawing) + Anima (for interactions) combo is really easy to learn, it does cause some headaches for a beginner who doesn’t understand how html layouts work.
Anima lets you upload the design to their cloud for testing so you can get the tester on a video call and see how they use the prototype in their own browser. But while you were kind of drawing your elements in the right places on the Sketch screen and then moving them around, every single element gets assigned some layout parameters in the process.
I ended up heavy wrestling the center align / bottom pin elements as my prototype was meant for a mobile screen. It’s really easy to get most of your design nicely in the center in the size of a cell phone, and then one button aligning with the left bottom corner of the user’s browser.
So I got to learn a lot about what a div is and how to group elements so that they stay together and don’t display on top of each other in a wrong way.
Be inspired, be illuminated
If you’re not a professional UX designer, there’s definitely another skill in your life that helps with working on UX.
If you’ve ever learned a foreign language and had to piece together grammar elements, that’s great preparation. If you’ve laid out chairs and tables for a large public event, that’s inspiration.
If you’ve never thought about lighting, I really recommend that you do. Observe what’s illuminated in the spaces you walk through, and how that helps or hinders your navigation.
P.S. Here’s my old Pinterest boards for some fun lighting inspiration: https://www.pinterest.com/daretolight/_saved/