Redesigning career counselling & career guidance website — UI/UX case study

Redesigning career counselling & career guidance website — UI/UX case study

In this article I’ll be sharing my detailed process and the reasoning behind my design decisions.

About the Company

I recently joined SahiCareer as a full time UI/UX Designer. And i was the only designer for this company.

Before we get started let me give you a quick introduction to what SahiCareer is. SahiCareer is a career counselling and career guidance startup based in Bangalore, India.

It provides online assessment (set of questions) to the users through 3rd party and based on what the user answers, careers are recommended to them. Then through one on one counselling sessions provided by career experts, a detailed career path and guidance are given to the users.

Now since you have a fair idea , let’s dig into the problem ⚓️

The Problem ⁉️

The company wanted to make their website as a one stop solution for all career related services. They not only wanted to provide career counselling to the users but also wanted to introduce AI based resume related services, job portal, loans for student’s education, provide more information and content on careers, blogs , colleges and many more. They wanted to implement a 4 step approach towards delivering end to end career services.

What was missing in their old website?

  • UI was not scalable for introducing their new features
  • Customer centric flow and approach was not implemented
  • AI based resume builder and AI based counselling had to be introduced
  • Content/sections was not organised

Who are users? 👩🏻‍🦰👨

90% of the users who visited the portal belonged to age group of 14-25 years. They visited mainly for
– Career assessment and career counselling
– Building a very basic resume which was offered for free.

But none of the users spent their time exploring other sections of the website or reading the content which website had to offer. The website lacked user engagement mainly because of it was not user friendly.

Sitemap and Wireframes

Since this website had to be built from scratch so i came up with Sitemap keeping in mind the 4 step approach which they wanted.Wireframe played the most important role in putting together ideas and concepts. It involved a lot of brainstorming sessions with Data Scientists and Product Owner.

Screenshot from XD as there too many wireframes

Design execution 👩‍💻

This was a huge project which involved designing around 180+ screens. But in this case study i am gonna talk only about main pages.

Home Screen

Let’s compare old design and new design and see the implementation of 4 Step approach.

Main homepage

The first thing you want to do is to let user explore the product. Give them an idea about what the product is all about. You don’t have to slam everything at once.

Discover Module

Here, user will take the assessment and discover his career interests. Discover homepage offers four kinds of assessments. User can choose any assessment depending on pricing and kind of career report the user needs.

Discover Homepage
  • On click of each of these cards, a detailed explanation is given to the user as to what each one has to offer, what kind of report it provides , test instructions and then the user can ‘start assessment’, eliminating the confusion among users.
  • In old design , after assessment there was no option for the user to know his career recommendations from the portal. Each time he had to open the downloaded report. In New design, i made it more customer centric by displaying user’s career recommendations on portal itself. I tried to bring in user dashboard like experience in homepage.
Discover module : Career Recommendations screen

Decide module

In this module, user can explore various job roles, subject areas, read career blogs and decide on career path.

Decide module homepage
  • Academics — Allows the users especially the students to explore career opportunities subject wise
  • Roles & Industry — Allows the users to explore career opportunities according to industry and sectors.
  • Blogs & Articles : User can read blogs and articles related to career, job roles, colleges, skills etc.
  • Personalised Counselling :Users can book a session with career expert if the user needed any career related suggestions or advice.
Academics Screens

If student is interested in a particular subject, there is a clear information regarding the career opportunities related to that subject and also provides information on how to proceed.

The same logic i have applied to Roles and Industries screens. Below were the issues from old design

  • icons used are too big
  • There is no search option provided
  • In screen 2 the image is completely stretched out.
  • All the sections in screen2 had to be expanded each time for viewing the content
  • Filters were huge dropdowns.
Roles and Industries Screens

Lets see in action the entire Decide module

Develop module

In this module, users will get to explore colleges & skill institutes to develop the right skill sets which will help to achieve their career goals. It also provides information on Government scholarships and education loans.

Develop Homepage
  • Education : Allows the users to explore colleges and courses
  • Skills and Institutes : Provides to user with skill institutes depending on sectors.
  • Schemes and Grants : User can explore various scholarships provided by government and private firms for education.
  • Financial Aid : Provides the user with information regarding which banks offer educational loan.

The main challenge for the above screens was to provide right amount of content for the users so that users find it useful and engaging and also at the same time it shouldn’t be too overwhelming. Another challenge was identifying which filters to introduce at user end because filtering data can make results more efficient to the users.

Lets see in action the entire Develop module

Do module

This module lets the user to build a professional resume and apply for the latest internships & job opportunities. I am writing a separate case study for this module, as this involves AI based resume and job portal which has quite a lot of screens and explaining to do.

Do Homepage

And… That’s a wrap!

This was a huge project and had a great learning curve. I also got to work on lottie animations using After effects. In this project i created 5 lottie animations.

I hope you guys found it useful and informative. Feel free to hit me up on any social media platform if you have any questions. I would be more than happy to have a chat with you.

Redesigning career counselling & career guidance website — UI/UX case study was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leave a Reply

Your email address will not be published. Required fields are marked *