NUSDevs
How can we build a network of Computing students interested in self-led projects?
What A student-led & student-initiated project under the Google Developer Club @ NUS
Who UI/UX Designer (Me) + 4 UI/UX Designers
What I Did Created a design system to ensure consistency across the different screens
+ Refined screens for development
Results Visually consistent screens for the mobile app and screens that are currently being developed
While in university, two students wanted to apply their computing skills outside of classes, but were frustrated by the difficulty of finding others to work with.
To solve this, they envisioned a mobile platform that matched students with ideas, with those keen on working on these ideas. I joined the team as a designer to realise this vision.
Problem + Background
– designing a platform to foster connections and kickstart ideas
I joined the team a month after its conception, after the rest of the designers had already begun working on different parts of the mobile app.
Given that I had relatively more experience than the rest of the team, I was tasked to lead the set-up of a design system for NUSDevs and to guide my fellow designers along the way. I was also assigned parts of the platform to refine based on the ideas that had been proposed by others in the team.
Creating a Design System – designing for consistency
The design system, was organised as Foundations and Components, in order of increasing complexity. Foundations informed the design of the Components, and ensured consistency throughout the design system.
Foundations
I started off with organising the System's Foundations, namely Typography, Colour and Spacing.
Typography – a basic set of Heading and Body typography styles was created with reference to Apple's Human Interface Guidelines (e.g. font size 11 being the smallest size for mobile UI). Notes were also included across the Figma file to ensure that the other designers and developers on the team can easily access further details where necessary.
Colour – a basic set of colours had already been selected before I joined the team, to include a few neutrals and an accent colour for important information. I expanded on the set of colours to include different shades of each hue, allowing a wide selection of colours while maintaining an overall coherence.
Spacing – this was also added based on a 4pt grid to ensure that the different screens would remain aligned and cohesive as the platform was developed.
These different foundations were then added into a Figma Library, for easy access later on.
Components
With the Foundations confirmed, I proceeded with making the various components. They were also created with reference to UI Libraries, like Material UI, Tailwind UI and Headless UI. This ensured that the components aligned with UI best practices and standards used on other platforms, creating familiar elements that would better guide users further down the road.
Pictured right: a closer look at the Button component and the different variants
Here, Figma variables made with the details laid out in the System's Foundations were also used, ensuring consistency from the get-go.
Pictured below: various components created
Design – refining screens and preparing them for development
Before I joined the team, the other designers had already drafted a preliminary outline of the application to test with potential users. When I joined the team, the priority was to make and refine the screens to hand over to the front-end developers for production.
I was tasked with refining these preliminary ideas and preparing the files for our developers. Figma's Dev Mode was used for this, allowing us to include annotations for further clarification as well.
Pictured right: screens compiled for developers, and annotations with details
The screens were organised according to their respective flows, with each separate screen showing the different possible interactions on the page, errors and other details.
Concluding Thoughts
This was my first time working on a student-led project outside a classroom setting, and working with fellow students who were committed to the goal of the project made for a fun new way to apply what I've learnt about UI/UX Design.
Granted, this project was focused more on UI design at the stage of the project when I was involved. While I did not manage to do much UX in this project, I did manage to do so in another project, which you can check out here:
UX Design, User Testing, Prototyping
