PROJECT LINKS
Introduction
Univacity is an EdTech Startup building solutions to facilitate the process of studying abroad.
I held the sole role of Senior Product Designer, collaborating across design, engineering, and marketing teams. The compact team size allowed everyone to possess in-depth product knowledge, a valuable foundation for many design decisions made during my tenure at Univacity.
When I joined them, there was already an MVP with an emphasis on functionality.
My tasks included improving the current students’ application flow, introducing dashboards and other CRM tools to facilitate the application process for students and all parties involved, eventually the concept of Univacity 2.0 emerged, and the team unanimously agreed that this was the path forward.
Brand refresh
With Univacity 2.0, our mission was to give our brand a modern, youthful feel that appeals to our student audience. To achieve this, we embarked on a comprehensive brand revitalization, introducing modern typefaces, sleek curve elements, and an expanded color palette.
This strategic brand refresh not only redefined our visual identity but also reaffirmed our commitment to providing students with an innovative and engaging educational experience.
Design System
As part of the mission of giving Univacity a modern and youthful feel, creating a design system to communicate this was paramount. Beyond enhancing visual consistency, the design system served as a foundational tool for our team, ensuring designing and engineering products were done in a scalable and repeatable manner.
The new design system introduced many features like more colour palettes to the designs, bolder and bigger headings, role-based colours for internal tools, light and dark modes for better accessibility e.t.c
The design system was built with Figma variants and components, drawing inspirations from industry-leading design systems like Shopify Polaris and Mailchimp Design System.
Univacity 2.0
The process of Univacity 2.0 began with a thorough documentation and UX analysis of the existing MVP.
Leveraging our findings, I crafted user flow charts to optimize various processes and progressed to develop high-fidelity designs for landing pages, dashboards, invoices, wallets, and other internal tools, to improve the student application experience as well as other stakeholders. Over 1,000 screens across PC and mobile were designed.
Collaboration: Thanks to our lean team structure and efficient sprint plans utilizing agile methodologies, feedback cycles were expedited. After just a few rounds of iterations, we typically arrived at finalized designs, ready for handoff.
Hands-off were generally quick and seamless, thanks to the fact that I was in constant loop with the engineer in charge, who was the CEO. Together, we reviewed and aligned on finalised designs.
Figma Prototype showing animation and scroll effect for Students’ landing page.
Post-launch
Feedback was generally positive for Univacity 2.0 especially mobile users.
Univacity’s Instagram Post announcing Univacity 2.0 Update
Design is never done, it’s an active cycle. To ensure our designs remained user-centric and effective, we harnessed tools like Microsoft Clarity to record our users’ experience. This analysis empowered us to implement regular design improvements.
Lessons learned
Timeline for updating design system: Given Univacity’s continuous growth, establishing a well-defined timeline for updating the design system proved essential. Doing this ahead of time ensured our design system stayed useful, making our design process flexible for changing project requirements.
File organisation: Meticulous file organization in Figma played a vital role in enhancing our workflow and ensuring prompt asset retrieval for all stakeholders, particularly when working on design projects with numerous flows and scenarios.
Conclusion
It was an interesting and rewarding experience to help build the design foundation for a company like Univacity. I look forward to further innovation in the ever-evolving field of EdTech. Visit https://univacity.com/
