MK.
< Back to Case studies

Role insights

End-to-end project to educate jobseekers using big data.

6 months
Job role: UX designer

Project summary.


‍Planning your career path is a difficult process. Our research indicated that jobseekers were in search of a reliable source of information on the types of roles the industry has to offer.

This product uses machine learning to translate decades of CV data into actionable information on the latest industry roles - presenting it to the user in a visually engaging and easily digestible way, encouraging them to take the next step in their career.

Take a look for yourself
at The Guardian jobs - Career planner

Key Skills

  • User research
  • "Jobs to be done" insights
  • Information Architecture
  • Data Visualisation
  • Hi-fidelity Prototyping
  • Multiple user testing methods

Tools Used

  • Figma
  • Miro
  • Zoom usertest

The project process.

1. Analyse research
  • Review interviews
  • Covert insights to needs
  • "Jobs to be done"
2. UX design
  • Information Architecture
  • Data discussion
  • Priority guides
3. Design the Ui
  • Layout interface
  • Data visualisation
  • UX writing
4. Test and refine
  • User test
  • Analyse results
  • Refine the product

Analyse the research.

Togther with our Head of Research, we conducted a number of interviews and diary studies with a wide range of job seekers and career coaches. This was a broad approach to identify the current needs of those currently seeking work.

My responsibility was to analyse that research and identify key insights regarding jobseekers approach, needs and blockers to career progression

My aims:
  • Find out how jobseekers search and research new jobs
  • Identify how jobseekers decide to make changes in their career
  • Uncover what jobseekers need to plan their career long term

Results of the primary research

The following personas are a summary of the key traits I identified in this process...

Career progression between roles: Jobseekers want to know how to get to their ideal industry role by working their way up the career ladder. What path could they follow, where could their current role lead to?

Industry role details: Jobseekers want to have a clear understanding of the skills, responsibilities and education required for roles so they can better prepare, or improve themselves. How can we deliver this information?

Clear visibility of existing roles: Jobseekers have trouble identifying which roles are available, particularly in niche industries with less publicly available informations. How can we help early career jobseekers learn about existing roles?

Jobs to be done.
‍

‍Jobs-to-be-done is a framework used to translate key research insights into actionable "jobs" that the user wants to undertake when using a product. It is a highly valuable tool for identifying key features for your product by identifying the core needs of the user and how these might be solved.

For example, the main JTBD for role insights is: 

When I am: considering my next career step
‍
I want to: be shown roles and pathways suitable for me
‍
So I can: make an informed decision about the next step in my career and feel confident about my choice

Jobs to be done - Hierarchy map

‍A large selection of jobs-to-be-done lacks order and priority. To remedy this I developed the JTBD hierarchy map process.

JTBD Hierarchy map

This framework groups the JTBD into similar themes for better organisation. Jobs that are derivative of larger needs are linked accordingly.

Using this, each JTBD links directly back to the core user need of the product.

JTBD Hierarchy map

The concept.

The concept aims to provide the desired information to help users develop their career, in the form of "Role insights". These are profiles that use CV data and job board metrics to inform users about specific roles within the industry.

These roles are navigated via a lister page. The information on them must me managed and published so a web app dashboard was also required.

Role lister page: A lister page for jobseekers to navigate the various role overview pages available on the site.

Role overview page: Pages that use machine learning to jobseekers provide valuable data on a generic industry role.

Dashboard Management system: A dashboard for site owners to assess data quality and publish role overviews to their site.

Lean rollout.

When designing and developing large projects it is important that we move quickly. Releasing products in stages allows us to gather feedback earlier, making changes as the project progresses, rather than releasing the entire project in one go after years of development. ‍

For this lean rollout, I identified three steps...
  • Step 1 - Release the role overview pages in a basic state. Accessible via job descriptions with the same job title
  • Step 2 - Release the role lister page, reachable by the main site navigation
  • Step 3 - Add additional personalised content once basic user flows and data requirements have been refined
