top of page

What  is " Top Graduates " 

Top Graduates is a subset of Career Success Australia (CSA) . Their expertise lies in more than 50 years of career coaching and industry experience throughout Australia, and now CSA is expanding its business by building a new brand and platform, Top Graduates. 

What  is this platform?

As I entered the team in the later design phase, I decided to research the platform and what differentiates them from its potential competitors. 

TopGrads is a site for graduates and employers to find the perfect match for their job position. The platform prepares graduates by providing them a space to present their profiles to thousands of employers and be provided with valuable resources for their applications.


At the same time, employers can find pools of potential candidates and track down their entire recruiting process, starting from shortlists, setting interviews, and the hiring process.


" Unlike other job search platforms, TopGrads makes employment on both ends more convenient and manageable. " 

Design Direction

As it is a newly introduced platform, users must fully understand what Top Graduates is all about and what we offer on this platform. Moreover, the visual elements and presentation of the website should lean toward a casual yet reliable to the target audience as the concept of being casual differentiates TopGrads from other professional-toned job search platforms such as Seek and Indeed. 

My Role

Several weeks after dealing with TopGrads social media assets and identity, I took the role to brainstorm and execute different sections of TopGrads website platform. After completing the prototype, I was also accountable for cross-checking and flagging the issues from the developers' end.

Throughout the project, my main focus was to prototype four platform sections:


- Recruitment Solution 

- Online resume builder tool

- Resume builder landing page

- Home page

While some pages are designed from scratch,  some are redesigned from a prototype done by a previous designer. 


User aspect:

- providing graduates worthwhile platform that eases their job application process 

- providing recruiter/ employers a platform for them to find talented candidates and make their job hiring process easier

Business aspect:

- build reliability and brand trust,  persuade employers and graduates to use the platform

Product aspect:

- easy to navigate , possibly maintain retention and increase conversion rate in the future

Analysis of endorsement page

( rename to recruitment solution page) 

" Recruitment solution" is a page that introduces employers to a recruitment package that Top Graduate provides for them. This page suppose to persuade employers to register for the recruitment package. 

The current site does not deliver a wow visual factor, and the structure does not flow smoothly. 


First of all, the hero image does not grab the audience's attention because of its dull appearance. Moreover, the compilation of corporate logos on the page gave a sense of excessive presentation, thus may appear to be too hard-selling from the audience's perspective. And lastly, employers do not have a clear understanding of the package benefits after browsing the page.


Video of the recruitment solution page that I redesigned

Resume Builder Tool

Different from the previous page where were redesigned, the builder tool was designed from scratch. 

This page is a builder tool on TopGrads platform which allowed graduates to create their resume for their job application in one site . Saving their time of creating the resume elsewhere and keeping all of their application documents in one place.

When designing the resume builder tool, I considered the familiarity of user behavior when they use editing software. From my observation, tools are commonly placed on the left or right corner, which can be found in many Adobe programs. Therefore, the filling resume content is located on the builder tool’s right-hand side. And features such as deleting or editing sections are placed inside the hamburger menu, as it is not often used. This format also makes the interface more systematic.

A help button is available on the top right-hand corner, where the demo of the builder tools will pop up to guide the users if they are stuck.

Home Page

The site's home page was the final page I was asked to revamp. 

It is a vital section out of every page I've designed as it gives users the first glimpse of the platform. Most importantly, determine whether you can make or break the conversions.  

Builder Tool : Different iterations of clearing resume's section feature

I decided to restructure the flow on the page and create an interactive mockup. 


A call-to-action button is placed on the top for users to commit to their booking immediately. Then I structured a section on why they should choose TopGrads with a simple paragraph enveloped by white spaces to give emphasis—followed by five solid bullets and another small area that tells the audience the package details. This structure will make the user evaluate whether their business needs assistance on the mentioned point. Then a series of steps are shown to show a system of the entire process. I decided to use actual photographs in the series to deliver a realistic touch, to depict that the process is attainable with TopGrads help. Last, the form is placed at the bottom for users to send in their inquiries or bookings. 

Demo of the builder tool

Resume Builder Landing Page

After completing the builder tool interface, I began to design the resume builder page( from scratch). It is a page where we introduce an on-site resume builder tool to the visitors.

For a seamless experience, I decided to use vertical scrolling on the page, where content slowly appeared section by section when users scroll down the page. This allows the users to digest the information without being distracted by other parts. Furthermore, while scrolling through the contents, users can also be fully engaged as they can click on certain parts of the visual, which makes the experience dynamic and enjoyable.

Different iterations for " Our Story" section

Final Home Page

