Case Study: Encouraging User-Friendly and Accessible Science Education
Vernier, a renowned name in the realm of educational scientific software and equipment, aimed to elevate the user experience across several of its software applications. As the primary UI designer and developer, I was tasked with both designing and implementing the user interfaces for four of their flagship applications: Video Analysis, Graphical Analysis, Instrumental Analysis, and Spectral Analysis. Visit the full website
Challenge
Permalink to “Challenge”The software suite by Vernier is globally utilized by educators and students. The challenge lay in crafting interfaces that were intuitive, user-friendly, and catered to a diverse audience with varying technical expertise. The design and development needed to maintain consistency across the different applications while ensuring each software retained its distinct functionality and identity.
Approach
Permalink to “Approach”- Research & Understanding: I initiated the process by comprehending the core functionalities of each software and the unique challenges they posed. Collaborating closely with the software development team and some end-users provided invaluable insights.
- Design System Creation: Leveraging my expertise, I developed a unified design system that would underpin all four applications. This ensured design consistency in elements like buttons, dropdowns, and modals.
- Iterative Design & Development: For each software, the journey began with wireframes, which were then refined into high-fidelity mockups. Using HTML, CSS, and foundational JavaScript, I brought these designs to life. The Lit-Element framework (now known as Lit) was instrumental in this phase.
- Accessibility: Given the educational focus of the software, accessibility was paramount. I ensured that both designs and developments adhered to WCAG guidelines, making the software usable for individuals with disabilities.
- Collaboration: While I was the primary UI developer, more intricate front-end or back-end tasks were handed over to specialized team members. This collaborative approach ensured a seamless transition between design and development phases.
Outcome
Permalink to “Outcome”The redesigned and developed interfaces for Video Analysis, Graphical Analysis, Instrumental Analysis, and Spectral Analysis garnered positive feedback from both the Vernier team and their end-users. The unified design system coupled with the intuitive UI and seamless development ensured users could fully leverage each application's capabilities.
Reflection
Permalink to “Reflection”This project underscored the synergy between design and development. Collaborating with Vernier, a brand committed to enhancing STEM education, was both challenging and immensely rewarding. It was a reaffirmation of the power of design and development in making complex processes user-friendly and technology accessible to all. The hands-on experience of not only designing but also developing the UI features enriched my understanding of the end-to-end process. Witnessing educators and students benefit from the tools I had a hand in creating was a deeply gratifying experience, reminding me of the tangible impact our work can have on the educational journey of many.