A tool to help workers and job seekers improve their digital literacy for the future of work.

Role

Design research
Product design
UX design
UI design
Front-end development

Project info

Centre for Digital Enterprise, RMIT University

Collaborators

Kinvin Jin, full-stack development

Disclaimer

To comply with my confidentiality agreement I have omitted and appropriated confidential information. These designs are a reinterpretation of the original.

Overview

Digital literacy is more important and less widespread than you might think.

According to the World Economic Forum, many jobs have yet to be transformed by simpler digital tools such as email, spreadsheets, and databases. Formerly analog roles such as manufacturing or personal care workers will become increasingly see a reliance on digital tools. For these workers, they likely will face barriers to future employability as their industries become digitally disrupted.

In partnership with the Victoria State Government, our team was tasked with developing innovative training solutions to improve opportunities for Victorian workers around digitally upskilling. This is the story of how I made a positive difference to provide equitable access to future employability opportunities.

Aligning expectations across a collaborative culture

To start, I initiated several stakeholder meetings in order to establish the business, product and user goals of the project. This helped to connect and guide everyone's expectations throughout the design phases.

A collaborative culture with lean UX

I opted for a lean approach which emphasised rapid sketching, prototyping, user feedback and design mockups. Creating early team‐wide alignment sparked many great ideas and created a strong sense of ownership across the team.

Building trust through transparency

Sharing my methods and thinking from the outset helped to build alignment across stakeholders. Ample opportunities for input at all stages of the project built trust and created a comfortable environment to share ideas—forming a partnership which will serve much value beyond this phase.

Continuous integration and deployment

Because of the project timeline and fixed date, we opted to build the app using react.js which allowed for code reuse and global changes.

The challenge

Helping people upskill their digital literacy

Our challenge was to Design an application that helps people identify their digital skills gaps and provides learning pathways to level up.

Discovery

Using a human-centred approach.

With the scope of the first release established, I commenced two user research studies to gain insights into the problem. In the first study, I conducted contextual interviews with 10 users looking to enter the workforce, upskill for a promotion or pivot careers. My goal was to uncover the steps they took to learn new work skills, their pain points and workarounds.

Building context of use through human-centred design

Getting rich information about the context of use.

With the scope of the first release established, I commenced two user research studies to gain insights into the problem. In the first study, I conducted contextual interviews with 10 users looking to enter the workforce, upskill for a promotion or pivot careers. My goal was to uncover the steps they took to learn new work skills, their pain points and workarounds.

Mapping the common themes and insights

To focus the studies, I synthesised the results by affinity mapping the data into common themes and insights. This allowed me to tackle the design more effectively and ensure I was solving the right user problems.



  • All participants thought digital literacy was important because it can make their lives easier.

  • People don't want to become obsolete in the workforce.

  • People will only learn a new skill for work when they needed to, however most did know what they would need in the future.

  • When people needed to learn a digital skill they will refer to an expert via YouTube, a colleague, teacher or family member.

  • People want to be assured that their recommended learning resources are meaningful and relevant.

Define

Setting the stage for solutions

When I was confident with the insights, to move forward I began writing user problem statements. I first defined the overarching problem, then penned child statements that aligned to each persona archetypes.

Stories helped to build a UX strategy to solve our user's problems.

People are always weighing the cost of effort vs the benefit.

Whether its a preference for videos or speaking to an expert, people only want to learn what they need to for the job.

  • Show skills needed upfront
  • Personalise future trends
  • Level up indicator
  • Structure the user flow to accommodate people’s mental models
  • Relevance indicators on resources
  • Comparative intelligence

Guide learners like an expert.

Users reported that they often referred to a colleague, friend or family member with expertise to guide them through a new digital skill. How might we provide a sense of security through a guided experience?

  • Recommended future skills
  • Level up indicator
  • Relevance indicators on resources
  • Filter video, online learning, wikis
  • Curated personal learning pathway

Personalisation and preference are key for driving learner engagement.

Learners want self-directed and independent learning opportunities that are unique to their needs. Make it personal also provides an opportunity to develop an experience which meets the needs of various generations in the workforce.

  • Show skills needed upfront
  • Personalise future trends
  • Level up indicator
  • Feature to add or remove resources from report
  • keywords filter for related interests
  • Restructure user flow to accommodate people’s mental models
  • Relevance indicators on resources
  • Filter video, online learning, wikis
  • Curated personal learning pathway

The vision

Introducing the Smart Diagnostic Tool

A platform that provides learning pathways for improving digital skills at work. The following sections break-downs my key UX solutions and how I translated the opportunities from the research into valuable features.

You'll see exactly where you stand.

The skills gap overview lets you see exactly where you need to level up.

Enjoy learning the way you like it.

You might prefer entire online courses, or maybe you’re short on time and want a quick video. Filters let you quickly surface the media you want.

Taking out the guesswork.

You'll have confidence knowing your learning is relevant and organised.

Delighting users with motion graphics.

I created a suite of motion graphics to express important ideas and create awareness around digital capabilities

Design language

Ensuring consistency between design and coding

Throughout the prototyping phase, I simultaneously developed and maintained an atomic UI library of patterns and style guide by using the global components feature in Figma. This ensured consistency between design and coding. This workflow also enabled me to update any UI elements globally when needed.

Balancing familiarity with engagement.

To understand the most practical approach to the UI patterns and features I conducted a competitor analysis of other survey platforms to uncover tactical opportunities.

futureskill.pearson.com
mycreativetype.com
pivotcareer.com.au
onesharedhouse2030.com

Testing UI concepts

To ensure the most suitable visual approach from our shortlist of opportunities, I conducted interviews with 12 participants to assess the desirability of UI concepts. Participants included students, disability workers, business administration workers. I used a combination of open-ended questions which helped me to better understand their mental models.

62%

of people preferred icons

62%

wanted progress bars

12.5%

preferred photos

Development

Early iterations and wireframing

Rapid prototyping

Validating designs with an interactive prototype

After working through the concepts for the features, I created a hi-fidelity interactive prototype in Figma to test the flow, visuals, engagement and overall usability. This approach allowed me to get detailed feedback on certain elements of the design that would not be possible with pen and paper.

Testing

Learning more with less

Rather than prototyping what we knew would be ok, I decided to prototype the features that were high risks such as the feedback page and dashboard. This allowed us to learn more with less. I knew these would be the most challenging given the complexity of information we were trying to provide.

Reflection

The project had many challenges but the hardest was having the courage to pivot continuously from the initial concept through several iterations. Using a strategy of storytelling and qualitative insights enabled me to steer the project towards a value proposition for the business and users.

Despite the complexities, I especially enjoyed delving into user research. The regular testing and feedback loop helped me to iterate very quickly, enabling us to exceed our initial expectations for the design.

In the first iteration, our net promoter scores were a low 5. After implementing the new flow and features we saw these scores jump to 9 — an 80% increase in the desirability of the platform.