Job Bot

"Job Applications Organizer"

Goal: Design and develop a web application to ease job searching experience

Date: Jan 2018 - March 2018

Duration: 3 months

Skills: Interaction Design, UX Design, Needfinding, Interviewing, Wireframing, Prototyping, Usability Testing, Development

Tools: Adobe XD, Adobe Photoshop, HTML, CSS, Bootstrap

Team: Cross-functional team of 3

Role: UX Designer Lead & Front-End Developer

The Problem

There's no easy way to keep track of tons of job applications that you have sent out during your job search. Every time you applied for a job, all you get are tons of email that end up filling up your inbox. You might even forget the jobs that you've applied for and ended up sending another application for the same position.

The Solution

Job Bot is a web application built with job seekers in mind. This application is suitable for a lot of people, ranging from students who are looking for internships to people who are looking for a full-time job.

Our goal is to ease the process of applying for a job by providing a page where users could view their applications history. This main feature offers a better alternative to keep track of job applications compared to the existing job search app which only sends users separate confirmation emails for each position that the users have applied.

Competitive Analysis

The first step that I took after I have identified the problem is to do a competitive analysis on some of the existing job search app. By doing competitive analysis on the current job search app, I could identify which features are essential to be included in my app and if possible, to create new features that could improve job searching experience.

Competitive Analysis


User Research

In this step, I identified the goals and the target audience to able to approach the application goal by keeping the users in mind. Interviewing users is also one of the essential parts which allow us to be able to understand our users and to empathize with them.

From conducting this user research, I was able to understand the issues that students and other people encounter while searching for internships and jobs. One of the main problems rose after the career fair week that UCSD had every Fall quarter. Most of the companies at the fair ended up asking students to apply online. A large number of online applications are hard to keep track. In the end, a lot of students forgot what companies they had applied for and ended up trying to apply for the same position. This causes a problem because filling in a job application waste a lot of time, especially if when you tried to submit and it said: "You've already applied." It can be frustrating.

After I have finished collecting data from this user research, I made a couple of storyboards to reflect the problems and solutions that could be achieved by using our application. Creating the storyboards helps our team to be able to empathize with our users. Throughout the project, we constantly refer back to the storyboards to make sure that we have addressed all of the user needs in our design and implementation. Below is one of the storyboards:


Paper Prototype

Once I have completely understood our user's needs, I start creating the wireframes of our app to construct the user flow of the app. First, I sketched out the wireframes on paper. Then to check out on the completeness of the user flow, we conducted a user test to figure out any missing elements or flow.

Paper Prototype

After receiving feedback on our wireframes, we made some adjustments to the wireframes. Through the user test, I can realize some missing elements that are important to bind the whole user flow together. For example, we forgot to put a back button on some of the pages.


Moving on from the paper prototype, I created the low-fidelity digital wireframes using Adobe XD before I start developing the actual working app with codes.

Heuristic Evaluation

After I finished making the low-fidelity prototype, I conducted a heuristic evaluation of the interface design. I referred to Neilsen's 10 Heuristics to check if the interface design meets the requirements of the principles.

Some heuristics that my wireframes have fulfilled are:

  • "Aesthetic and minimalist design" - only presenting relevant information and keep the design simple.

  • "Consistency and standards" - the user interface design is consistent throughout the pages.

  • "Match between system & world" - the wording that I use for this application isn't system-oriented.

  • "Flexibility and efficiency of use" - there are back buttons on each page which allows the user to navigate easily.

The only principle that my app doesn't fulfill is regarding "visibility of the system status" due to the hamburger menu that hides available menu options.

Style Guide

Before we started working on the hi-fi prototype, we construct a style guide which consists of font styles, font weights, and color palettes to guarantee the UI styling consistency. I am also in charge of creating the logo of the app. The first thing I do is making a rough sketch of the logo with pencil and paper. Then finally, after I have shown it to my teammates and received their approval, I started creating the logo on Adobe Photoshop.

Color Palette & Fonts

Usability Testing

Usability testing was essential to get feedback from potential users. The usability test was conducted by giving different tasks to users to complete using the interface.

User Testing Tasks:

  1. Go to the Job Bot web app
  2. Sign in using Facebook login
  3. Browse for job openings that you are interested in
  4. Find a way to save the jobs that you like so that you could apply to them later
  5. View the jobs that you saved
  6. Apply for the job
  7. Track the status of the job you have applied

During the process of completing the task, I observed the users and made notes if they have any difficulties. I found that the bookmark button functionality was confusing because by clicking on it will only lead users to the job description page where the actual bookmark button was placed on the bottom. To overcome this problem, we make the bookmark icon actually to work. So when users click on it, it will add the job to their bookmarks automatically without unnecessary steps.

For the A/B tests, the two different interfaces design with different filter button wording and bookmark icon functionality were tested to record the Google Analytics. By collecting data on which buttons were being pressed the most or not being used at all, it was helpful to gain insight as to which features needed to be improved or were not meaningful at all. The result will help us in deciding which page design is better.


We are proud and satisfied with the result that we have been working on for the last three months. There sure are ups and downs during the process, but we managed to overcome all of it and bring a solution that could help users in overcoming their difficulties while searching for a job. From working in a cross-functional group of three, we have learned the importance of teamwork. Through brainstorming sessions, we could bring more useful features for users. Not all the time, we could think of complete and perfect ideas alone. Lots of unique and fascinating ideas were discovered together which allow us to combine and construct a well-formed solution to the problem we’re tackling.

If we have more time and could make changes to the project, we would want to add an automatic job application status trackers where a rejected position will be removed from the user's application history list automatically. I wish we could also find a more efficient way to do the A/B testing to achieve a significant chi-square result.

Final App Implementation