Designing a Responsive Web App for a Job Search Platform: A UX/UI Case Study
My 3rd client project as a UX Design student
If you’ve ever been a student looking for a part-time job, you know that it’s not always a piece of cake. In big cities where the job market is competitive, it can be tedious trying to find a part-time job, especially with minimal prior work experience. Nowadays, there’s plenty of online job search engines out there that can help, but not many cater specifically to part-time jobs and even fewer get you the results you want fast.
binqit is an online job search platform focussed on helping students find part-time jobs quickly and easily using a vetting algorithm that matches them to jobs based on their profiles. The idea for this Toronto-based startup was born when the founder moved to Canada from Europe and was having difficulty finding a part-time job as a university student.
As someone who has been both a student and a Recruiter in the past, I couldn’t wait to tackle this project. Having used various platforms to both find a job and find the right candidate for a job, I was excited to offer my expertise to design a product that would alleviate so many pain points that I myself have encountered.
Project Brief
My team and I were given 3 weeks to design the user experience and interface for binqit’s responsive web app (desktop and mobile).
As binqit’s existing web app was identified to have too many usability issues, it needed a responsive web app designed from scratch to improve a noticeably cumbersome experience.
My Role, the Team, and Our Design Process
I primarily worked on UX for the project and assisted with UI alongside my team members, Deborah Maswi and Tanya Arkhypchuk, who did the same. Our team member, Kriti Trivedi, led the team in UI for the project.
My role included conducting research, creating user personas, visualizing the user’s journey, defining the style direction, designing mid-fidelity and high-fidelity wireframes, testing the prototype, and designing responsive mobile screens.
Our design process consisted of 5 phases which were executed using agile methodology: 1) Research 2) Plan 3) Design 4) Test 5) Iterate
Research
Surveys and Interviews
Most design sprints start with research — ours was no different. We sent out surveys to university and college Facebook groups and subreddits, as well as to our own friends who were current students or had been students at some point in time. We screened survey participants to isolate those that have held a part-time job or have looked for one. Our survey asked participants the following questions:
- What things do you consider when choosing where to apply for a part-time job?
- How do you prefer to communicate with an employer for the first time?
- What job search platforms have you used to look for part-time jobs? Is there anything you like and/or dislike about the platforms you have used to look for part-time jobs?
- Have you ever faced any difficulties during your job search process? What kind?
We received a total of 47 survey responses but we didn’t stop there. We interviewed 11 of those participants to get a better understanding of their thoughts and feelings about the job-hunting process. Slowly but surely, we were starting to see quite a few trends emerging in our research.
As there are two sides to every coin, we also had to consider employers’ thoughts and feelings about the hiring process. We focussed on small-medium businesses (locally-owned restaurants, bars, cafes, etc.), as large businesses (chain restaurants, retail giants, etc.) most likely already have internal applicant tracking systems in place. We interviewed 6 business owners to understand their needs and frustrations when it comes to finding the right candidate for the job. Some of the questions we asked them were:
- How do you find applicants for open job positions? What online platforms have you used to find candidates?
- What do you take into consideration when choosing which online platforms to use?
- Is there anything you like and/or dislike about the online platforms you’ve used?
- Do you have any concerns or frustrations when it comes to finding candidates and/or screening applicants through online platforms?
- What things do you take into consideration when screening applicants?
Personas
To compile and visualize our user research, we took our participants’ responses and created 2 affinity diagrams — 1 for job seekers and 1 for employers.
From these affinity diagrams, we devised 2 user personas that will represent binqit’s target users. These personas will guide us throughout our design sprint to ensure that we design for our users’ specific goals and needs.
Competitive Analysis
As there is quite an abundance of job search platforms that exist today, we knew binqit would have a lot of competition. We conducted a competitive analysis to find any gaps in the current market landscape that our product could fill, focussing mainly on job search platforms that cater to part-time jobs. We looked at features that — based on our user research — could be important to our target users:
- Commute time: Do the job postings show commute time from the user’s place of residence?
- Availability: Are the required days and hours shown on the job postings?
- Matching: Does the platform match the user to jobs based on skills, experience, etc?
- Feedback: Does the platform let users know if their application has been declined or moved forward?
We found that not a lot of job search platforms had these features. This provided us with direction moving forward, as we knew that incorporating these features into our design would give binqit the upper hand in its market.
Planning
After compiling and analyzing all of our research, we came up with some ideas for binqit’s web app. In order to successfully create a part-time job searching experience that is quick, easy, convenient, and transparent, we need to:
- Match job seekers to jobs based on skills, qualifications, and availability
- Offer built-in messaging and scheduling
- Provide timely application status updates
Because we were limited to only three weeks, our team focussed on the job seeker’s user flow — how they would navigate the web app — instead of designing both the job seeker’s and employer’s user flows. This would include the following tasks:
- Create a profile
- Search for jobs
- Apply to jobs
- Connect with employers via messaging
- Schedule interviews
- Track applications, connections, and interviews
Site Map
With these features in mind, we created a site map to help us visualize the structure and organization of the content in the web app.
Design
UI Design Direction
As we began the design stage of our project, we had to nail down the style direction that binqit’s web app would take. We wanted the platform to seem friendly, modern, and fresh, while still evoking a professional and trustworthy feel, so as to resonate with our young millennial users. We used a variety of purples with yellow accents, along with a sans-serif font (Proxima Nova) to emulate binqit’s fresh and young brand image. Purple is often associated with the future and ambition, and yellow is often associated with positivity and happiness — these are all feelings we wanted to evoke in our users.
Low-Fis, Mid-Fis, and Iterations
As we sketched low-fidelity wireframes, we used them to create a user flow that visually mapped out the path a job seeker would take to create a profile, search for jobs, apply to jobs, chat with an employer, and schedule an interview. We also labeled features and the pain points they would alleviate to ensure we were nailing all of our users’ goals.
Once we had our designs sketched out, we converted our low-fis into mid-fidelity wireframes in Figma.
We also did several iterations of various components to determine the ones that were more clear and functional. For both the job card and navigation bar we settled on option 2.
Design Decisions and Features
Availability
Going back to our user personas, one of our job seeker’s pain points was that they don’t know the days and hours a job requires, and so the jobs they apply to sometimes end up not suiting their availability. On the flip side, the employer’s pain point is that they don’t know the applicant’s exact availability when they apply for the job.
In order to alleviate these pain points, we designed the ability for job seekers to input into their profile their exact daily and hourly availability so that they can be matched to jobs based on that and the availability the employer needs (visible in job post).
Job Post Details
From our job seeker’s persona, we know that one of their frustrations is that job searching is time-consuming. To make the process of parsing through job posts quicker and easier, we laid out all the most important information about the job in an easy-to-read format. The job seeker can easily see:
- How they match the job’s requirements
- The hourly rate
- The start date
- Various commute times depending on starting location and method of transportation
- Responsibilities (bullet points)
- Requirements (tags)
- Exact days and hours needed (tags)
To make things even easier, the job seeker can apply with just one click of a button, submitting their profile to the employer.
Automated Decline Messages
Another one of our job seeker’s pain points is not hearing back from jobs they’ve applied to but have been declined from. Business owners can sometimes be too busy to send every applicant who didn’t make the cut a decline message, but who can blame them? They have a lot on their plate already. However, this sets jobs seekers back in their job search as they wait to hear back from an employer who isn’t going to be reaching out anytime soon.
To fix this issue, we came up with an automated decline message feature. Once a job seeker has applied to a job, their application will sit in the employer’s “applicants” folder. After 3 days of no activity with the application, the employer will receive a notification asking the employer if they wish to connect with the applicant or decline them. All the employer has to do is simply click one of the two options. If they click “decline”, a pre-written message will be automatically sent to the applicant informing them that the employer will not be proceeding with their application. The message is direct yet kind and friendly, so as not to discourage job seekers from continuing their job search.
Testing
We tested our prototype on a total of 8 people. The goal was to find out if the web app we designed was straightforward and easy to navigate. The task was to create a profile, find a bar-back position, apply to the job, and schedule an interview with the employer. In order for the test to be successful, participants had to successfully complete the task in less than 5 error clicks. The results from our testing showed that 7 out of the 8 participants were successful, meaning that from a UX standpoint our web app was good to go!
Responsive Mobile Screens
Below are some of the responsive mobile screens we designed for iPhone X and the corresponding desktop versions.
Final Prototype
Our final prototype takes the user through the process of creating a profile, applying for a Barback job, messaging with the employer, and scheduling an interview. Check it out here!
Conclusion
Final Thoughts and Future Steps
Our 3-week design sprint was definitely not enough to completely release binqit’s web app, however, we feel that we tackled the project successfully. Our prototype met the needs of our job seeker persona by making the job searching process quick, easy, convenient, and transparent. Although we did not have the capacity to design the employer’s side of the web app, we took our employer persona’s needs and frustrations into consideration in our design.
If given more time, we would love to explore the employer’s side of the web app and design the user flows for creating a business profile, posting a job, tracking applicants, messaging applicants, sending interview invites, and sending automated decline messages.
Learnings
This project taught me that when it comes to design, quality is more important than quantity. My team originally started out with a much wider scope than was doable in 3 weeks. Once we narrowed our scope, we were able to focus on making our designs top-notch and as robust as possible.
If you thought this case study was neat, please give it a 👏! Check out more of my work at www.annaromanovskiy.com.
