TaF.tc: Front-end redesign for a Training Management System

Overview

TaF.tc is a fashion school in Singapore training the global industry. The courses are subsidised by the SkillsFuture Singapore movement to make pursuing a career in fashion more affordable.

However, with any government initiative comes regulations, and TaF.tc was too cluttered with them for prospective students to find what they needed to make an informed decision.

I restructured the entire front-end experience to improve ease of navigation for a broad audience and elevate the look-and-feel to match fashion school competitors.

Role

I am the lead and sole designer and main liaison between internal stakeholders (marketing/sales, customer relations, career services), external regulatory stakeholders, and developers.

I manage the end-to-end design process — from the first rounds of user research to ensuring compatibility with current data schemas.

Results

The prototype was praised by user testers for being "seamless", a "time saver for sure” and appearing "a lot more upmarket". We are in the beginning stages of development, and look forward to the long-term impact on user retention and conversion rates given the promising findings.

A Desktop mockup of the new TaF.tc website

A mobile mockup of the new TaFtc website

Goals

TaF.tc conducts courses that are subsidised based on age, citizenship status, and other factors.

Though this presents a great opportunity for aspiring designers to jumpstart their careers, the current site does not structure subsidy information intuitively. Bounce rates and exit rates are very high as a result, compromising our SEO plans, sales efficiency, conversion goals, and brand image.

The aims for this redesign were to both make information easier to find and get users excited to find the information. In other words, the information architecture had to be as sound as it was beautiful.

Parameters

One of my favourite parts of this project was becoming familiar with our back-end structures and data systems. I could appreciate the full functionality of the system, and designing with both the system and its users in mind felt like putting pieces of a grand puzzle together.

Here were some of the rules of this project’s puzzle:

We had to stay script-light to reduce load times. Our fully-customised training management system (TMS) houses >150 courses, workflows spanning the discovery-to-graduation student lifecycle, and more, which already tax loading times. Features that required new logics and back-end data recall (such as new quizzes) were out of the question.
We had to maintain our current data schemas to stay on time and on target.‍

Research

Users

Our users are a diverse bunch, which meant that we had to design for highly varied levels of digital literacy.
‍
Our average audience are aged anywhere between 16 and 60 years old. Though we have young digital native audiences, our older audiences need more help adopting digital habits. This affects both everyday and corporate clients, as much of the retail fashion industry struggles to digitise.

A design sprint team looking at "how might we's" on a window whiteboard

Methods

Several research initiatives that we conducted since the start of the pandemic informed the design:

Mobile user testing with 3 participants aiming to find roadblocks in the mobile experience.
Heatmapping from an intermediate microsite solution. Before we had the resources for this larger redesign, I built a microsite promoting high-value courses. I tested different methods of displaying critical information and tracked their success.
Design Sprint with stakeholders in marketing, sales, customer service, and curriculum development. We noted which features in this prototype succeeded with our 5 user testers.
Brand perception survey among our student body. I used this to inform our content strategy.
Feedback survey to >70 respondents (current and prospective students), resulting in quantitative rating data and qualitative data describing their (least) favourite experiences.

Findings

We focused on resolving 3 problem areas, all of which revolve around finding the right balance between sharing critical information and driving conversions:

👀 Prospective students were flooded with information that was not relevant to them. Our original interface did not filter information based on the different subsidy eligiblity criteria, so users were forced to read about subsidies that did not apply to them.
🛒 The cart function -- one of our most powerful features with high-conversion potential -- was built from an unintuitive workflow. Though the feature could potentially triple average order value, users faced so many roadblocks when they tried to use it that they would give up before they could get to enrolment.
⌛Conversion processes that should be seamless are lengthy. Signing up and enrolling for a course could each take >10 minutes as they require a lot of user information, including salary information and ID photos. This results in high dropout rates, as they insist “they will do it later".

Solutions

We generated solutions in 3 key areas:

👀 Conditional information displays
🛒 Seamless cart workflow
🥰 Friendlier conversion processes

👀 Conditional information displays

