Richa Mohapatra

Careers page- Experience redesign

Sat, 17 Apr 2021 00:00:00 +0530

Platform: Web, Mobile Web

My role: Research, Ideation, UX Design, Interaction Design

Redesigning careers page experience for Jobseekers & allowing through an efficient online recruitment process.

Context:

This project is a part of my Internship project at Testbook & my role here was largely independent in building their careers page.

Company Profile: Testbook provides free tailored mock tests for users, with upgradable plans for their live tests for different exams. They cater to students from the most remote pockets of the country, accessible in the form of Testbook.com (on the web), Testbook app (on phones & tabs), and even Partner Coaching & Online Centres (on-ground).

Problem statement

User Problems:

Job Applicants (Target User) coming to the platform found it difficult to search for available job positions.
No proper CTAs to navigate the user from point A(let’s say ‘starting a job search) to point B(reaching the job description page for the same) → such instances observed across main & its child pages.

Business Problems:

Currently existing Career landing page for Testbook felt outdated as well as proved ineffective in communicating with the applicants company’s achievement & growth so far.
‘Job Search’ isn’t establishing in a quick & easy search & results.

Project goals:

A home page that communicates well the company’s culture, their vision & the value that they put towards each employee.
Streamlining Job Search by improving flow & introducing features for better navigation & experience to overcome frustrations of users.
Addition of a dedicated section with content personalised to cater different teams.
Guidelines setup with recruiting team defining the minimum and maximum Job requirement to list.

Research:

How I conducted my research ?

Secondary User Research Method: I read a few articles and interviews of job seekers applying online and discovered their pain points. I also took into account the challenges I have faced as a user accessing career sites being an applicant.

Conclusions based on my findings:

Given that most candidates have to go through a few rounds after getting shortlisted,

Most candidates seek jobs from multiple places, they generally take a quick glance, so they want desired information(differs from person to person, but common points include employee benefits, work culture etc) to be quickly accessible without much pain.
Users want to find (the desired job), reach+ read (Job description) & apply within a short span of time.
Given that most candidates over a period of time have to go through a few rounds after getting shortlisted, they desired a short & simple application process.
Bonus→ if the current employees tell a little bit of inside story concerning the kind of work & culture they’ve experienced here.

Possible solutions:

Search field & Job filters introduction, that are easy to find and use.
Testimonials/ blog pages having experiences of employees working at Testbook.
Short easy to fill application form.

Ideation

First i started with defining the primary & secondary function of the page, which in future will guide me to ideate the possible flows which serve the defined functions.

Functionality: How and as what will this page Function as?

Primary function:

Current Openings section » leading the User( Applicant) to reach it’s Goal (Finding desired job profile as easily as possible)

Secondary Function:

Communicating about the company and the benefits of working here through Visuals+ Text » what this would do is build a certain sense of trust regarding the kind of work ethics, Positive experience they could expect etc.

Then I quickly drew out some low fidelity wireframes & decided upon pitching two different JOB SEARCH flows. The below picture explains what is the flow & how they navigate the user.

Job Search flow Ideas

Had a discussion with my PM. Later on, we decided to go ahead with flow 1, because for the following reasons:

User able to reach & see the job listing with a single click → filtering option comes after taking a glance at the openings, hence primary function performance was comparatively much easier.
We observed flow 2 had a lot of two and fro. Even though job openings had separate page, there’s a huge chance we could let the user would miss out on performing the Secondary function for flow 2.
In flow 1 while the button navigates the user to the job listing section at the bottom of the same page, flow 2 navigates to a different page. Intuitively, it’s easier to scroll up than to click back to the previous page.

Below displays the discussed & finalised Task flow structure of an applicant coming to the platform:

Design

I went on to make high fidelity wireframes for both flows, to give a more clear view of what the pages would look like for the user. Through this process, I noticed the hierarchy of information too changed for each flow.

Wireframes & Layout explorations

