How I Inspired Students to Explore Their Future Through Engaging Design
Client: Ministry of Education
My Role: Desktop Research, Workshop Facilitation (IA), Visual Design, Prototyping
Team: 3 Designers, Design Lead, Project Lead
Duration: 4 months
In Singapore, a student's career journey begins as early as age 11. But how do you inspire young minds to think about their future, when they're still focused on their next recess break? This was the challenge faced by MySkillsFuture for Students, Ministry of Education's (MOE) career guidance platforms that serves over half a million students across primary, secondary, and pre-university levels.
Working with MOE, I and a team of three Designers did a redesign of three interconnected websites to transform them from mandatory school resources into engaging platforms. Through desktop research, collaborative workshops with educators, and visual design, we reimagined how young people could explore their potential careers with excitement rather than obligation.
This case study shows how we turned a government education platform into an inspiring career exploration journey that speaks to students at every stage of their development.
Where We Started
Launched in 2014, the MySkillsFuture website was meant to help students explore their education and career options. But over time, it became clear that something wasn’t working.
At the start of the project, we spoke with teachers and Education and Career Guidance (ECG) counsellors to understand the website’s purpose and what they hoped to achieve with the redesign. Their message was clear: the site needed to be visually engaging and encourage students to use its tools—helping them see the value of planning their future.
But one teacher’s words stood out:
This feedback wasn’t surprising. With an outdated UI and graphics that made a poor first impression, the site struggled to capture students’ interest. Additionally, the three related websites were so similar in design that first-time users couldn’t easily distinguish between them, leading to confusion.
The initial MySkillsFuture website for Secondary Students
Analysis through Heuristics Evaluation
With limited time and budget, a heuristic evaluation provided a quick yet effective way to identify critical usability issues. For example:
The "Success Stories" section features irrelevant videos centred on specific job roles and industries, with content inconsistently placed in unrelated sections across all three websites. The storytelling felt disjointed, as some of the page’s information architecture (IA) lacked clear organisation.
Outdated and irrelevant content contradicts minimalist design principles, cluttering the interface and reducing the visibility of important information. As shown above, missing course details and events leave empty sections that add no value—a widespread issue across school, course, job detail, and event pages on all three websites.
The heuristics evaluation revealed that the website’s UI, IA and content strategy needed significant improvements to better meet students' needs. But before diving into the website’s IA and content, we developed proto-personas to ground the redesign in real student needs. These personas became a shared reference point for our team and MOE clients—aligning everyone on who we were designing for and what they needed, fostering clearer collaboration
Building Empathy with Proto-Personas
To design an effective education and career exploration website for Singapore students, I first needed to understand the diverse needs and challenges faced by learners at different educational stages. I developed these proto-personas based on desktop research and valuable insights gathered during meetings with MOE teachers who work closely with students daily.
Each persona represents a key segment of our target audience - from Primary students just beginning to explore career concepts, to Secondary students building self-awareness, to Pre-U students preparing for higher education and workforce transitions. These proto-personas guided our design decisions throughout the project.
Differentiating Platforms with a UI Strategy
During the Discovery phase, we identified that the three websites looked too similar, making it hard for first-time users to know where they are. To ensure we addressed the issue while building a strong, unified identity between the three, we kept the brand’s primary colour consistent across all portal. At the same time, we gave each portal its own personality with distinct supporting colour schemes and design elements tailored to the age group. Playful scribble graphics weave through the experience of each website—capturing the spontaneity of doodling in class and making learning feel fun.
Card Sorting Workshop to Map Student Navigation
After developing the proto-personas and UI strategy, I collaborated with the project lead to facilitate two card sorting workshops with MOE stakeholders: the first focused on the Primary website and the second was on Secondary and Pre-U. Given our heuristic evaluation findings, it was crucial to align on the IA.
We began laying out a proposed navigation and content structure, for each website, then refined it with MOE stakeholders. This hands-on approach allowed them to physically manipulate the site structure while keeping student needs at the centre of our discussions.
A snippet of the IA card sorting workshop for the Primary website.
The workshops yielded these critical insights:
Clear User Journey – Students preferred a structured flow: Self-discovery → Career exploration → Education planning. This shaped our navigation and features, including a guided school and course search.
Content Relevance – Content needed better targeting. For example, success stories had to show how the website helped students, and certain resources were more relevant to Pre-U students than younger ones.
Simplification – We reduced complexity by limiting job role options, renaming tools for clarity, and removing redundant content, making navigation more intuitive.
We iterated our designs based on the workshop findings and created slides outlining how we improved the IA on each page:
Through this collaborative process, we were able to propose a restructured IA that not only improved navigation but also enhanced content organisation to better serve students at different educational stages. The resulting "to-be" structure addressed key pain points identified in our proto-personas, such as needing structured guidance on education pathways, while supporting the overall goal of making the platform more engaging and intuitive for all users.
Getting Client Feedback Through a Design Critique
After iterative refinements with our Design Lead, we completed the prototypes for all three websites within a two-week sprint. To validate our direction, I facilitated a comprehensive design critique session with 10 MOE stakeholders, combining a structured walkthrough with an interactive gallery walk where stakeholders used sticky notes to provide feedback on printed screens.
The critique revealed insights that went beyond traditional usability concerns:
Cultural Sensitivity: Characters needed to reflect school dress code standards - no flashy accessories or hoops earrings
Language Precision: Terms like "perfect match" needed to be replaced with more appropriate alternatives like "suitable alignment"
Content Organisation: Opportunities to consolidate repeated resources and streamline IA
However, the most crucial feedback came from two MOE Directors who joined us for the first time. They highlighted a significant pivot in the ECG curriculum that our designs needed to reflect — a critical piece of information our team hadn't been previously aware of.
This moment underscored a valuable lesson: stakeholder involvement shouldn't be linear. While we had engaged with teachers and counsellors, earlier involvement from upper management could have provided strategic context, such as vision alignment. This would have had an impact on our initial design directions.
Following this insight, we:
Realigned our designs with the new curriculum. Fortunately, it did not affect the IA too much; it was rather the terminology and labelling of menu’s and content.
Conducted focused sessions with teachers and ECG counsellors to refine tone of voice.
The result? A design that not only met usability goals but also accurately reflected MOE's latest educational framework. The final designs received unanimous approval from both directors and ground staff, setting a strong foundation for the testing phase (currently ongoing).
A Glimpse of the Prototype
Visual design: (introduction of step-by-step features)
Content: content for schools are pulled from Schools Standard ICT Operating Environment (SSOE) which tackles the issue of missing content. occupations and industries still need to be maintained, however we have provided a proposed IA guideline for this for MOE team to follow. [show page]
IA
