Lean UX

Why lean UX?

Traditional UX process are based on many steps and some times it can cause blockages. Getting things done under a traditional UX design process can be time consuming, and at times frustrating for all the people involved. Lean UX is how you do design using an agile process, the focus is to act fast while listening to the users and shaping your product with the help of customer feedback. Since the cycle is shorter in a lean UX, it lends itself to efficiency and speed. Work effectively, ship it, sense the reaction of the users, iterate and so on. There is a great article in Smashing magazine by Jeff Gothelf that explains it in more detail.

Feedback

Lean UX is focused on gathering as much feedback as possible. Nowadays technology allows us to deliver our products constantly. And because we can ship them regularly we can have immediate feedback which can lead to rapid iterations. The interaction design foundation has an article where they talk about some points that can help us in an agile development with lean UX.

Continuous Learning

Nowadays, it is simpler to update our product and share it with our users. This results in immediate feedback. Using that feedback, we can improve our product and share it again. Closing the full circle and creating a continuous conversation between the user and the team that is building the product. In other words, if you want to improve your product, don't be afraid to be criticized, be humble to accept that criticism and filter it to help your product to ameliorate. Jeff Gothelf has a great talk titled 5 years of lean UX where he explains in more details all these subjects.

Continuous Conversation

Ship → Sense → Respond and repeat. Working on each of these steps will help us improve the product and make our customers happy. Sense: we need to understand the impact that we have on our customers. Respond: getting feedback, and if we get it wrong, making sure to change direction. Ship: Ship the new version ASAP, so we can make sure if the new version has a better impact or not. The more we learn about our product's deficiencies, the more information we can gather to prioritize our tasks.

To be humble

Sometimes we can have a strong opinion about approaching the development of our product. Still, we need to be humble enough to rapidly acknowledge our wrongdoings and to make sure to adjust the course of our product and ship a new version of it. At Design + Code, we apply this methodology repeatedly, we share our work on social media and we listen to the users, but even more importantly, we care about fixing those issues and shipping the fixes ASAP.

The Kanban method in Lean UX

There are different methods that can help us work with lean UX. Kanban is one of those. It was invented in the 1950s by Taichi Ohno at Toyota to support the methodology of delivering the product to customers just in time (JIT), neither sooner nor later. You can learn more in this great article.

Creating a Kanban board in Figma

We will start defining some main colors that we will use in our board, and we will save these colors as color styles, so we can re-use them later on in the exercise. You can find this specific color palette in our Figma file.

Then we will create a new frame called "user" with 300x54, we will use white as the color with 40% opacity, and add auto layout to it. Inside this frame we will add a text element with a width of 275. Set the text to "Who's working on the card", and select auto height.

Next, we will create a new frame sized 390x154 and name it "card". Set the color style called "Design" to it, add 20 for margin. Underneath we will add a new text with the value of "Task", with a width of 350 and auto height.

Then we will convert the "card" to a component, and add this component to a new frame called Section. This new frame will have a width and height of 430x274. For color we will select "section" from the color style palette. Then we will use auto layout with a margin of 20. And we will add a title: "💪 To do".

In this step, we will create a frame with auto layout and a margin of 40 that called "Section". Then, make three more copies of the column. The will change the title of the new columns to "⚙️ In progress", "🤖 Review" y "🎉Done".

At this point we have our customizable board, in which we can easily add new cards, edit the texts and move the cards between rows and columns thanks to Figma's Auto Layout.

Conclusion

Lean UX can help us on different products in parallel as a team, in a very efficient and effective way.