Web First Approach: We decided to go for this, as most users if not all, generally chose to apply from their laptop or desktop devices, as resume & other credentials are readily available.

I then explored a few ways through which the user would access the job listing section. Introduced the search & job filter options in a few different ways explained below:

Layout & functionality variations for Job listing section

Problem we came across:

I noticed few teams having a large number of job openings and there was no way the user could easily identify the preferred job opportunity among these huge listings of jobs.

Solution:

Sub-categories among the job listings within the same team. I have displayed two variations of my solution below:

Proposed UX for Teams with large no. of Job openings

Result:

We found both solutions were equally solving the problem. Still, decided to go ahead with Solution 2 as the components used in it were in coherence with Testbook’s existing design system.

Job Description page:

Data figures suggested more than half of the people end up coming directly to the JD page from other job recruitment websites such as LinkedIn, which means they don’t get to see the culture & benefits **(which they aspire to see) something a person who comes organically to the platform would be able to see.

This makes the JD page really important & equally necessary to construct the flow that would cater to this set of users. **

After the basic structure of both the landing page and Job Description page was defined, team-specific pages with content personalised according to them were also made.

Mobile Web Version:

I went ahead to build a Responsive Design structure for the Mobile web where features were optimised to be viewable,accessible & convenient for mobile users.

Below displayed are the landing page followed by JD page and the WHY behind the hierarchy of each section & comparison with previous designs:

Landing Page

I believe deciding ‘when’ and ‘after what’ we show a certain thing plays a very important role in our narrative & the flow of information. It’s exactly like telling an engaging story, which has incredible potential to hook a listener (in this context →the user).

That said, let’s take a look at the finalised Job description page:

Job description Page

The Application Form designs for both Web & Mobile Web:

Application form- Web View

Application form- Mobile Web View

After Thoughts:

Presently the design is ready to get into the dev pipeline. The impact & success would be measured after the pages go live. For future improvements I have a couple of suggestions:

Considering adding a blog section & page where employees have written their experiences would have greater impact than testimonials.
Application form with a pop-up interaction may not be the best way to put up information, as the user won’t be able to go back and see the description & if they do details would get lost. This part could help some more iterations.
The filtering option among teams with large openings in the job posting section for Mobile web was removed, because of technical constraints. I think certainly there would be ways to solve this problem.

MeraBills- Research & redesign

Sat, 16 Jan 2021 00:00:00 +0530

Platform: Web

My role: Research, Ideation, Content, UX Design, Interaction Design, Prototyping

Redesigning Merabill’s Website would act as a primary marketing asset for their Financial management app designed for small business owners.

Context:

This project is a part of my Internship project at Merabiils & my role here included conducting user research & analysis, developing content that catered to target users and redesigning their website.

Company Profile: MeraBills is a fintech startup that is developing an Android app that aims to help small and unorganized sectors by keeping track of their income, expenses, and other transactions. Their user base range from small business owners, micro-entrepreneurs, Cottage Industries, service providers to NGOs, SHGs, and Entrepreneurship training organizations.

Define

Why it needs a Redesign?

After a careful analysis of the Merabills website, I drew the following conclusion of why it needed a redesign:

There was no proper CTA (Call to Action) on the website. Moreover, it is placed in such a place that the user has to figure out on their own.
There was no trust build-up when the user views it for the first time.
The main highlights of their product (the Merabills app) is not properly conveyed to the extent that it is easily understandable.
No way to understand how the app works.

Project Goal:

Essentially a website is a ‘marketing tool’ and a company like this with its Primary product being a fintech app would want to build an impactful website that will bring in partners and investors.

Primary User Identification:

Identified the Primary userbase (Target audience) & the secondary users which would keep me guided while deciding the structure, navigation & flow of the site.

User Identification

Research:

At this stage, I decided to do a Comparative analysis & User Research study and gain more understanding of the industry & understanding the userbase.

Competition/ Comparative Analysis

An extensive competitor analysis was conducted with organizations or companies directly related to Merabills’s business model, I analysed the information structure, layout, tone, and navigation.

