NodesNow is a company that aims to improve the experience of meetings with custom built hardware and well-designed software.
The issue is most meetings are inefficient and unproductive. Too long, too disruptive and disconnected. Too many projectors, platforms, and software updates, with a lack of clear goals. A lot of people would rather do away with meetings.
The solution combines hardware and software into an all-in-one meeting ecosystem. It aims to improve the productivity of both the facilitator and the audience. The device can quickly start a workshop meeting either online or in person. The audience can share their questions and opinions via their phones or laptops directly to the board by scanning a QR code or entering a code, without disrupting the presenter's flow.
The all-in-one meeting ecosystem consisted of:
My role in this project was to design both the Customer Hub and the Backoffice meticulously. The Customer Hub allows NodesNow customers to manage their devices by scheduling meetings and moving devices between locations through an intuitive interface. The Backoffice enables NodesNow admins to efficiently manage customers, giving them the ability to monitor, create, edit, and delete customers and their sub-branches. This comprehensive system ensures that users have full control over their devices and can accomplish their tasks effectively.
We conducted a discovery process to understand the business goals and requirements of each platform. We identified the main features stakeholders needed and the role each platform played in implementing these features. We also gained insight into the target users, market standing, and unique selling points.
Based on the findings from the workshop and the User stories that were created, we mapped out a high-level flowchart for the Customer Hub and BackOffice. Below, you can find an example of the flowchart I created for the Customer Hub.
I created the wireframe based on the flows I made earlier. This allowed me to get our first look at what the product could eventually be. Since this was a new product with no proper reference, I could only use partial references to understand the structure and how I want to create the information architecture.
Below, you will find examples of the main screen wireframes back office.
Based on the wireframe we created and the use of MUI design system in the start, we begin creating turning each flow into High Fidelity design and having regular catchup with the teach team and the stake holders to make sure the product is heading in the right direction.
Below, you will find examples of the main screen Ui for Customer Hub.
As part of our ongoing efforts to ensure a cohesive and scalable design, I am planning to implement an atomic design system. This involves breaking down the user interface into its most basic elements—atoms. These atoms include fundamental components such as buttons, inputs, and labels. By combining these atoms, we create molecules, which are slightly more complex elements like form fields or button groups. Further, these molecules can be combined into organisms, which are complete sections of the UI, such as headers or cards.
By structuring the design system in this atomic way, I can ensure consistency, reusability, and scalability across all the products. This approach also allows for more efficient collaboration between design and development teams, as it provides a clear and systematic framework for building and maintaining the UI.
Below was an example for atomic design system that would be broken down into different files but the project was shelfed due to budget issues and we were never able to work on this
Redesigning AXA Thailand's insurance website to reduce friction and optimize the purchase flow across Travel and Motor insurance products.
Redesigning a leading Thai IT company's corporate website to simplify navigation, improve service clarity, and deliver a polished, user-centered experience.