Instead of having images purely displayed on the banner, I decided to add fun characters that fit the brand identity, a casual and approachable platform for the target audiences. In addition, to avoid the site having a typical linear flow, I implemented some interactive elements on the page, such as drag to reveal video or a mouse hover state. 

To avoid users being confused while navigating through the site, there are small indications of arrows pointing toward an interactable area. Animations are also added to the site as they make the user experience more tasteful and immersive to capture the users' attention.

Small Takeaway : 

While designing the motion, I learned that setting a suitable motion duration is crucial as you want the movement to satisfy the user instead of causing an eyesore. The motion should not be too sudden to disrupt the user experience.

Objective Priority for each section

One crucial point that I learn while designing different site pages is that not all of them have the same objective. For example, instead of focusing on brand identity, the resume builder page needs lots of thought on its functionality execution as it is a tool that eases graduates to build a strong profile. In contrast, brand identity weighs heavier on the home page as the elements should present what TopGrads is all about and determine user impression of our platform. 

Issue Flagging and Troubleshooting

After prototyping all of the pages, I was assigned to do the issue flagging process across different pages on the site, including the one previously done by others. 

I need to make sure that the site done by the outsourced dev team look and functions accordingly to the prototype I sent out. The functionality issue cannot be spotted with bare eyes, so I must be focused while going through different user flows on-site to pick up the elements that can be deducted or added for a seamless experience. This stage requires a lot of attention to detail. A minor change in colors or font weight should not be overlooked, as all elements are carefully designed to deliver the best user experience. 

During the first cross-check on the resume builder tools, many features did not function according to the prototype, such as the rename button appear to be unclickable and there was no cursor to type a text. In addition, Autosaved icon does not appear in real-time when edits are made on the resume; without this feature, the user will never know whether their changes will be recorded as there is no indication. 

There are some responsive issues where the element does not resize itself accordingly to the browser dimension size; such a situation occurred on the header banner text. Therefore, it reduces the contrast between the subtext, menu bar, buttons, and displayed photo, thus making the site lose its "hierarchy." 


Looking back, I realized some issues are due to a lack of information and limitation the design team obtained from the back-end, which resulted in minor to-and-fro adjustments. This is a takeaway that I learned and would remember to consider on a future project. 


I learned so much about what it means to be a team player in a professional environment. I realized every decision I made would affect the whole team, and therefore, communication is crucial as we have to constantly tune in to find the middle ground for every side. 

Moreover, as TopGrads is a startup, almost everything I touched is built from scratch. Therefore it relates to building a solid basis and structure for the product or even the organization itself. I learned to approach my craft with more thoughtfulness and meticulous eyes, as other co-workers will later build a layer upon my designs. 

What comes next? 

As a startup, we are limited with the number of users that could test our live pages. Therefore the Testing was not completed on time as we planned. There is still a long list of pages that must undergo user testing, and some still need to be developed by the developers. There will be minor adjustments after user testing and maybe some tweaks in the animation before the site launch to the public. Nevertheless, every page we planned to prototype is fully completed.

This project was conducted during my internship with Top Graduates. I am not affiliated with TopGraduates or CSA. 


Time limitation is a challenge we faced in this project. After being introduced to the social media campaign, I was asked to start prototyping the platform as the launch date was near. It would be nice if we could conduct multiple A/B Testing, this would result in less risk-taking design iterations. 

However, we made it up by running lots of internal user testing and review sessions with participants who got different levels of design eyes, age, and understanding of the platform. This helps us collect different user experiences and be less biased with the deliverables. 

Thank you 

I would like to say thank you to Naren and Parth for taking a chance on me when I applied for the internship. You guys trust me to be a part of your team despite me being new on this professional pathway. I am very grateful for all of the opportunities I have received here. And lastly, thank you for your constant guidance along this journey and for making them memorable. 

I learned so much about what it means to be a team player in a professional environment. I realized every decision I made would affect the whole team, and therefore, communication is crucial as we have to constantly tune in to find the middle ground for every side. 

Team Player

Moreover, as TopGrads is a startup, almost everything I touched is built from scratch. Therefore it relates to building a solid basis and structure for the product or even the organization itself. I learned to approach my craft with more thoughtfulness and meticulous eyes, as other co-workers will later build a layer upon my designs. 

Building strong basis


What I learn from the experience

Top Graduates

Project Summary :

I designed a platform to ease the stress of job application and job hiring for graduates and recruiters. 

My Role 

UX and UI Designer: redesign, create and prototype the design, flag development issues


Desktop - Website 


Figma , Trello , Slack , Teams


2021 ( 4 months )

Redesigned Home Page: Employer's flow

bottom of page