A premier educational and training company for certifying IR thermography professionals.

ITC offers a vast array of application-focused courses, from beginner to expert, and hosts more than 600 scheduled training dates at a variety of locations around the world. The goal of the website is to help users find the right course, and provide an effortless onboarding experience.

Problem statement

The ITC's previous website had complex information architecture and caused confusion among its users. With a wide range of training options, including different levels and classroom types of thermography courses, certifications and languages as well as different hardware requirements, users couldn't choose the right option and felt overwhelmed. Also, the UI was outdated, inconsistent and didn't represent the ITC brand core values.

The ITC training schedule booking page before redesign

Business Goal

Design intuitive navigation and high-converting customer purchase experience with a clean modern UI.

Project Scope

• Phase 1. Discovery Secondary research, surveys, competitive analysis, user persona
• Phase 2. Initiation Content analysis, project planning, feature brief writing, user flow & low-fi
• Phase 3. Validate Usability Testing (first round)
• Phase 4. Design Feedback incorporation, high-fidelity mockups, visual design and UI kit‍
• Phase 5. Validate Usability Testing (second round)‍
• Phase 6. Design Final Design Deliverables and implementation.‍

My role

I was the leading hands-on UX designer on this project. Collaborating with a talented team of a brand designer, 2 Junior UX designers, and 2 engineers, I led the design process from initial stages to completion: from strategic planning and design thinking to responsive high-fidelity mock-ups, user testing and implementation. My role also included client communication, stakeholder management, mentoring and supporting Junior designers.

Meet Ben Johnson

Job

Inspection engineer

Age

45

Location

USA

Devices

Desktop

BIO

I'm an inspection engineer in a construction business, where we use IR cameras as a method for checking the actual condition of buildings and the potential for energy savings. I manage a team of 3 contractors, and it's important for the business to have my team up-to-date certified and trained to work with the latest IR cameras and software.

Goals

• To find a course for the team to get a better understanding of IR camera functions and interpretations.
• Get enrolled with a bulk booking for the entire team in one go. Be sure each team member received course instructions.
• Find out what hardware is required for the course and renting/sharing opportunities.

Paving the path to purchase

Content-first approach

Before jumping into designing the new intuitive E-commerce experience that is familiar to most users consisting of an uncluttered homepage, well-organised category pages that are easy to navigate, polished product pages and effortless checkout screens, we rolled up our sleeves and worked on the content structure.

ITC courses offered

ITC courses schedule

User flow analysis defines the direction

After interviewing stakeholders, product owners and training experts, we were able to map the current purchase flow and understand what decisions customers need to make when choosing the right training. Based on that we came up with how might we questions:

• How might we optimise the user purchase path?
• How might we help users find the right course?
• How might we anticipate users questions about the course?
• How might we simplify the checkout?
• How might we make the content-heavy product pages more engaging?

What do we know?

It's time to gather all the insights. here are the most interesting ones.

• Entry-level courses make up 90-95% of sales. It's been decided to prioritise the CTA for entry-level courses to increase the conversion
• The list of courses available can be refined based on the browser's country. Customers from the USA would never book an on-site course in Germany. The country switcher still should be available at the top navigation. Courses also can be filtered based on geography, language, format of training and the languages available. However, it's not applicable for online courses and webinars.
• A pitch to your manager is a part of the user flow, hence the page featuring all the benefits of ITC training can save users time and help to allocate the budget.
• The checkout experience can be tricky and confusing with the bulk buying option.

Time to converge

Based on findings and how might we questions, we agreed to focus on the following experiences, that considered to be the most impactful in the entire user journey:

• The homepage and a training search page
• Product pages and adding to cart experience
• Checkout experience
• Post-purchase experience
• Next steps: chatbot, knowledge base, contextual FAQ, contact form

Now the redesign is just a piece of cake

The next stage was to redesign the flow. Low-Fi mockups were created and tested using Maze's unmoderated remote testing.

The results showed a 94% of completion rate among the 20+ users whose task was to book a specific course for a specific date.

ITC new sitemap based on the new userflow