Our system already contains workflows using variables such as salary, interest, and demographic data to automate processes such as course fee calculation and subsidy eligibility. The new design reapplies these existing automations to help users select what information they want to see.

This was especially valuable when it came to displaying course fees, which are dependent on age, citizenship status, and company sponsorship. I reduced the noise by allowing users to:

pick which variation applied to them;
opt-in to viewing the course fee details should they want to know more.

I piloted this format in our intermediate microsite solution, which was warmly received for concisely displaying what mattered most: how much the course costs.

Screenshot of the old interface, indicating that price doesn't fit into viewport and users are forced to view irrelevant info

Screenshot of the intermediate solution, which shows that info is concise and relevant, and that there are added support options. But fee details are not shown and visuals are too cutesy

We applied this to other areas that generated signficant amount of customer inquiries, including:

entry requirements (prospects want to ensure that they are prepared for the course load);
course schedules (prospects usually start with clearly defined availabilities in mind).

🛒 Seamless cart workflow

After detailing the current user workflow for adding courses to the cart, we discovered at least 3 major roadblocks. These blocks presume the user is ready to make a purchasing decision when they are likely still exploring their options — thus, putting the cart before the horse (pun intended).

A flowchart comparing old and new cart workflows

New users who clicked "Add to Cart" were prompted to fill a long sign up form with 28 fields.
After logging in, users who previously clicked "Add to Cart" were not redirected back to the product page. Instead, they were redirected to a course directory.
Existing users who clicked “View Cart” were not redirected to their detailed cart page. Instead, they were redirected to a mini-enrolment form with 7 fields, including intent for studying.

For new users, I reduced the sign up form by >60%, keeping only the fields needed for contacting the user, lead nurturing, and course fee calculation.

For existing users, I ensured that this was the only form a user needed to fill in before they could bring their cart to checkout. I also designed a cart modal so users could explore without disruption.

A flow of frames showing the journey from "Add to Cart" to enrolment in 2 steps

🥰 Friendlier conversion processes

Though we could not significantly shorten the enrolment form due to regulatory requirements, we could offer a friendly human touch and a better ability to manage the customer's time. We wanted to cheer on our users as they made important steps in pursuing their goals.

So we set the user’s expectation right at the start with a "Before You Begin" section, instructing users to allocate the right amount of time and resources. I maintained the human touch with encouraging copy and content.

Among my favourite solutions that I brainstormed with marketing and sales: we renamed a vaguely threatening "Mandatory Section" to "Last Few Questions!"

Screenshots of encouraging copywriting in the website

Results

Testers articulated that the new front-end was simpler and more attractive. They were often able to complete a task - find our flagship programmes - before I tasked them to do so. Rarely did they need guidance to complete critical tasks such as finding a course page or finding how to enrol.

Lessons learned

✏️ As a designer, I learned that optimising when and how you ask users to complete a task is just as important as optimising what tasks you assign them. Though we could not significantly change the number of form fields due to regulations, I made sure to encourage and generate enthusiasm with our users where possible.

🎯 As a project manager, I learned how to keep stakeholders engaged and invested during the months-long design process. Though I felt the pressure to speed things along and get to development faster, I showed my progress with key stakeholders once a week, and higher-level stakeholders at least once a month. This helped me build trust across departments and solve problems from the lens of diverse perspectives.

Next steps

Prepare for post-launch research to track acquisition, retention, and conversion metrics.
Begin the change management process, prioritising marketing, sales, and customer relations.
Further develop our design system to ensure consistency in future product developments.
Work closely with our engineers as they rebuild the front-end!

❤️ Special thanks to my stakeholders and sprint team (Anisha Charan, Brandon Lim, Amira Ismail, Miriam Lai, Benjamin Tan, Jamie Lee, Nicholas Tan, May Min, Swe Sin Tha, Louise Clement, Doreen Tan) for the fantastic feedback, the tech team (Andre The, Brian Lee, Wen Xiang Lai, Dylan Tan) for the mentorship and advice on workflows and processes, and the XSOSYS team for making development possible.

Next case study

THE LABEL SG: Multi-vendor e-commerce platform

Building a front-end and back-end fashion shopping experience from scratch

view case study