My World of Work
UX/UI Design of job profiles
Timeline: August 2022 - June 2023
Role: UX/UI Designer
Software used: Miro, Adobe XD, Sketch, InVision
Introduction
My World of Work is a website owned by Skills Development Scotland, an organisation that offers career development and employment services in Scotland. The purpose of My World of Work is to provide individuals in Scotland with tools, resources, and guidance to support their career exploration, skills development, and job search.
The main goal of this project was to redesign the job profiles section of My World of Work. This part of the service is targeted primarily to secondary students and allows them to explore careers and learn more about jobs.
Starting from the existing website content, I was asked to redesign these pages to make them more engaging to users, and to provide more bite-sized information. In this project I collaborated closely with a user researcher and content designer, as part of a team that included data analysts and developers.
Snippets of a job profile as seen in My World of Work in August 2022
Research
Understanding the users' point of view and identifying needs and pain points.
What do we know?
The existing documentation included a feature list, usability testing reports, and previous redesigns.
The latest design iteration was completed by an external agency. This was user tested, but changes were not implemented. By reviewing the available documents and user feedback, I identified some points for improvement.
From user feedback:
The card ‘Possible routes’ is too vague - the title and some of the terms are not clear to users (e.g. Freelancing)
Secondary students are not familiar with yearly salary figures
Secondary school students are not familiar with qualification acronyms (e.g. MSc, HND )
Potential additional features:
Adding a list of technical (hard) skills alongside meta (soft) skills related to the job
Providing external links for additional information
Adding a related industries section, or any mention of industries (business requirement)
The meaning of 'Possible routes' and the contents of the card were not easy to understand
Users were not familiar with qualification acronyms (e.g. BSc)
First iteration
Goal: addressing known issues to produce a prototype that could be tested with users.
In this first iteration, I maintained the visual style of the external agency's designs, but reviewed the layout and added two sections in the page: ‘Skills’ and ‘How to become a [job role]’.
The section 'Skills' included two accordions that would list the technical and soft skills associated with the job.
'How to become an ecologist' included three tabs:
School subjects that might be useful (in Scotland students can choose which subjects to take in their final years of high school)
Possible routes into the job (e.g. university, college, apprenticeship, etc)
Helpful to have - which would include any other useful information.
The designs were quite content-heavy so it was important to test whether the mix of tabs and accordions was easy to navigate for users. I adopted a mobile-first approach.
User testing
As a team of three (UX designer, content designer, and user researcher) we conducted a first insight session with six first and second year students at a local secondary school.
The students had their own iPads and were given the prototype link to navigate on their own. We observed how they navigated the page and asked questions and opinions about the content of the page.
Below a summary of some the insight gathered:
Students use tablets daily in school and they had difficulties navigating a mobile prototype when viewed on a tablet
The terms 'meta' and 'technical' skills were not clear, and neither was the difference between the two
Not all the labour market information provided at the top of the page was interesting or easy to understand. For example, participants did not understand salary information as a yearly figure, and for most of them 'environment (home/outdoors, etc)' was not an interesting piece of information
Pupils liked the use of tabs in the 'How to become' section
Most participants did not scroll through the page. Instead, they focused on the content above the fold - this was possibly due to the confusion of seeing a mobile prototype on a larger device
The term ‘next steps’ to indicate one's options after high school was not clear
At this point we decided to continue the project using tablet as our primary device for the designs, to facilitate our users' testing experience by providing a prototype that would match the device used in testing and in their daily life at school.
Second iteration
Refining the designs further while involving the wider team
Team workshop
In addition to usability testing, we run a remote workshop with the wider team to collect feedback and ideas.
Summary of the workshop outcome:
Job category is not an essential piece of information, can be included in pills, breadcrumbs, or other ways that are less prominent
'Hours' and 'Environment' can be moved further down in the page to leave room for more relevant/interesting labour market information. We would need to run further testing to understand what is considered interesting by our primary audience
The quote next to the video doesn’t say much about what to expect from the video and could be removed
‘Read more’ is not a clear label, which might explain why users don't open the accordion
The terms ‘meta’ and ‘technical’ skills are unclear
Useful links could be moved at the bottom of the page
The new designs implemented a tab system at the top of the page, with the purpose of helping the user navigate the sections of the site without the need to scroll. In addition to this, the order of the sections changed, and we discussed several labour market information options with users, after determining our options with the data team.
Moving the tabs at the top of the page solved a few issues:
Users did not need to scroll to have an overview of the information available in the page
Dividing the content into three sections helps to break up the text in the page, which had originally been defined 'overwhelming' by some users
User testing
As the design changes were implemented quickly, we run a second round of testing with S1 and S2 students in two local high schools. Again in these sessions the students had their own iPads to navigate the prototype with.
Overall, users found the layout intuitive and easy to navigate. All users identified the tabs at the top of the page without prompting, as well as accordions with information. In addition to this, users provided some interesting comments:
Users' comments
Students are interested in mandatory qualifications and would like to see this piece of information at the top of the page
Some students prefer to see weekly salary data, others prefer monthly. It would be good to let users choose to see weekly / monthly / yearly salary information
The concept of job growth is hard to understand as a number or as a percentage and it needs to be presented differently
The term Technical skills is still unclear
The section Getting in is not visually engaging
The termTop recruiting industry is not clear
2 users suggested presenting recommended careers as a carousel
Solutions
Added 'mandatory qualifications' to the labour market information at the top of the page
Added the option to see weekly, monthly or yearly figures through tabs
Job growth was changed to low growth / high growth / no change rather than a number or percentage
New terms were proposed: general skills instead of meta skills, and practical skills instead of technical skills
The section Useful subjects was extracted fro the accordion and presented separately, and an illustration was added to the section
Top recruiting industry was removed
These changes were implemented alongside the UI improvements described below.
UI design
Defining the look and feel of the new website
The UI issue
This project took place at a time when My World of Work was going through important structural changes. It was known that job profiles could be improved, but the intention for this project was not to develop a new iteration of job profiles for the existing website, but to develop an improved version of this feature to be included into a new version of the site. This new version of the site would have a new look and feel, adopt new colours, new illustrations, and would focus on providing users with short form content.
The work on the website's brand proceeded in parallel to the redesign of job profiles. For this reason, several UI styles were trialled during the various testing phases.
Furthermore, at this stage the designs were moved from Adobe XD to Sketch as the team transitioned to the new software and started working on a new design system.
Temporary UI - following previous designs
The first iterations of the job profile page followed the original design proposal of an external agency. It was a conscious decision to present to user medium/high fidelity designs in order to collect feedback on colours, illustrations, and design elements which would inform the look and feel of the new site.
First UI proposal
Some colleagues in the design team were tasked with creating proposals for the website's new UI. At the time, job profiles was one of the few projects that was ready for high-fidelity design, and for this reason the proposal was applied to job profiles in order to gather user feedback on the new style.
At this point, the project was paused in order to give the dedicated design team some time to test possible UIs and define the look and feel of the new My World of Work's website.
Final UI
The designers that developed a look-and-feel for the new site conducted extensive research to define a final visual style for the site. Once this was defined, I was able to implement the new UI to the new job profiles.
However, in the meantime the scope of the project had changed and time constraints forced us to adapt existing content (as it was previously live in My World of Work) to the new layout and UI to facilitate the migration of the job profiles into the new service.
For this reason, some of the labour market information at the top of the page was removed, as well as technical skills. Our content designer mapped the existing content to the new designs, and the content was migrated from our previous CMS to our new headless CMS.
[the image of the final UI will be available after the new service launch in November 2023]
What next?
Job profiles were just a small part of the work that was done around refreshing My World of Work.
In relation to this project, I was also responsible for designing the user journeys to job profiles as it was known that the existing journeys were not intuitive and unnecessarily complex.
This piece of work focused around the creation of a job profile search and filter page and was completed in close collaboration with our data team and developers.
Learnings
Redesigning job profiles was a project that seemed fairly easy at first, but turned out to be trickier than expected.
Before starting this piece of work, I only ever designed for an adult audience. This was a great learning experience as I had the opportunity to design for an audience that I was not familiar with - secondary school students. Participating and facilitating the research sessions was also important in order to see how the students interact with the product.
Overall, this project's main focus was on content - finding a language and terms that would be not only understandable, but also interesting for secondary school students in particular audience, was an iterative process.
This was a great opportunity to learn more about conducting user research in groups - up until that point most of my experience was on 1:1 sessions. Learning how to manage a group of users and gather insights as a team was definitely one of the most interesting learning points in the project.