The world’s best free applicant tracking system and recruitment software.
Visit the website
When I joined the company, the web-app was already designed and developed but lacked some important features. I had to reverse engineer some of the design decisions and analyze patterns to identify the lack of a unified dashboard, upcoming events and an agenda, and the inability to track candidates.
Besides coming up with new features for the web-app like a dashboard, an agenda, and an offer-letter generator, I designed the mobile app which integrated with the web-app and housed all the key features. I built the information architecture and designed the wireframes before focusing on the interaction design and the motion design of the app to enhance the user experience.
PyjamaHR is an applicant tracking system with built-in recruitment software. It makes managing applicants, posting to job boards, scheduling & conducting interviews easier and more efficient for companies.
The aim was to improve the web-app and build a mobile app to complement the web-app.
Since I joined the team a couple of months after they designed the product, I used an unorthodox approach and worked backwards to understand why certain decisions were made. I used the results of the company’s analytics platform, Fullstory as a starting point for my UX research.
Based on my background research, I gathered a list of findings-
We decided to address all the issues I found during my background research in the new version of the web app. The process of adding these new features however, was unorthodox. We didn't have the opportunity to create wireframes first and then move on to high-fidelity prototypes. Since there was an existing style guide, we directly jumped into the process of integrating these new features into the high-fidelity screens.
For the accompanying mobile app, we had to start the design process from scratch. Although the mobile app was meant to be an addition to the web app, we were encouraged to explore a different visual style as it was intended to signify that it could also work as a standalone application. This was an interesting problem for me to tackle as it seemed like we were asked to showcase both sides of a coin.
We decided to start the process by addressing all the insights which we uncovered through my background research. I designed key screens which included:
Presenting key pieces of information like Upcoming Interviews and Candidate Stats to view at a quick glance
Automatically generate an offer letter to candidates who are moved to the Hired pipeline
An agenda of the current day to keep track of upcoming interviews and a quick view of notifications
An in-depth view of the type of candidates classified by their source, pipeline and interviews scheduled
Once we decided the new primary features of the web app, we moved on to designing the mobile app. We decided not to translate all the features on the web app to the mobile app. In order to do so, we decided to start from scratch but retain the base structure of the web app.
The information architecture of the mobile app was guided by the flow of the web app.
Translating the whole web-app to a mobile app was not practical. The business goal of the company was to have the mobile app as a supplement to the web-app and yet function as a standalone application. This meant that the entire functionality of the web-app couldn't be recreated in the mobile app.
What features would make the cut?
To answer this question, I needed to understand the most commonly performed tasks by recruiters and also figure out the context in which they performed these common tasks. Since we didn't have access to a lot of users to test this out with, I had to empathize with the users and recreate a recruiter's workflow in order to come up with a sensible information architecture.
Since most of the screens were already created for the web app, I decided to start with medium fidelity wireframes to explain the mobile app to the rest of the company.
An interesting approach we took while designing the screens for the app is that we started with the innermost screen– The candidate profile screen. Our goal was to design the screen and then extrapolate elements from the screen to form the design style guide.
The design style guide was established based on the web-app. In order to design the mobile app, I used the Font Awesome library for the icons since they were descriptive. I created components like buttons and labels to contribute to PyjamaHR’s new mobile design system.
Our brief was to design a standalone app with a sense of familiarity with the the web app. Based on the structure of the web app, the mobile app wireframes and the design style guide, we came up with the final design and prototype. To augment the user experience, I co-designed the motion and animation on the mobile app.
I worked with the development team to build these features on the web app and to develop the mobile app. We decided to develop the mobile app using Flutter and I created a technical document accordingly. I included Flutter libraries for the components and animations I designed in the app.
For someone who is used to creating products from scratch, working on this project was a unique experience for me as I had to add new features to an existing product. I learnt about several techniques I could apply to my initial research process which would help me get acquainted with the project and make meaningful contributions to it.