Key Findings:

Khatabook

1. Khatabook’s tone is friendly, directed towards its users ie, small business owners in India, which provides the users with a strong sense of trust towards the brand.
1. Very Impactful and direct copywriting - For example ‘Small business Big dreams’

OkCredit

Most visually exciting website.
A very interesting section that communicates about the product’s reach across the country.
‘Contact us’ option in the navigation bar directs users to a page where there’s a brief audio-video tutorial (also has captions in Hindi ) showing users of the app how to contact them in quite an interesting way.
A very useful section on the landing page ‘ Our Team’ - which talk about the type of people leading the team and the teammates, which my opinion plays a big role when it comes to investors taking a look at the product.

Dukaanshala

When the user scrolls down it hides the ‘navigation bar’ & has to scroll up to get access, which I think forms a challenge here.
Overall site architecture is decent enough, although
A lot of inconsistencies in layout as well as the visual hierarchy, which can lead to confusion for the user.

Common observations across all websites observed above;

Placement of ‘Get the app’ or ‘Download from play store CTA → is an important design pattern to consider for redesign, as it enables anyone to directly check out the app. For the existing website, this link is placed right at the bottom, which forms a disadvantage.
Another interesting pattern observed was that each website had a unique way of presenting or highlighting some key features of the product.

User Research

UX research method- Secondary (For common data collection).

Primary User #1

People/organizations who would want to know about the core brand values, vision, impact, reach & business of Merabills. They can be channel partners, investors, potential partners, and Non-profit organizations that support small business owners, SHGs, banks, CSR corporates, etc.

Thereafter I tried to understand,

Who are these users?
The information they would like to view while taking a look at the website?
Where can we improve the site to cater to this set of audiences?

Brands & organisations I studied in this process: TATA Trust, Buzzwomen, Internet Saathi, FWWB, Dhriti Organisation. Below displayed are some insights mapped out for two organisations:

How the user would perceive the site & what factors affect it? Here’s a small chart showing that;

Ideation

The information architecture of the content & the structure was defined while discussion with the team, taking into account what exactly is needed and what isn’t necessary.

Information Architecture

Problem: Now with the IA structure our main components were defined, but we still needed to figure out the navigation.

Solution: To solve this I came up 2 different types of sitemap ideas →

one which is a single-page layout having all the information and links focused primarily on the Primary user #1.
the second one, a multiple-page version where different pages cater to a different set of audiences.

Two different Sitemap Plans

Brain- storming Workable flows:

I went to giving 6 different flow ideas, among which I decided the one which was the most appropriate in regards to the user and the brand.

Workable Flow Ideas (based on sitemap plans)

Result: We decided on having a single-page website, as the information we thought there was very little information to put up for Secondary audiences and making a separate page for that wouldn’t really solve any existing problem or create a massive impact. Showing that on the page, where the user gets scrolled down or up to the desired section on the same page was a much better experience than numerous clicks that come with separate pages.

Content Development:

While coming up with the content for the website I kept in mind the primary user and the tone and the writeup was catered essentially towards the primary user, ie; Potential Partners/ present stakeholders to build trust and confidence among them towards MeraBills.

We had a section where we wanted to show the problem users face and some anecdotal evidence backing that up.

Alongside this project, I had also conducted & documented user Interviews of few people around my city who own small businesses → to gain a better understanding that would help Merabills effectively address the problem faced by the general primary users. The document was later useful as content for that section. Few shops I visited:

A medicine shop, general store & few other small businesses around my city

—

Design

I created quick low-fidelity paper prototypes to discuss the layouts I’m planning to implement. Based on comments and reviews from the team I completed a few rounds of iterations before arriving at the final layout. I also explored 4 very different Visual Styles one based on the existing website & the other three were my experiments.

Visual Style Ideas

Then I went on to complete the final layout based on Style 3, as was approved by everyone and did prototyping for the same. Below displayed is the final website & its different sections.

Final Website