Job profiles
UX/UI Design for My World of Work
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 FE/BE developers.
Snippets of a job profile as seen in My World of Work in August 2022
RESEARCH
Goals: understand the users' point of view and identify needs and pain points in relation to the existing website.
Summary of existing research
I started this project by analysing the existing documentation. This included a feature list, reports of users' comments on the existing profiles, as well as previous redesigns.
The most recent iteration of job profiles was completed by an external agency in 2021. These designs were user tested, but changes were never made following user feedback and the project was paused. By reviewing the available documents and user feedback, I identified the following points of improvement:
From user feedback
-
The card ‘Possible routes’ was too vague - the title and some of the terms are not clear to users (e.g. Freelancing)
-
Yearly salaries are hard to understand for secondary students
-
Students are not familiar with qualification acronyms.
Missing features
-
List of technical (hard) skills alongside meta (soft) skills
-
External links for additional information
-
Related industries section, or any mention of industries
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’.
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, apprenticeships, 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 we 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' was not an interesting piece of information
-
Pupils liked the use of tabs in the 'How to become' section
-
Most participants did not scroll and focused on the content above the fold - possibly due to the confusion of seeing a mobile prototype on a larger device
-
The term ‘next steps’ was not clear
At this point we decided to continue the project using tablet as our primary device, to facilitate our users' testing experience by providing a prototype that would match the device used in testing.
SECOND ITERATION
Refining the designs further while involving the wider team
Team workshop
In addition to the usability testing outcomes, we run a remote Miro workshop with the whole 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 to more relevant/interesting labour market information
-
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 comment in regards to the content of the page:
-
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 have the possibility to see weekly / monthly / yearly data.
-
The concept of job growth is hard to understand as a number/percentage - would need to be presented differently
-
The term Technical skills is still unclear
-
‘Getting in’ section is not visually engaging
-
‘Top recruiting industry’ LMI was not clear
-
Recommended careers could be a carousel
-
Changed labour market information at the top of the page to include 'mandatory qualifications'
-
Added the option to see weekly, monthly or yearly figures
-
Job growth was changed to low growth / high growth rather than a number
-
New terms: meta skills = general skills, technical skills = practical skills
-
Useful subjects section was separated from the rest 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 proceded 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 moved away from Adobe and adopted the combination of Sketch and InVision.
Temporary UI - following previous designs
The first iterations of the job profile page followed the design proposal of an external agency. It was a conscious decision to present to user medium to high fidelity designs in order to collect feedback on colours, illustrations, and design elements.
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 new UI 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 part of the design team that was dedicated to developing a look and feel for the new site conducted extensive research to define a final look 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 did not allow our content team to update the content for all 612 job profiles in time for the launch of the new site. For this reason it was decided to adapt the 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 job profile 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, and this was a great learning experience as I had the opportunity to design for an audience that I was not familiar with. Assisting in the research sessions was also important to see how these 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 also 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.