Article: From Zero to One (Part 2) - Reaffirming An Interest in Design

by Harry Chang & Tricia Ang • 15 December 2023

As the follow-up article in a two-part series, Harry reflects on his limited design-related experiences prior to starting NUS Product Club, and how his experiences in NUS Fintech Society as a Design Manager has influenced him to increase his involvement in our club’s branding and marketing efforts towards the end of our first semester.

Introduction

Previously, I mentioned that despite my limited design experiences, I wanted to try out something different in my final year as an undergraduate by taking on a publicity role. While I had some experiences with creating slide decks for pitches and hackathons, I’ve not had a proper chance to fully immerse myself in a design role to develop my creativity skills. Perhaps, my only relevant experience that somewhat counts would be working in a team of 4 in my freshman year to take on Shopee and Product Design Challenge 2021, where we attempted to utilise Figma to redesign the interface of the Shopee app.

Shopee UI/UX Design Pitch Deck

Frankly speaking, I would say that my own contributions were limited back then, as I mainly focused on the pitching aspect - although I did get to learn some basics of Figma along the way. Since that year, however, I never got to touch Figma, or any form of prototyping again... until the start of this academic year.

Joining NUS Fintech Society (NFS) as a Design Manager

As I had just relinquished my publicity responsibilities to Evangeline, our then-newly recruited Head of Publicity, I still felt that with the amount of free time I had in my final year, I wanted to pursue my interest in design. Alas, I happened to chance upon this post:

Given how impressed I was with the aesthetics of the post, I browsed through all the available positions available. Knowing that my potential interests and knowledge were only between UI/UX and machine learning (ML), I ended up applying for a design position instead. This was because NFS is well-known for having a very competitive pool of applicants seeking to enter the ML department, and I thought it would be best to avoid entertaining such a high barrier to entry, also given that I could already cover ML in my own undergraduate course.

Getting interviewed for a design position was an interesting process. Without revealing too many details, I particularly enjoyed how well-thought the interview was, including a good selection of design-related questions which I’ve never experienced before. Perhaps this is a standard practice in formal UI/UX interviews, but overall I appreciated the amount of effort the interviewer put into the interview.

Despite not knowing much about NFS besides participating in its very first iteration of the NUS Fintech Month Hackathon in my freshman year, I was genuinely surprised when I was offered the Design Manager position despite my lack of experience, and ultimately decided to accept the offer in addition to my primary commitment in NUS Product Club.

Introducing the NFS Software Development (SD) Department! Unfortunately I was not available for their first cohesion as I was overseeing one of our PM1101E sessions at the same time at ShopBack Campus

Now working together with my interviewer - Tricia - the Head of Design in NFS, I got the chance to explore the idea of establishing a design system before working on a project. This was something very foreign to me, and I was fortunate to pick up this knowledge in a short amount of time. Besides this, I had to relearn the fundamentals of Figma once again, along with the main concepts of components and variants, which again Tricia greatly assisted me in getting accustomed to within a short timeframe.

Before embarking on my assigned project, I was tasked to collaborate with Tricia and the other Design Managers to establish a unified design system across all of the projects in NFS - something I believe was not done before. To me, this was really the moment where I picked up really quickly, as it was the perfect opportunity to brush up my skills before eventually leading my own team of designers. Using Mailchimp as a heavy reference, we managed to establish the following:

Establishing the Design System of NFS - from Tricia's perspective!

Establishing a unified design system would definitely help in maintaining a cohesive brand identity across different products created by NFS SD (Software Development). Not only does it ensure visual and functional consistency across all components for an enhanced user experience, but also facilitates better communication between designers and developers of the team.