MVP release timeline

I developed this documentation process myself and have used it successfully in all of my projects since. It has proved incredibly useful in conversations with key stakeholders.

Following its success, I have continued to develop the process. I created a playbook entry so that other team members could follow this themselves.

Playbook - MVP release timeline

Information architecture.

The new product is essentially an information database to be hosted within existing job board sites. The first step in the process is to understand how these new elements fit within our existing site structure. This began with site mapping and stake holder discussions to solve the following

Integration.

How does this new feature fit within the hierarchy of our existing features? 

Alignment.

How do we make this new feature stand out from the rest and present it in a way that is new and fresh, whilst maintaining consistency with the remainder of the site?

End user goal.

The ultimate goal of our client's job board sites is to achieve a high level of applications to jobs hosted on the site. How can we encourage users to act on the information they have learned, and apply for related jobs, or visit other areas of the site?

Priority guides.

Priority guides are a useful tool to block out and organise content on a page based upon an identified priority. In this case I used the aforementioned “Jobs-to-be-done” hierarchy map to organise the available information to align with the user’s priorities. I then mocked up a simple content block wireframe to demonstrate the structure of the page content, in priority descending order.

MVP release timeline

Design > Review > Learn > Repeat.

Repeated design iterations of increasing fidelity and reviewing with stakeholders at key stages in the process, kept the project meeting our original goals, within technical and business constraints.

Ongoing iterative design

Data Design.

A large amount of the user value derived from this product lies in the effective communication of informative data. So, the success of the project relies on being able to communicate this data in a digestible and engaging way.
‍
This involved collaborating closely with the Data team to appropriately balance the informative needs of our users, with the capabilities of the data model we had available to us.

We started with hosting a collaborative workshop with rapid visualisation to uncover potential components for our role pages that would be valuable to the user. Considering interaction design from a mobile first perspective.

Visualisation workshop

This back and forth discussion, combined with user needs and user interface principles of visual design and hierarchy, resulted in a page of varied data visualisations that are both informative and visually stimulating.

Data Visualisation.

Successfully visualised data conveys key insights to the user, requiring minimal cognitive effort.

Recruitment trends visualisation
Design direction
  • Selective data points - Instead of crowding the graph with all units and labels, provide the user with enough data to discern the trend or insight
  • Brand highlights - Using the brand colour to separate visual elements from the text. Encourages the user to process the most important visual elements first.  
  • Hover elements - Allows users to investigate further once they have understood the data being displayed
  • Simple icons - Iconography used selectively to provide additional insights

Ui considerations.

The following was the design direction for this white label product
  • Adaptable brand language - It must be simply repurposed to reflect the brand language of our individual clients. 
  • Site wide consistency - As this is an addition to an existing product, new elements must reflect the design language of current design, and adhere to determined rules of the site’s information architecture.
  • Clarity of information over stylisation - Additionally, the primary goal of this product is to manage and present a large amount of complex, text-based, graphical and numerical data. 

Role profile UI.

The design system was built with simple web accessibility and usability standards, utilising defined “Brand tokens” that could be set to each client's brand scheme, upon set up.

For the Role insights web page the information is blocked into simple repeatable structure, for easy navigation and page scanning. This consists of a series of sections with a title, descriptor and content.

Key elements are grouped and highlighted with neutral backgrounds. Text and lists are given plenty of white space to breath. All to avoid visual overwhelm and easy processing of information.

Role profile high-fidelity prototype

A design system of page elements, components and brand colour tokens was set up to assist development teams and achieve consistency.

Design system sample
Brand colour tokens for client set up

Dashboard UI.

The dashboard Ui was built with similar considerations due to the complexity of information and functionality to process.

Role profile high-fidelity prototype
  • Purely functional colour use - Branding is not necessary so colour can be used entirely to assist the user. In this case; Blue for links and CTA's, Green for success, Yellow for information, Red for errors.
  • Visual grouping - Filters and search, Key functions, Data, all individually grouped for efficienty processing and interaction.

