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
.png)
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.
I need to know the model's size specifications. What I also prefer is a liberal return and shipping policy.
I hate going to the stores to shop. I want the convenience to shop from anywhere and anytime.
I always check for reviews to read about someone sharing their experience with the size and its fit.
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
.png)
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.