Overview
Every company tries to recruit the best talent into their company. A career page is one of the best ways to attract the best talent. It serves to convert the website visitors into active job applicants, convince candidates to apply, and communicate the company branding to potential candidates.​ I identified a few UX issues in the WSO2 career website and implement a new design.
​
My Role
I led the UX and front-end design efforts for this project, from identifying pain points and sketching low-fidelity wireframes to applying visual hierarchy and designing interactive components. I collaborated closely with stakeholders, the HR team, fellow designers, and developers to align the experience with recruitment goals. Iterative improvements were made based on user feedback and analytics to ensure both usability and brand consistency.
Timeline
Feb 2022 - April 2022
​
Tools​
Figma, Adobe Photoshop, Visual Studio Code, Boostrap
​
Links
45% Increase in Application CTR
30% Boost in Average Time Spent on Page
50% Reduction in Bounce Rate
The outcome
The revamped careers page significantly improved both user engagement and content clarity. Clearer structure, stronger visual hierarchy, and streamlined CTAs helped users better understand company culture and available roles. Internal stakeholders reported a smoother candidate experience, and analytics showed a noticeable lift in page interactions and application starts. The redesign also supported talent acquisition goals by creating a more approachable, user-friendly entry point for potential candidates.
Don't just take my word for it
I've had the pleasure of working with Ruwanthi for the last couple of years and during that time she has proven to always be creative, reliable and a wonderful team player. Her contribution to our team goes beyond the work she does. She is well liked and respected by her colleagues and plays an important role in maintaining the awesome culture we have in the Marketing team at WSO2.
Most impressively, Ru has shown a commitment to continuous learning and development and extending herself beyond her comfort zone, which to me is the hallmark of any great designer. She has always been a great team player and contributor and will be an asset to any company!
I look forward to seeing where your journey takes you Ru, you'll always have a place on any team of mine! All the best!"
Previous design
WSO2 has two-page styles. One is a listing page and then individual vacancy pages. According to my initiative, I am planning to develop both pages due to user experience (UX) issues. Here are the current page designs.
Careers listing page
Careers vacancy page
Background research
1. Careers listing page
​
What I noticed,
It's hard to find the vacancies through the team vise. If users want to search for marketing jobs, they have to read every single vacancy name to find out that. Some research articles mentioned that people drop from career pages if they couldn't find a position by scanning. Also, WSO2 has part-time jobs as well, but users might difficult to find them without opening the individual vacancies.
Competitor Analysis,
All competitor sites have common features like the vacancy list broken down into job titles, teams, and locations. This is super helpful for potential hires that want to skim without having to open up every single opening.
What I found,
I wanted to see what are the areas that people take into consideration when they looking for a job. Therefore, I started a poll on LinkedIn. With those findings, I decided to list down the vacancies by teams as well.
Community research
2. Vacancy pages (Individual vacancies)
​
What I noticed,
I thought we better redesign this as well because;
-
It has the previous branding.
-
Mainly, we have to maintain consistency.
E.g. US vacancies have "About WSO2" on the top (HR hiring manager has a valid reason for that), and other countries have it on the bottom.
Competitor Analysis,
Everyone competitor has a small intro section about their company/mission, and every page has one place dedicated to that section.
Therefore. I was planning to redesign the individual pages and was planning to add the "About WSO2" section in the right top corner.
(That won't affect US vacancy requirements as well).
Design development
Design developments
1. Listing pages
I mainly focused to improve UX in the vacancy listing section.
-
Moved to the bottom of the page
- We have more than 60 vacancies, Therefore, moved this section to the bottom.
- As a careers page best practice, it's good to show all the vacancies in the listing. It might encourage users to feel "this is a growing company".
- Also, on the page top banner, CTA directs to the bottom section. Therefore, users might not scroll all the way down. On the other hand, if the person who doesn't know about the company can read other details/get an idea about the company on the top and then come down to see the openings.
-
List as a teams
- List vacancies under main teams. Based on my community research found that most of the user's search (1st priority) from teams, and based on competition analysis, many competitors list their vacancies under the teams.
-
Filter section
- User's 2nd priority goes to location. Therefore, I added a filter section on the left side to easily search locations and teams. Also, added the "Internship" and "get notified" under this.
-
Search bar
- If the users want to search from their interest area/keywords, such as "design" and "events" (We know those are under the marketing team, But outsiders don't know about that) added a search bar for that.
Other improvements
​
Most competitors focus on their values, benefits, testimonials, and overall try to give some impression about the company from the careers landing page
-
About WSO2 - I've added "About WSO2" CTA on the top of the page and redirect to our about us page, because no need to repeat the same content on the careers landing page again.
​​
-
Testimonial - Changed the layout to show their professional life and the fun/relaxed life at WSO2 (Now people can add WFH life as well). Also, it's good to have 4-5 testimonials on the page. Currently, we have only 3.
​​
-
Benefits - Our earlier benefits seem outdated now. Therefore, add a new one and improved that section
.png)
Used Figma to develop the design
%20.png)
Final design
2. Vacancy pages (Individual vacancies)
Right side section
​
This section's content is always the same and it is difficult to update manually if there is any update. Therefore, in the planning stage, I am decided to automate this section.
"About WSO2"
Every company has a small intro section about their company/mission (Like us), but every page has one place dedicated to that section. Therefore, I gave the right top corner for that. Also, this content updates most of the time.
"Diversity Drives Innovation"
The recruitment team requested to add that section too
Similar Jobs
This is help users to find similar vacancies easily without filtering or going back to the listing page.
For example, "Software Engineer - USA"
I'm planning to show the other "Software Engineer" (Different teams) vacancies in the USA.
IOM, no need to list down Software Engineer vacancies in other counties, because candidates filtered US vacancies and landed on the page. So that person is only interested in other Software Engineer vacancies.
Left side section
This section's content is always different and needs to update manually.
SM sharing
Anyone can easily share the vacancies and promote them. Also, It is very useful for the internal promotion team as well as the recruitment team.
Apply Now CTA
I've added it to the top of the page and bottom of the page. Earlier, we had fixed CTA. I removed it because people try to apply without reading the qualifications. IOM from that we can get a lot of applications but not the right person. (I've seen some companies add keywords on the bottom of the pages. So candidates have to add that on their application, show that the person read and apply to the job). Therefore, I've added it to the top of the page and bottom of the page (user can apply it after reading all the information)
​
After I shared the design with the team for feedback, I replaced the bottom CTA with a form according to their feedback. I haven't added it in the first design because we had a particularly long form. After a few discussions with the recruitment team, they decided to shorten the form field. Therefore, in the last design, I agreed to add the form.
Proposed UI
.png)
Final UI
Reflections
This project was a great experience personally because I got an opportunity to initial, research, design, and develop the webpage by myself. I also had the chance to work with different teams. Overall, the learning for all of us in the design team is the importance of consistency.
​
This is not an easy task with other marketing works since we have only 3 designers on the team. It is always hard to find a time for the project that we initiate. Always need to give priority to other project managers' work. This's why this page took a little bit more time than usual projects. Somehow got a chance to complete the work.