UX writing.

Words matter.

Often overlooked by both users and designers, well written content can significantly boost a product’s usability through guidance, inspiration and reducing frustration. You can read about my public talk on the subject here.

In two years of study, I have developed a clear, repeatable process to get the best value out of minimal text and apply the process to improve the following:

  • Clear and processable titles and subtitles
  • Informative data visualisation
  • Engaging buttons and CTAs
  • Considerate, placating error messaging

Writing in practice.

Informative text.

Here is an example of crafted text to explain the purpose of Role insights to the user.

Error messaging.

Here is some simple error messaging as an example of the UX writing skills applied to this project. In this case error messaging used when a filter has not functioned as intented on the lister page.

Never blame the user: The error message accepts responsibility for the error. Never making the user feel at fault for the issue.

Give users an action: If there is an opportunity for users to take an action to resolve the issue, supply it immediately directly within the message.

Be direct and clear: Explain the issue clearly and concisely. In-direct, confusing language will only cause more frustration

User testing.

User testing can be a lengthy process but is vital for validation before a large scale release to catch any usability issues or identify any missed opportunities.

The method.

We used a fully interactive prototype with live data, to give an accurate representation of the product experience.  

6 Users were given access to both the desktop and mobile site. We facilitated the tests over user zoom, with designers, and developers taking notes on user sentiment, bugs, and interactions.

User testing via user zoom

The goals.

By runnng the test, we wanted to confirm the following.

  • People can navigate to the role lister/explorer (Nav bar placement & labeling)
  • People can find/discover roles in the lister/explorer (Content, IA and interaction design)
  • People find the role overview useful/understandable/clear (Content, IA and visual design)

The process.

The process included:

  • Scriptwriting
  • Test planning
  • Hosting 6 user testing sessions with industry jobseekers
  • Running review workshops to analyse viewers notes
  • Implementing design changes
  • Presenting key results to stakeholders

The process.

The process included:

  • Scriptwriting
  • Test planning
  • Hosting 6 user testing sessions with industry jobseekers
  • Running review workshops to analyse viewers notes
  • Implementing design changes
  • Presenting key results to stakeholders

The results.

Results indicated a clear understanding of the purpose of our product and an alignment with the user needs we had set out to meet. 

“The most valuable feature for me is career paths, it is not something you would see much of - it is extremely useful.”

Learnings & design updates.

The test uncovered the following insights resulting design changes

  • Concern about the validity of the career path feature due to some surprising results. Supplemental UX writing was added to inform users “Data recently sourced from Registered [role] CVs” 
  • A surprising, clear trend of users interested in the career path feature over the expected qualifications and skills. The page hierarchy was redesigned to reflect this. Usage data will be monitored following release to confirm this.
  • The lister was over-detailed, users had trouble scanning through roles to find what they were looking for. The lister page was redesigned for scannability. 
  • Additionally, the testing highlighted 2 data rendering bugs and 3 minor interaction issues.
Updated lister design as a result of user testing

Results.

Though it can be difficult to measure the success of the project via numerical metrics when the product is an exploratory, and informative journey, Multiple page views, a long time on page and a significant click through rate to jobs in the role user’s have been investigating, represent a positive impact on our users. 

2.8

Average no. roles viewed per session

17%

Click through rate (to job applications)

47s

Average time on page

What I learned.

How feature creep can impact a product by creating confusion, reducing clarity on the overall purpose, and burying potentially successful features into obscurity

What I'd do next time.

It is clear that maintaining continual contact with users is important .

I would not always focus on highly specific questions during user tests, it is vital to include research to identify how a feature will appropriately integrate into the overall product, understanding the potential positive and negative effects on the main user flow, before developing the feature and implementing it into the design.

There's plenty more where that came from.

More case studies

Have any questions? Get in touch via

maxjkeetley@gmail.com
ExpertiseCase studiesInsights blogAbout me