JobHopper

Responsive website for a Career Services and Job Recruiting Platform

BRIEF

JobHopper is a company based in India that offers career service and a job recruiting platform for graduate students and alumni in the Indian Colleges and Universities. They have an existing partially done non-functional website. They are looking for a revamping of the existing branding - refreshing the brand image, and creating a responsive web design.

JobHopper is a digital platform limited to college recruiting for job search - a medium that connects university students with employers. A platform, unlike LinkedIn, that mainly helps people with no prior experience or connections in the industry.

GOALS AND OBJECTIVES

Create a desktop-first responsive (desktop and mobile) platform


Redesign the existing website, improve its information architecture and usability, and add modern visual design elements to it 


Redesign the brand with a more inviting and modern feel

ROLE                 UX Research, Product Design, UX/UI Design

COMPANY       JobHopper

TOOLS              Figma - Design & Prototype  |  Miro  |  Zeplin

TIMELINE           5 Weeks - Ongoing

There was a need for a digital platform limited to college recruiting for job search - a medium
that connects university students with employers. A platform that mainly helps students with no prior experience or connections in the industry.

EMPATHIZE

Research Goals
Research Methodology
Research Finding
Insights for Innovation
Research Analysis

DEFINE

User and Business Goals

Product Dev - Feature Roadmap

Card Sorting

Sitemap

User and Task Flows

IDEATE

Low and Mid - Fidelity Wireframes

Branding

Responsive Designs

Design Systems

PROTOTYPE

High - Fidelity Wireframes

Prototyping in InVision

TEST

Usability Testing

Affinity Mapping

Handoff to Developers

THE DESIGN PROCESS

ITERATE

Repeat the process - Ideate, Prototype, and Test

EMPATHIZE

 

USER RESEARCH

RESEARCH GOALS

Identify the target users and understand the challenges they face when applying for a job with no prior work experience and connections in the industry?

01

Learn about direct and indirect competitors and understand how they help graduating students find jobs.

03

Understand the preferred mode of accessing the website, i.e., what do the users prefer to use - their phones, desktop, or tablets? And, why?

04

What are the key features students (user type - 1) look for while applying/searching for jobs?

02

Study some design patterns used by the competitors that make the tool user-friendly for students.

04

RESEARCH METHODOLOGIES

PRIMARY RESEARCH

Customer Interviews and Contextual Inquiry:  

User research was conducted through 1-on-1 interviews with 5 participants (3 males and 2 females) to empathize with them and learn about their experiences while searching and applying for jobs. I interviewed students, recently graduated professionals and users who graduated a long time back but switched jobs since then. I gathered as much as I could from the end-users to gain knowledge about their goals, frustrations, motivations, and analyze the scope improvement by empathizing with them.

SECONDARY RESEARCH

Competitive Analysis and study of trends online:

I started exploring various online recruiting platforms used in the US as well as India. Viewed their websites, features, strengths, and weaknesses. I also read quite a lot about the Indian Job recruiting trends to understand the current practices and statistics. This helped me gain some insight into the options available in the industry.

INSIGHTS FOR INNOVATION

After conducting user interviews, contextual inquiry and analyzing the gathered data, four common insights emerged.

STAY INFORMED

The availability of proactive notifications, for example, to learn about the latest on-campus and off-campus openings, to learn about the status of the application, and to know the eligibility to apply, makes the user ‘stay informed’ and confident. 

NETWORK

The ability to build connections and network in the professional community enables the user to reach out to alumni, recruiters, and employees, in turn, increases the probability of success.

CONVENIENCE

The convenience of being able to apply with one click, and not having to fill multiple forms, through extensive student profiles, makes the process faster. 

KNOWLEDGE

Accessible learning content to help users be industry ready and professionally smart increases the number of success stories, and university credibility. 

RESEARCH ANALYSIS

Based on the secondary and primary research findings, the results were used to create several deliverables to better understand and empathize with our users. 

 

The aim was to help us understand the experiences of users within a broader context — physical, social and emotional. The goal was to be able to better ‘define’ what their needs are in order to build the desired product.