Fighting chaos with a clean accessible UI and a strong visual hierarchy

At this stage, we've designed the UI kit. We chose a clean airy design with a succinct yet profound icon set and bold and simple titles.

The design of the new ITC landing page and navigation

The design of the new training search page
‍

Product pages shape the customer's relationship to the site, however, if poorly designed, it can results in the following according to Nielsen Norman Group article:

• Shoppers cannot decide if the product meets their qualifications and so abandon the purchase. Better safe than sorry.
• Shoppers buy the wrong product, based on inaccurate assumptions, which results in unhappy customers or returned purchases. The more people have been burned this way, the more they’ll be sceptical and react according to scenario #1 when encountering weak product pages.

Solution

To improve readability and engagement of this content heavy product description, we used simple content layouts, visuals, accessible fonts and the good amount of white space

Core components such as a descriptive product name, concise and informative description, a clear way to add an item to the cart makes the user journey effecient. Product video with ability to download a curriculum helps anticipate and answer product questions which both saves the user time and reduces the costs spent on customer support.

And last, "What's included in the course fee" and testimonials help us gain users' trust and manage their expectations.

The course description page (1/3)

The course description page (2/3)

The course description page (3/3)

One of the challenges that our persona faces during the checkout is the option to bulk buy training for the entire team. It can be several different training courses for different colleagues, or on-site training for a team. The buyer needs to fill in students' details to create an account for each of them.

For a faster checkout, we pre-populate information where possible, for example, by adding a quick shortcut "buying for myself" to avoid entering the same data in the student details section. However, the guest checkout cannot benefit from pre-population. There is still quite a lot of information for the customer to fill in.

To simplify it, it is split into 4 simple steps with the content and design that are highly familiar to the user:

Starting point: My cart

Guest checkout process: step 1

Guest checkout process: step 2

Guest checkout process: step 3

Guest checkout process: step 4

Guest checkout process: success

Success screen post checkout plays an important role in the checkout experience:

• Provides feedback to the user confirming the status of the payment
• It is used to remind the user which email will be used for the email confirmation. It's especially important when you book the course for a team - who should expect an email, me or my colleague?
• FAQ section below the success message helps anticipate users questions in the

Another round of testing helped identify usability issues and receive feedback for the UI.

Results of the usability test for the booking and checkout flows

Feedback

"The course page lacks visuals and looks boring, at least icons can be added at the top of the screen"

Solution

We designs visuals and product identifiers icon set to make the product page more engaging.

Before

After

Before

After

Other feedback we received included increasing the font size on the search page, and auto-suggesting the names of the students that were used previously or were entered for the other courses when you book more than one at a time.

Checkout step 1: students information fields with the name auto-suggestion

A long journey ahead

The case that I've presented here was just a first step in the plan to redesign the website incrementally. We started with the red route - checkout. Below you can find the roadmap for the next activities prioritised using the MoSCoW framework.

Must have activities

The case that I've presented here was just a first step in the plan to redesign the website incrementally. We started with the red route - checkout. Below you can find the roadmap for the next activities prioritised using the MoSCoW framework.

1. Post-launch optimisation plan. For the purchase red route, 2 key activities would need to be done post redesign: accessibility audit and user analytics tracking to identify problem areas like bounce pages, drop-off points and high dwell time pages.
2. Design customer help that can decrease costs spent on live support. Consider chatbots, knowledge base, contextual FAQ, contact forms and other tools that work best for the heavy-content products globally and support different languages.
3. Redesign blog. ITC creates very useful content for its students that can be also used to attract more clients. Since all the content is already there, ITC would like to explore ways to attract more readers and improve their experience.

Final thoughts

Clean UI is a game changer. But content structure and visual hierarchy were the real problem solvers here. Let's face it - sleek UI can't solve the problems for content-heavy websites. When you sell trainers, the visuals and the sizes available are probably all the users want to know. But when you sell training courses, you expect the user to spend a day or two browsing the course description, getting to know the curriculum, and asking questions. So providing the right amount of information at the right time in the right place is key.