hacker evaluation application

nwPlus is a student-led club supporting aspiring programmers and designers, based out of University of British Columbia. As one of their UX designers, I worked on the hacker evaluation application to organize grading assignments and hacker scoring for internal hackathon organizers.

exciting updates!

This application was used for Western Canada's Largest hackathon, nwHacks 2022 to grade over 2000+ hacker applications in order to see which applicants to accept into our competitive hackathon.

The team shipped this product in Dec 2021 and here is what it ended up looking like.

Opening the Application Evaluator in the Content Management System

Comments from the team :)


first thing’s first, you have to set the context

I was a co-lead on this project along with Filbert, another designer at nwPlus.

I collaborated with the Product Manager and Developer teams to establish design/dev requirements, discuss time and resource constraints, and respective Logistics teams in order to accommodate every size of hackathon.

Internal hackathon organizers need a classified way to receive assignments to evaluate hacker applications. This problem was time-sensitive to the launch of our hackathon events this school year, in which the first large event was held in Jan 2022. Additionally, as the number of hacker applications increase or as the hackathons scale, it will hard to manage and grade all of the applicants.

We interviewed and sent surveys to the rest of the executive team to get insights on the challenges from previous years regarding the hacker evaluation application and process.


what’s wrong?

Old UI

Illogical and crowded UI

The layout of the scoring page didn’t make sense - the scoring came before the application was displayed and there were too many navigation bar elements that distracted users from the completing the actual task at hand. Additionally, many of the navigation elements seemed to better suit being a filter item rather than a global navigation bar item.

Lack of personalization and convenience

From the survey answers, we found that members wanted ways to provide justification comments for the hackers that they graded, to have a personal view so that only what they are assigned will show up, and to have the rubric integrated within the platform so that they didn’t have to refer to an external document when grading.

Inability to document grading assignments

The current process begins with the presidents assigning hacker id ranges to executive members verbally and then proceeding to document it in a private Notion page. It’s hard for executives to know which sections and id ranges they are grading and there isn’t a place to see what sections other members are grading either. Therefore, it was hard to keep track of which hackers had been graded already and which ones were still incomplete.


how do we scope and define the project?

How might we redesign the product so that it minimizes the exhaustive collaboration between multiple members to grade just ONE applicant?

Our mandate was to create a simple, intuitive, and modern user experience that allows the internal nwPlus team to execute their work in less time and make it easier to keep track of assigned applications to grade.



Intuitive and Logical UI
The platform will have a clean and consistent interface for executives to navigate through.


Personalized grading experience
Executives will only see what is relevant and be able to justify their decisions in the platform.


Dedicated location to see assignments
Presidents will be able to assign members, track progress, and delegate in one place.


here’s how it’s done

The first things we did was go through the application logic to see how to get to each page from the dashboard. We looked and researched into different layouts of how we could display the information in a way that made more sense and was easier to navigate through.

Applicant application flow

Brainstorming for assignment and scoring pages


here’s what really happened

It’s important that the hacker evaluation application is accessible and convenient to all internal team graders. I updated 4 features:
  • Information Architecture of the scoring page
  • Creating the grading assignment page for the presidents
  • Adding the rubrics within the platform so graders don't have to refer externally
  • Adding personalization features like comments and personal views to make the grading experience simpler and backed up with justifications

Restructured Information Architecture

To increase the logical flow of information throughout the platform, I flipped the score and hacker information sections in the scoring page. It didn’t make sense for the scoring to come before seeing the application.

Scoring page (before)

Scoring page (after)

Addition of an assignment page in the application

Originally, the assignment was just a verbal assignment and the members had to remember which ID ranges and sections they were assigned. This often led to miscommunication because people would forget what they were assigned and the executives didn't have a way to see which sections they've completed already. Now it’s can see it all on this page.

Assignment page

Integrated rubrics

Rubrics can now be filtered into sections and are found within the grading ecosystem, reducing the need to keep another tab open with the rubric in a third-party application.


Personalized comments

Since there are multiple executives that grade each application to reduce bias, we added comments so that others can see the justification behind why the grade was given for each section (eg. why did Alice get a 4 in the Github section?)

Scoring section (old)
Scoring section (new)


not everything went our way...

The logic of the assignment page was very difficult to figure out and it was confusing due to technical constraints. We went through multiple iterations to end up on the current one.

Additionally, as the developers had many projects in their timeline, there were many features that we had to cut out for the MVP so that they can implement it within the year.


our interactions

Grading Applicants

Referencing the Rubric

Scrolling through the Applicant List


what did i learn?

Just because you can, does that mean you should?

It’s important to regularly check up with the developers to ensure that everything is feasible early on during the process before designing something really aesthetically pleasing but not functional for the particular use case.

How else can we do this?

I discovered that the logic of the entire assignment process was very difficult to figure out because there are so many factors to consider when delegating the work to the executives.

You won't always get a consensus

When talking with the developers and other designers about my ideas, although we're expected to be the domain expert, no one has more context on the problem that I do.
I was hesitant to mention some of my ideas sometimes but through this process, I learned to trust in myself and my abilities more.

You don't have to get everything done right now

At nwPlus, we get a lot of autonomy and full responsibility regarding the projects that we take on. Something that I learned was the importance of prioritization and to focus on what can be accomplished at the moment and what can be be pushed further down the pipeline for development - We don't have to get everything implemented right away. Being able to let go of certain features at the moment will help with progress and prevent me from spreading myself too thin during the process.

Connect with your host!

👀 Linkedin

📄 Resume

💌 Open to warm conversations