My Role

Being the sole designer at Shortlist, I was responsible for designing all the visual aspects end-to-end including marketing graphics for launch.

This was my first comprehensive project as a product designer and so I was involved at every step of the way with a strong focus on learning. The product development process included:

• Learning lots and self-teaching through design principles and softwares through online resources

• Brainstorming with the team

• Conducting competitive market research and user interviews

• Sketching user-flows

• Drawing out low fidelity mockups followed by final detailed designs

• User testing a lot

• Collaborating with developers towards final build

• More user testing in a QA environment

• Finally, launching and helping train users!

I used Sketch and Zeplin to design the platform. As part of the requirement for speedy development, we used Google’s Material Design library for design components.

Considering we were a very small team, I mainly worked alongside the head of product.

The Challenge

The old ‘employer portal’ was where employers could review candidates sourced and screened by us at Shortlist and move them forward, waitlist or reject them based on their performance. 

However, website was incredibly slow, frustrating to use, dull and boring to engage with and was limited in ways the employer could review candidates. It didn’t do anything drastically different than an all text candidate profile via email. And so instead, most employers preferred reviewing candidates via email.

Was that ideal? Nope. They got lost in trail mails, and while we at Shortlist were trying to make the review process more automated,  we ended up spending hours on phone calls walking employers through candidate profiles. 

Goal

• Build an easy-to-use and delightful platform that helps employers review candidates based on their performance, skills, and experience.

• To be able to manage more aspects of their hiring process on the platform.

Research

I really enjoyed researching as a part of the process and especially speaking to lots of employers and understanding them as people and how they hire. I asked them questions around:

• Usage of the existing employer website and problems associated with it.

• Overall hiring process, how candidates were moved through the hiring funnel and how hiring decisions were being made.

Competitive research gave us insights into how candidates were being showcased and what features were available to employers to make decisions as part of the hiring process. 

Insights > New Employer Journey

Based on our insights from research and discussions with the team, we came up with four broader stages a user would go through on our platform based on the action they were meant to take:

Features and Design

As my first project, the idea of designing an incredibly complex platform made me nervous. I was going to have to go step-by-step and make a lot of mistakes before I could really understand best practices.

I started out with low-fidelity designs and often got carried away by the smaller details, and that left me with lots n’ lots n’ lots of iterations. Eventually we got where we wanted to be and it was a great learning experience although, a little time consuming and messy.

Lesson #1: Always start with wireframes. Don’t focus on the details.

Page 1: An employer’s home

A key insight from interviews with employers was their need to track the role’s overall progress. The home screen gives them an overview of all their open and closed jobs on the platform and a sense of where the candidates are in the hiring process.

Page 2: A job’s dashboard

When running multiple jobs on the platform, the job dashboard is where employers get a more detailed overview of a particular role. 

Based on our learnings from the older employer website, we also wanted to guide employers through the hiring process. To ensure we can get them a hire in the promised time, employers needed to action upon candidates quickly and make sure they were moving candidates through the hiring pipeline. We also wanted to make sure we could give the employer a way to give quick feedback which we did through a fun feedback card.

Amongst all pages as part of this platform, this was my least favourite page - we didn’t utilize space in the best way, some bits actually overlapped with other pages, and was a little too playful. This is meant to be redesigned soon!  

Page 3: List of vetted candidates

This view is where employers can see a compact view of vetted candidates by Shortlist and also filtered lists by every stage of the hiring funnel. 

Another key insight while talking to employers was the need to prioritise candidates. Considering the size of the applicant pool, employers prioritised who to review based on their must-haves. To enable easy prioritisation and faster decision making, we added the ability to filter and sort the list of candidates by different parameters.

Page 4: A candidate’s review

This screen is where employers get to learn everything about the candidate which helps them make a decision to move a candidate forward to the next round. 

To come up with creative and engaging ways of showcasing a candidate, I based my researched on keywords “profile” and “storytelling” and went through diverse platforms - datings, games, social media, training, etc to see how each put together a user’s story.

For our final iteration we decided to go with a cards approach to showcase a candidate. Vibrant cards with engaging charts and other information that would stack and scroll to become the profile. While this was an easy, effective and fun way to organise information, it also worked well with development within material design.

Empathy and delight: A step beyond

A big, big part of the design process at Shortlist is to continuously keep the users at the forefront and think about how they feel - as people, as part of what they do or while using a product. We think of ways we can make them feel supported, heard and often delighted with ease of use, colour, illustrations and interactions.

The visual theme for the Talent Gallery was inspired by nature. It was gender neutral, a metaphor for growth and a pleasant connotation when sitting at office.

*The icons used in this project are all from Shortlist’s bank of purchased icons.

Pleasant empty states

Adding some fun while collecting feedback

Friendly and emotive modals