To better understand the target audience, to create empathy, and to give the user base a more ‘human’ feel, I created a persona. Rohan is a student with no prior experience and near no connections in the industry. He wants to be able to find his dream job. 

By synthesizing data from the research debriefs and 1-1 interviews, we created a fictional but realistic representation of the target user group.

USER PERSONA

EMPATHY MAP

To enter into a more human-centered mindset and to organize the research into a coherent vision, an empathy map for Rohan was created.

DEFINE

 

DEFINING THE PRODUCT

IDENTIFYING PROJECT GOALS

Based on the analysis achieved through research and empathizing with our users, the next step was to define the information architecture of the website.

 

For that, at this point, it was important to re-visit the original design brief to chart out the business goals and user goals gathered from the research. Identify where they overlapped, and where they differed.

Based on all the data gathered and understanding the goals it was now time to hone detailed requirements and prioritize by creating a feature roadmap. Given the time constraints, the product roadmap helped me to prioritize the features that were needed for the MVP.

MUST HAVE FEATURES

NICE TO HAVE FEATURES

FEATURES THAT CAN COME LATER

List of features mapped against the interaction/page

LANDING PAGE

STUDENT PROFILE

STUDENT DASHBOARD

JOB SEARCH PAGE

EVENTS PAGE

COMMUNITY/ MESSAGING PAGE

CAREER CENTER

SITEMAP

Having three diverse user groups - students, recruiters/employers, and universities/career centers, JobHopper would be extremely heavy on information. It was crucial to lay down the overall structure of the website.

 

A sitemap was created to show the relationship between the content on the website was created. Using the product Roadmap as the reference I started visualizing the content, its hierarchy, and its placement.

USER AND TASK FLOWS

Created Task Flows helped visualize how Rohan, and eventually the target user audience, might interact with the website to complete various tasks based on different scenarios.

IDEATE

 

At this point in the design process, I began creating low-fidelity to mid-fidelity wireframes. To begin the product, the client suggested creating the portal from the students' perspective before the other two users. I tried to emphasize priorities that arose from the user research and the client brief, keeping in mind the product development roadmap.

BRANDING AND UI KIT

Once the wireframes were created it was then time to work on visuals on the JobHopper brand. The re-branding of JobHopper was done after considerable discussions with the client. The essence of the logo and the brand style was to maintain a professional and energetic. The logo, typography, color palette, and imagery was worked out. 

 

Thereafter, based on the principles of Atomic Design by Brad Frost the idea was to define/design the small, independent - atomic - parts, to help build the large molecular structures.

Defined the UI elements such as icons, spacing, navigation patterns, grids, and other similar elements for the JobHopper Brand.

Source: Atomic Design Icons

by Marivi Carlton - Dribbble

PROTOTYPE

 

HIGH-FIDELITY WIREFRAMES AND PROTOTYPES

After creating high - fidelity wireframes, I create a prototype in Figma for the user to accomplish a defined task.

Scenario: A student wishes to apply for a full-time software engineer role in the city of Bengaluru in India. 

JOB SEARCH

REACH OUT TO AN ALUMNI AND ASK FOR A REFERRAL

APPLY USING A REFERRAL LINK

EXPLORE THE COMMUNITY

TEST

 

USABILITY TESTING

Once the interactive prototype was designed, we conducted usability testing to study how people respond and interact with the design. 

TEST GOALS:

To see how users react to the design of JobHopper

01

To monitor the pattern the users follow while navigating through the website to accomplish the task of searching and applying for a job

02

To spot the elements on the website that create frustration or confusion to the user while they perform the required task

03

To observe where the user is able to predict the upcoming step

04

TEST RESULTS

Individual data points gathered were categorized as seen in the image. Based on the insights gathered from the affinity map, the highest priority revisions were created on the prototype 

DEVELOPER HANDOFF

DEVELOPER HANDOFF

A developer handoff document was created using Zeplin. Click to view the document.

NEXT STEPS

The next steps are to design the remaining screens (events, students profile, community, career services), conduct a second round of usability tests, and create responsive designs adaptable to mobile devices. 

JobHopper responsive designs to be then handed over to the in-house developers at JobHopper for design development.

  • Twitter
  • LinkedIn
  • dribbble_Black