.png)
Introduction
Hi, there 👋 We are software engineers from atWare Vietnam. We are an Agile team with full-stack developers, who can handle both the front-end and back-end side of a web application. But that's not all —we're improving our skills in UI/UX aspects.
Fresh off the heels of completing a UI/UX improvement project for one of our clients, we're excited to share our journey with you.
Learn about UI/UX Fundamentals
At first, the user interface (UI) is like the frosting on the cake. It is the first interaction users make to form an image in their minds. That image is what can define the future of your product. Besides that, user experience (UX) helps users to have the greatest experience possible for high user retention and to refer other users to the product. Based on that, before starting to design UI/UX, we need to understand your users and your target first. It's essential to grasp your users' demographics, preferences, and desired actions. Consider factors like age, aesthetic preferences, and intended user actions to inform your design decisions effectively.
When we realized our team was missing this kind of knowledge a long time ago, we discussed and decided to start a reading circle together, 30 minutes each day for the Laws Of UX book. We believe that it will be helpful to you too. It's a book that contains 10 laws to help us understand more about human psychology and user behaviors. The book is well-written with friendly words so very easy to understand. After reading this book, we believe you can become a better decision-maker when you must choose between 2 versions of design.
Here is one example. The 8th law in the book called von Restorff Effect said that:
When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
So if you want to guide users toward a goal by capturing their attention, you can make that component different from others, by using color, shape, size, position, or motion. In the example below, the second version draws attention to important points (Delete button) and helps users avoid accidentally selecting the wrong option.
Start UI/UX Design
Before detailed designing, do sketching first!
During the Agile development process, customer voice is very important. We need to communicate with customers as frequently as possible. Sketching is a quick and low-fidelity way to visually communicate design ideas. It allows developers to rapidly explore different concepts, layout ideas, and user flows without investing significant time or resources. By sketching out rough outlines of the user interface, developers can easily share their ideas with stakeholders and gather feedback early in the design process.
One of the tools we used recently for sketching is Excalidraw, a popular and easy-to-use. This is one of the sketches that we have done using Excalidraw.
Once the sketch is reviewed and updated, move to Figma
From the sketch, we leverage Figma's component-based system to create reusable design elements to ensure consistency across the entire application. It's also easy to update, we just need to update the parent component and it will affect all the children.
With a Figma design, we can identify and address any design issues or inconsistencies early in the process. This helps minimize the need for costly and time-consuming rework later on during the development phase.
Conclusion
In conclusion, we have finished the UI/UX improvements for our project. We've learned the importance of understanding user needs, leveraging the Laws of UX, and tools like Excalidraw and Figma. By embracing these practices, we've streamlined our workflow, minimized rework, and delivered better user experiences. We hope you can learn something from our journey after reading it. Thank you for your time!