Responsive website for a Career Services and Job Recruiting Platform
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
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.
THE DESIGN PROCESS
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.
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.
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.
To enter into a more human-centered mindset and to organize the research into a coherent vision, an empathy map for Rohan was created.
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.
List of features mapped against the interaction/page
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.
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
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.
REACH OUT TO AN ALUMNI AND ASK FOR A REFERRAL
APPLY USING A REFERRAL LINK
EXPLORE THE COMMUNITY
Once the interactive prototype was designed, we conducted usability testing to study how people respond and interact with the design.
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
A developer handoff document was created using Zeplin. Click to view the document.
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.