Having recalled NFS External Relations utilising distinct shades of yellow (#F9A72B) and blue (#OC1747) in their marketing efforts on the NFS Instagram page, I decided to incorporate them as the brand colours for the design style guide as well. I believe many others would have already associated this combination of colours with NFS since last academic year, which makes it easier for them to identify our products in following semesters.

Following that, the Design Managers experimented with various combinations of colours collaboratively to craft our secondary colour palette which includes feedback and accent colours. With a fixed secondary palette in place, they can be used to establish visual hierarchy by guiding a user’s attention to a specific section. It can also signify different levels of urgency such as error messages being displayed in red while success messages being displayed in green.

With regards to the typeface, DM Sans was selected due to its clean and modern sans serif font, promoting professionalism and consistency especially when designing industrial-grade digital products.

Given the chosen color palette and typeface, we proceeded to design the commonly used components that users typically find useful when navigating a website. This includes buttons, dialog boxes, feedback bars, icons, illustrations and display of statistics. Furthermore, we explored multiple variations to illustrate the possible functionalities during a user process such as the need to design a disabled button when users are not allowed to click on a button temporarily.

After a semester in implementing this new design system, I have noticed how it has greatly improved the design workflow within the team and at the same time, reinforcing the NFS brand identity through the projects!

The project at hand - ATLAS

Upon being assigned my team of designers, it was time to choose the project I wanted to embark on for our first semester. It took me a while to contemplate the choices given, however, as this was technically my first time leading a full-scale design project. At the same time, I wanted to pursue something that interested me the most, as interest does guide one through the toughest times when completing such a project.

Introducing ATLAS - an internal HR management system (HRMS) for NFS members and prospective applicants. With the growth of NFS expanding to over 200 members annually, the intention was to build a web application to better manage administrative processes and improve communication between various stakeholders in NFS. Common HRMS features that are expected to be implemented include recruitment tracking, attendance taking and storing a database of members’ information.

In no particular order, a compilation of desktop mockups for ATLAS and its various pages

As I was taking over this project from the previous team who worked on this presumably for the first 6 months of the year, I was briefed on the rough expectations of the project - mainly to improve the aesthetics of the mockups before handing them over to our project’s Tech Team for further implementation. With the established unified design system shared between the Design Managers, our Design Team got to work with our weekly sprints over the semester. To briefly summarise the mockups that were generated by our team:

Login and Home Pages: Self-explanatory. For Home, this was a new initiative based on EduRec by NUS, as a simple dashboard-style page for easy access to the various pages.

Announcements: Similar to Canvas, this page essentially contains a dashboard of the latest club announcements for our members to keep up with the latest events and activities from NFS.

Members: As the central directory for members’ information, this page provides accessibility for the NFS EXCO in particular to approach individual members if required. Such information can also be used for general demographic analysis (e.g by seniority or department)

Events: In this page, a calendar will be rendered to forecast the various club events that will be held over the year. An attendance tracking system is also implemented, especially for EXCO members to evaluate if certain members did not attend consecutive events that are compulsory in his/her department.

Tasks: Perhaps the page with the most outlet for creativity, this page is meant for members to keep track of the tasks that they have been assigned by their department heads. Likewise, EXCO members can utilise the features of this page to oversee the efforts of their members, similar to the usage of platforms such as Jira and Notion. For our mockups, however, we reverted to a simple checkbox implementation, in order to allow our Tech team more time to explore the feasibility of drag-and-drop functionality of managing the tasks.

Recruitment: Similar to your typical recruitment sites, this page allows for administrators to manage the information of prospective members who apply for the different positions of NFS. This page will also be used to onboard new members after offering them a position in NFS to facilitate a smooth administrative process.

Again, in no particular order, some mockups for the mobile version of ATLAS

Perhaps the greatest challenge for me in this project was converting the desktop mockups to mobile. Although the previous team’s desktop mockups were easy reference to adapt from, I wanted to implement some design changes to the mobile version, including a sidebar menu which would be simpler and less distracting for users to navigate between the different pages. For the calendar in the Events page in particular, it was fun trying to redesign the calendar feature specifically for the mobile version, given that the boxes drawn in the desktop variant would be difficult to design for mobile. Some inspirations that I drew from include mockups from Dribbble and iOS interface itself, including the logging of events on the bottom half of the mobile screen.

One of my designers also suggested a side dropdown for the Members page in mobile, to simplify the many columns of information that had to be displayed. This was something useful that I’ve learnt from her, and I eventually adopted this for the attendance taking feature in the Events page as well. Generally, the various members in our team eventually adopted elements of each other’s designs in their own assigned page mockups, which was indeed heartening to see!

Overall, I would say that it was indeed a fruitful experience working on ATLAS this semester. With a solid team of designers, product manager (PM) and technical lead (TL), everyone seemed to be aligned in improving the previous iteration of this project for the better. As of this writing, our Tech team is working on implementing the changes over the winter break, and I cannot wait to see how the live production build would look upon release!

How ATLAS influenced my increased involvement in our club’s publicity efforts

With the weekly sprints of design work that I had to oversee in NFS, I would say I gradually got better at using Figma for prototyping. Not that it was that hard per se, but with the sheer amount of time I spent on ATLAS, I became much more comfortable with it over time.

Concurrently, I was overseeing the development of our club’s website, as this was one of my targets set for our Publicity team to boost our long-term outreach efforts. Given her previous experience as a UI/UX designer in Google Developer Student Clubs NUS (GDSC NUS), Jing Xuan was the person leading the charge for this initiative, having liaised with the different Publicity Team members to create the various assets, components and templates required. With the additional support from our main photographers Maverick and Arissa, the stage was essentially set to craft out nice mockups of the website, before implementing it into our ideal hosting site.

A compilation of some Figma mockups for our club website

Unfortunately, despite using Figma plugins to migrate our mockups to different platforms, the migration was not smooth, and our team had to constantly amend the necessary changes to improve the overall aesthetics of the final product. Worst still, the initial platforms we were using had a page limit for their free versions, and as a result, we had to constantly switch between different hosting sites towards the end of the semester to explore our ideal platform.

In addition, it also did not help that all this was done during our examination period, and it was understandable that progress was getting slower and our Publicity team members wanted to focus on their studies then. Given my relatively free schedule this semester, I hence chose to step in to work on the additional mockups required on Figma, before eventually migrating the content from our previous hosting site to this site over the last week or two.

Looking back, I would say the journey was bittersweet, as I could understand the frustration of single-handedly trying to push for an initiative that I was initially unfamiliar with. Only when I had to get my hands dirty, did I get to really appreciate the amount of time and effort that my members put in when working on such initiatives.

As such, with the additional recruitment of our club members that just concluded, I have chosen to formally include myself in the Publicity Team for the coming semester, in order to assist the other members in their various content creation plans. With 11 members now working on our publicity efforts, it is indeed exciting to see what would be in store for us as a result of our hard work especially over this winter break.

Now co-leading our Publicity Team along with Evangeline, introducing our (biggest) Publicity Team and the various responsibilities for the next semester! Exciting things ahead

Conclusion

Although this article shares about my experiences in two different clubs, I would say that whatever that has happened over the course of this semester has truly contributed both to my personal growth and my technical skills, the latter which I totally did not expect to happen, especially if you were to ask my past self about a year back. This is truly an enriching experience - to be able to learn from people who are truly experts at their own craft, in order to further develop yourself for the better.

Once again, I would like to thank both our Publicity Team, as well as my designers in NFS Team Blue (Yash, Alyssa, Jolyn, Min Wai, Joven), for all their hard work! Your efforts have greatly inspired me to learn more about design as a whole, something which I would say I enjoy for the long term as well. It was great working together with Lynn (PM) and Craig (TL) as well, given that their inputs contributed a lot to my design process for this project.

Also, kudos to Michelle, Justin and Tricia for allowing me to write about this! This was indeed the perfect opportunity to explore something beyond my comfort zone, and NFS was truly an avenue for it. Tricia - in particular - is someone who I would like to credit as well, for her constant guidance as well as her contributions to this article. Looking forward to a continued harmonious working relationship for the semester ahead!

With the 4th edition of the annual flagship event of NFS - NUS Fintech Summit 2024 - in the horizon, tertiary students can expect to tackle four distinct challenges in the fields of blockchain, software development, and quantitative finance. Hackathon participants can also stand a chance to receive mentorship opportunities throughout the competition to win a share of the total prize pool, amounting to $40,000! Check out their press release here for more info!

About the Authors

#7: Harry Chang

Given his prior experiences in multiple data science and analytics internships, Harry is seeking to explore his career options beyond the conventional data analyst role, including product management and HR analytics. Beyond his academics, Harry has also contributed vibrantly to student life activities, including his previous leadership roles as President of NUS Statistics and Data Science Society, as well as Deputy Head of Finance in Google Developer Student Clubs NUS. Concurrently, he actively contributes blog articles and infographics as a Research & Strategy Executive at NUS Human Capital Society. He is also a (UI/UX) Design Manager in NUS Fintech Society. As our club’s President, Harry oversees the efforts of our Partnerships and Publicity Teams, establishing a strong foundation of our club’s outreach and marketing strategies in the long run.

ARTICLES FROM HARRY

Tricia Ang

Given her prior Diploma in Financial Informatics attained at Singapore Polytechnic, it is no surprise that Tricia would to proceed to further explore her interests in fintech. Now as a Computer Science undergraduate in NUS, Tricia's primary commitment as the Head of Design in NUS Fintech Society includes coordinating with the respective Design Managers and their various project teams, ensuring consistent yet easily accessible user interfaces across all projects in the Software Development Department. Concurrently, she is serving as the Deputy Director of Welfare in the 26th Management Committee of NUS Students' Computing Club, spearheading welfare initiatives including night study support and giveaways to support our Computing students throughout the academic year.

Page updated

Google Sites

Report abuse