GSoC Journey: 3rd week of Community Bonding
Hello folks,
Myself Senthil Athiban, a final year undergraduate student at Madras Institute of Technology. This blog represents a continuous series documenting my journey through GSoC. If you haven’t already, I encourage you to check out my previous blogs here. I have been selected as a GSoC student at OpenMRS for the Validation Rule Builder for the Form Builder project. My primary mentor is Dennis Kigen, and my backup mentor is Hadijah Kyampeire. Today, I am excited to share my community bonding experience with all of you.
Importance of UI/UX Design in Development
As a developer, before diving into the code, I took a step back to brainstorm the UI/UX design for my project. The objective was to establish a clear vision that not only guides the development process but also communicates the project’s purpose and functionality to non-technical users. A well-crafted UI/UX design serves as a visual blueprint, offering an early glimpse into the project’s potential and user experience.
In the context of OpenMRS, we leverage the Carbon Design System, an open-source design framework developed by IBM. Carbon Design System provides a comprehensive suite of components and guidelines that ensure consistency, accessibility, and high-quality design across our applications.
Utilizing Figma for Design
To design the rule builder for the form builder, I utilized Figma, a powerful design tool that supports real-time collaboration and a wide range of design capabilities.
Designing the Rule Builder Component
The rule builder component is a crucial part of the form builder, allowing users to define conditional logic and dynamic behavior for form fields. we aimed to make the rule builder intuitive and user-friendly:
- Clear Separation of Sections: Each rule builder section is designed to be visible separately, ensuring users can easily identify which rules apply to specific fields. This separation is visually reinforced with a distinct left border.
- User-Friendly Interface: The interface is designed to be intuitive, reducing the learning curve for new users and making it accessible to non-technical users.
- Consistency with Carbon Design: By utilizing Carbon Design System components, we ensured that the rule builder maintains visual and functional consistency with the rest of the application.
Feedback from Community
In our OpenMRS community, we have dedicated UI/UX hour calls twice a week, on Thursdays. Initially, I shared my UI/UX design concepts with my mentors during coffee break calls and in Slack also. They were impressed with both the design and its functionality. Encouraged by their positive feedback, they advised me to present my work to the broader UI/UX team and to seek their insights and advice on any uncertainties I had about my project. I have a concern about determining the optimal placement for the rule builder to ensure it is user-friendly for users. My approach is to be like having a separate tab for the form-logic. This would allow users to build their logic in a cleaner and more organized way.
During the next UI/UX team meeting, I shared my design ideas and presented a small demo of the rule builder component for the form builder. The team was impressed with the features and overall design. This collaborative session was invaluable as it allowed me to address several key concerns:
- Optimal Placement of the Component: I sought advice on the best location for the rule builder component within the user interface. The goal was to ensure that users could easily understand its functionality and that it seamlessly integrated with the form creation process.
Implementing Feedback: Optimizing Rule Builder Placement
After receiving valuable feedback from the UI/UX team, I decided to integrate the rule builder within each specific question. This placement allows users to manage logic directly while creating forms, significantly reducing extra effort and enhancing usability. Here is the new design and a demo, reflecting the improvements based on the team’s feedback.
Demo link: https://www.loom.com/share/5fecb7de14c446e4ab3718e2a2a80bd4?sid=b929b7a3-ee07-4a99-b91b-659f7d954ba3
By placing the rule builder within each question, users can easily associate conditional logic with the relevant fields. This approach not only streamlines the form creation process but also ensures a more intuitive and efficient user experience. The feedback-driven adjustments have made the rule builder more accessible and practical, aligning with our goal of creating a user-friendly interface.
About Me
I’m Senthil Athiban, a final-year undergrad from India. Days are for VS Code, nights for GitHub — a constant journey of coding and exploration, fueled by passion and curiosity.
GitHub: https://github.com/senthil-k8s
LinkedIn: https://www.linkedin.com/in/senthil-athiban-m/
Twitter: https://twitter.com/senthil_k8s
