NCOI

Designing a customer-centric website for lifelong learning

A phased project aimed at achieving customer-centric website design for Professional Education labels of the Salta Group. In this case study we focus particularly on the NCOI label.

Mission NCOI: Empowering and sustaining the strength of the Dutch workforce.

Practice
Industry
  • Education
  • E-commerce
Services
  • Concepting
  • Prototype
  • Research
  • UX/UI
  • Web design
  • Brand architecture
  • Project Management
  • Concept
The project

Gathering business requirements and conducting data analysis

It involves developing a generic customer journey based on insights garnered from qualitative customer research during different design sprints. Secondly it encompasses the wireframe (UX/UI) website setup and the refinement of requirements. And lastly, the project entails visual design for NCOI, wherein brand style guides are integrated into generic templates and modules to maintain consistency and adherence to brand identity.

Customer Journey

Learnings from insights

The decision to pursue an education stem from various motivations, leading to a diverse array of journeys. Consumers navigate through these journeys, often fluctuating back and forth. These journeys predominantly unfold online, emphasizing the necessity for a clear and user-friendly website, especially considering the abundance of courses offered.

Learnings from insights
Color & Imagery

A magnetic allure

Color and imagery have the potential to make a significant impact, shaping the perception of the offerings. Throughout the journey, educational requirements evolve, encompassing factors such as time, study format, location, and duration. Established brands wield a magnetic allure, instilling a sense of trust and quality association.

A magnetic allure
Crimson Text
Pt Sans
Typography Crimson Text Typography Pt Sans Typography
Font detail Crimson Text Font detail Pt Sans Font detail
Letters + numbers Crimson Text letter & numbers Pt Sans letter & numbers

Photopgraphy

A modern and vibrant photography style focusing on real people and study materials.

Desire for a personalized touch

Practical details

As the journey progresses, the desire for a personalized touch or even direct contact becomes more pronounced. Expressing gratitude post-registration and providing guidance on the subsequent steps enhance the overall experience for customers. Practical details such as start and end dates, timings, required materials, and preparatory steps hold paramount importance.

Practical details

Example of a category landing page

With so many courses available, it is advisable to define clear, organized categories with a structured layout, allowing visitors to quickly navigate to the appropriate course category.

Example of a category landing page desktop
Example of a category landing page mobile

Example of a category landing page

With so many courses available, it is advisable to define clear, organized categories with a structured layout, allowing visitors to quickly navigate to the appropriate course category.

Wireframes & website Setup

Guiding principles

When crafting wireframes for website setup, it’s imperative to prioritize user-centric principles. Clients’ early journey demands contextual information about courses and educators. Relevance and transparency are paramount, ensuring content meets users’ needs while building trust through clear communication and expectations.

Appropriate visual elements bolster engagement, while customer-centric language fosters connection. A clear site structure with intuitive navigation enhances user experience, making individuals feel valued and acknowledged.

Phase 1 of every portal design is creating the wireframe to address all questions and targets.
Phase 1 of every portal design is creating the wireframe to address all questions and targets.

Mobile-first with emphasis on modern and sleek design

Mobile-first is a web design approach where the initial version is tailored for mobile screens before optimizing for desktops. Given the rising use of smartphones, there’s a greater demand for mobile-friendly websites. It prioritizes readability over visual aesthetics, recognizing that people primarily use their smartphones to connect to the internet.”

Mobile-first with emphasis on modern and sleek design

Listing Page with al the relevant content

Based on core criteria distilled from qualitative and quantitative research, supplemented by organizational preferences, we have developed a page where visitors can create a long list of courses relevant to them.

Listing Page with al the relevant content desktop
Listing Page with al the relevant content mobile

Listing Page with al the relevant content

Based on core criteria distilled from qualitative and quantitative research, supplemented by organizational preferences, we have developed a page where visitors can create a long list of courses relevant to them.

We construct the UX and UI with a modular approach to ensure a future-proof layout and design.
We construct the UX and UI with a modular approach to ensure a future-proof layout and design.
NCOI – design of the different templates

Major brands have an appealing allure; they provide a sense of familiarity and are associated with quality.

As humans, we not only enjoy looking at images but are also intuitively adept at understanding them. The speed at which we analyze an image is remarkable, and in fact, we are capable of grasping the feeling of a visual scene in an astonishing 1/10th of a second; much faster than extracting the essence from any text we read. For complex websites, this promotes scanning behavior and enables us to more effectively and rapidly find the right content.

Examples of screens we designed during this project
Examples of screens we designed during this project