HNG Website — A UX Redesign Case Study
Website
Education Technology (EdTech)
Product Strategy, Design Interaction, Prototyping
Introduction
This project is a redesign of the HNG Internship Website. This case study gives an insight into the redesign of its “The Interns (So Far)” Page.
The goal of this redesign was to achieve these 3 core deliverables:
Goal 1: Conduct an assessment of the website
Goal 2: Identify redesign problems and opportunities
Goal 3: Create a prototype of the redesign.
The New HNG Internship Website Design
Redesign Problems and Solutions
Issue #1: The Section Name
The section defines the trained personnel from HNG Internships as Interns. This nomenclature portrays them as interns, not as talents which is a term hiring managers or startups use in their entry-level hiring process.
Current Design
Solution: The New Name
With the need to incorporate “instructors” and also create a section for “yearly new interns” separate from the “Old Interns”, it was important to change the section name from “THE INTERNS (SO FAR)” to “HNG TALENTS” to embody all categories.
The new name also projects a sense that the graduates from the program are no longer interns, but talents trained with hirable tech skills.
New Design
Issue #2: Inability to locate new interns from the Interns’ list
The intern repository does not clearly define who are new or past interns. This will impede hiring managers from finding and selecting the talent(s) they want before contacting HNG Internship admin. Resulting in a prolonged talent hiring process.
Solution: Visibility for New Talents
To make the talent finding and selection process easier for hiring managers/companies (and in turn HNG Internship Talent Outsourcing Team), a sub-page that houses the list of new talent that finished from the program yearly was created.
A filtering system was also incorporated to make talent search easier by career track - UI/UX Design, Machine Learning, Frontend, and Backend Development.
Issue #3: No medium to know more about the Interns’ work & skills
The Interns (So Far) page does not provide the portfolio of new talents/interns which is a vital medium for getting a sense of the projects they have worked on and an insight into their skills
Solution: Optimized Talent Search and Sourcing
To also boost the confidence of hiring managers/companies, an instructors sub-page was created to show them the talented teachers and mentors who trained the past and new talents.
A portfolio feature was also added for all talents - instructions, new and past interns.
Issue #4: Poor UI in the arrangement of the interns’ list.
Poor UI in the arrangement of the interns’ list.
Current Design
Solution: Restructured Past Interns Section
The past interns' section was restructured to make the interface more user-friendly.
New Design
How The Redesign Was Achieved
1. Heuristic Evaluation: Understanding the Current Experience
An assessment of the website was conducted by taking a keen journey into its flow and testing out all the features existing in it. This gave an insight into how a typical user will interact with the platform and also helped identify usability issues and pain points. The issues identified as expatiated above are:
No medium to know more about the Interns’ work & skills
The Section Name: The title "Intern" portrays the trained personnel as interns, not talents.
Inability to locate new interns in the Interns’ list
Poor UI in the arrangement of the interns’ list.
2. Creating The Solution
To craft the solution to the identified problems, we began by understanding the problem we want to solve by highlighting the Business and User Goal for the platform and developing User Personas to represent the users’ voices.
User Personas
The user categories for the HNG Website are - Potential Interns and Hiring Managers. The different user segments use the website to meet different needs as highlighted in the personas below:
User and Business Goal
An understanding of the “why” for both the business (HNG Internship) and its users.
Business & User Goal
3. Redefining User Experience Landscape
In solving the pain points that current users face when using the website, we redefined their experience in line with their goals and business needs.
The Core Question: How Might We?
The How-Might-We questions that shaped our solution are, how might we:
Provide visibility for new talents and help them get jobs easily.
Improve the hiring process for hiring managers with the best efficiency.
Help potential interns believe in the quality of the program to make them the best talent.
Help users feel accomplished (in performing set goals) when they use the website.
Information Architecture (IA)
The IA design focused on the organization and structure of the content of the “The Interns (So Far)” page. This fleshed out how the information will be arranged to improve users’ navigation in finding talent, ease of perusing the talent repository - past talents, new talents, and instructors.
Old Information Architecture
New Information Architecture
User Flow
This user flow reflects the users’ journey progression from the landing page of the website to discover the functionalities of the HNG Talents page and its subpages (Instructors, New, and Past Talents).
User Flow
Prototype
Here is a walkthrough of the prototype
Key Learnings
This redesign was my first journey into conducting usability evaluation. It helps explore how to create a single feature that achieves multiple goals (or have various use case) - in this case, "the portfolio" link. Overall, it was a great project to work on.
Conclusion
Thank you for reading!
This redesign is a better improvement for finding and hiring talents from the HNG Internship; and a great aesthetic for the website interface. You can support HNG Internship by donating monetarily to the program or support by donating software or tool at www.hng.tech
UP NEXT
