Back to Homepage

Saintek Focus Website Case Study

About The Company

SaintekFocuss is an Indonesian tutoring platform founded since in July 2020. It focuses on helping students prepare for computer-based written exams, providing tailored guidance for high school students, vocational high school students, and the general public aged 17 to 25. With a mission to make learning more accessible, SaintekFocuss supports students through their academic journey, ensuring they have the knowledge and confidence needed to excel in their exams.

User and Audience

This would be their first proper web application. So they wanted their website to meet their needs:

Admin Role: The admin is responsible for managing the overall platform, including user accounts, course content, and system settings.
Mentor Role: Mentors are subject matter experts who guide students through their learning journey. They create and manage course materials, design tryout sessions, and provide personalised feedback to help students prepare for SNBT exams.
Student Role: Students are the primary users of the platform, seeking to enhance their knowledge and improve test readiness. They can access course materials, participate in tryout sessions, and monitor their progress through detailed analytics.

User and Audience

This would be their first proper web application. So they wanted their website to meet their needs:

Admin Role: The admin is responsible for managing the overall platform, including user accounts, course content, and system settings.
Mentor Role: Mentors are subject matter experts who guide students through their learning journey. They create and manage course materials, design tryout sessions, and provide personalised feedback to help students prepare for SNBT exams.
Student Role: Students are the primary users of the platform, seeking to enhance their knowledge and improve test readiness. They can access course materials, participate in tryout sessions, and monitor their progress through detailed analytics.

My Roles and Responsibilities

My roles in this project as a UI/UX Designer include gathering information and creating mockups. This is how I illustrated my roles:

My Roles and Responsibilities

My roles in this project as a UI/UX Designer include gathering information and creating mockups. This is how I illustrated my roles:

The Process

Conducting Pre-Survey

We are conducting a pre-survey to gather information from students at SaintekFocus to understand how the website can help them learn more effectively and efficiently through online interviews and an online form. Here are the key methods and results:

Interview with 5 Participants: We identified common pain points, key motivations when they use SaintekFocus, and improvement suggestions on the platform
Online Questionnaire (32 Respondents): Based on quantitative insight on learning preferences and key metrics to improve learning effectiveness.

The Process

Conducting Pre-Survey

Interview with 5 Participants: We identified common pain points, key motivations when they use SaintekFocus, and improvement suggestions on the platform
Online Questionnaire (32 Respondents): Based on quantitative insight on learning preferences and key metrics to improve learning effectiveness.

Creating Empathy Map

After we do some observation and research, we create an empathy map to analyse the problem when students use SaintekFocus. The reason we creating empathy maps is to know more about how students from SaintekFocuss feel. We mapping it into 4 sectors.

Sees: What do they see while using SaintekFocuss products?
Hears: What do they hear while using the SaintekFocuss product?
Says & Does: What do they say after using the SaintekFocuss product? If good? Or bad
Thinks & Feels: What do they feel while using SaintekFocuss products?

Creating Empathy Map

Sees: What do they see while using SaintekFocuss products?
Hears: What do they hear while using the SaintekFocuss product?
Says & Does: What do they say after using the SaintekFocuss product? If good? Or bad
Thinks & Feels: What do they feel while using SaintekFocuss products?

User Persona

Based on the empathy map, we created two user personas to represent key user types and better understand their goals, frustrations, and behaviours throughout the journey

User Persona

Based on the empathy map, we created two user personas to represent key user types and better understand their goals, frustrations, and behaviours throughout the journey

Uncovering User Frustrations

During the research phase, users reported several frustrations that disrupted their learning experience

The class registration process felt overly complicated and time-consuming.
Payment confirmations had to be done manually through the admin, causing delays.
Learning resources like recorded videos and supporting materials were not provided.
Tryout sessions lacked a countdown timer, making practice less effective.
Admin response time was slow, especially when users faced issues.
These insights helped guide our design decisions toward a smoother and more supportive learning platform.

Uncovering User Frustrations

During the research phase, users reported several frustrations that disrupted their learning experience

The class registration process felt overly complicated and time-consuming.
Payment confirmations had to be done manually through the admin, causing delays.
Learning resources like recorded videos and supporting materials were not provided.
Tryout sessions lacked a countdown timer, making practice less effective.
Admin response time was slow, especially when users faced issues.
These insights helped guide our design decisions toward a smoother and more supportive learning platform.

Creating User Storyboard

To visualize how users interact with SaintekFocuss, I created a user storyboard to illustrate the key activities and touchpoints throughout their journey. This storyboard helps highlight the user’s goals, actions, and emotional responses in real scenarios.

Creating User Storyboard

User Flow

To better understand how users interact with the platform, I created a detailed user flow that maps out each step — from class exploration to registration, learning, and exam participation. This flow illustrates the end-to-end journey:

Starting from logging in via Google
Browsing and enrolling in classes
Accessing materials and live sessions
Downloading resources
Joining and completing tryout exams
The user flow helps identify key decision points and ensures the platform supports a smooth and intuitive experience for users with various learning needs.

User Flow

Starting from logging in via Google
Browsing and enrolling in classes
Accessing materials and live sessions
Downloading resources
Joining and completing tryout exams
The user flow helps identify key decision points and ensures the platform supports a smooth and intuitive experience for users with various learning needs.

The Results

Visual Guidelines

To maintain design consistency and enhance user experience, I created a visual guideline that includes:

Typography: Chosen for clarity and readability across all devices.
Color Palette: Balanced use of primary, secondary, and semantic colours to create a friendly and trustworthy learning environment.
Icons & Components: Simple, intuitive, and aligned with the overall design system to ensure visual harmony.
Spacing & Layout: Clear structure and spacing to support a clean and uncluttered interface.

The Results

Visual Guidelines

To maintain design consistency and enhance user experience, I created a visual guideline that includes:

Typography: Chosen for clarity and readability across all devices.
Color Palette: Balanced use of primary, secondary, and semantic colours to create a friendly and trustworthy learning environment.
Icons & Components: Simple, intuitive, and aligned with the overall design system to ensure visual harmony.
Spacing & Layout: Clear structure and spacing to support a clean and uncluttered interface.