Unggulin — PTN Preparation Platform
A web platform I worked on at NELENGA — a UTBK tryout platform for students preparing for university entrance exams (PTN), completed with PTN admission info. This case study walks through the problem, the design process, and the key screens from the Figma files.
01 · Overview
Unggulin is a web application whose core product is UTBK tryout simulations for students preparing for university entrance exams (PTN). I designed the UI/UX for the product — working on the overall user experience, interface design, and key product flows to create a clear, intuitive, and accessible learning experience.
Alongside the tryout experience as the main focus, the platform also provides supporting PTN admission information: entrance paths (Seleksi Nasional & Mandiri), a university directory, and supporting content like articles, tips, and scholarship information — all managed through an admin dashboard.
02 · Background
For most Indonesian students, the UTBK-SNBT exam is the gate to public universities (PTN). Preparing for it means two things: practicing under conditions that feel like the real computer-based test (CBT), and understanding the landscape — which entrance paths exist, which universities to aim for, and how to fund the journey.
Unggulin brings both into one web platform. I joined the project as a UI/UX Designer at NELENGA (Dec 2025 – Present), responsible for designing the product experience from the tryout sessions to the supporting information pages.
03 · Problem
The core challenge was designing a platform that serves two different jobs at once — a demanding exam simulation and an easy-to-explore information hub.
- Practice must feel like the real thing. A tryout only builds confidence if the CBT session feels authentic — timers, question navigation, and answer flow have to work the way students will actually experience them in the exam.
- Admission info is scattered. Entrance paths, university options, and scholarship information live across many different sources — students need one place where it all makes sense together.
- Two audiences, one interface. Students in an exam mindset need focus and clarity, while the same students browsing for info need discoverability — the UI had to switch between both modes without friction.
- Content keeps growing. Tryouts, articles, universities, and scholarships are managed continuously, so the design had to be built on reusable patterns that stay consistent as the product scales.
04 · Goals
- Make the tryout experience feel like a real UTBK-SNBT CBT session — familiar, focused, and low-stress.
- Make PTN admission information (paths, universities, scholarships) easy to discover and understand.
- Keep the whole experience clear, intuitive, and accessible for students across devices.
- Build a consistent, reusable UI foundation so new content and features can be added without redesigning.
05 · My Role
UI/UX Designer — end-to-end, from structuring the experience to final interface design.
- Experience design: overall user experience and key product flows — from starting a tryout to completing a CBT session, and from browsing admission info to reading supporting content.
- Interface design: high-fidelity screens for the tryout core (student-facing) and the admin dashboard (content management).
- Consistency: reusable UI patterns so the growing platform stays visually and behaviorally coherent.
06 · Research
The design was grounded in understanding how students actually prepare for UTBK-SNBT: what a real CBT session looks and feels like, what information they look for before the exam, and where the friction usually happens between practicing and planning.
- Reference study: studying the official UTBK-SNBT computer-based test format so the tryout simulation mirrors the real exam experience students are preparing for.
- Content mapping: mapping the admission information students need — entrance paths (Seleksi Nasional & Mandiri), university options, and scholarships — into a structured content model.
- Alignment: working with the NELENGA team to prioritize which flows matter most for launch.
07 · Key Findings
- Familiarity reduces anxiety. The closer the tryout interface mirrors the real CBT exam, the more useful the practice is — the UI's job is to disappear so students can focus on the questions.
- Orientation matters as much as practice. Students don't only need questions to answer — they need to understand the road ahead: which path fits them, which universities exist, and what funding is available.
- Content needs a home. Articles, tips, universities, and scholarships only become valuable when they're organized in a predictable structure students can navigate intuitively.
08 · Design Approach
These findings shaped three design principles for the platform:
- Focus mode for exams. The tryout session gets a clean, distraction-free CBT interface with clear question navigation, timers, and answer states — modeled on the real exam.
- Explore mode for info. Admission content (paths, universities, scholarships, articles) gets a browsable, well-structured layout that invites reading without overwhelming.
- One visual language. Both modes share the same components and patterns, so moving between "practice" and "plan" feels like one product, not two.
09 · UI Design
From there I moved into high-fidelity UI in Figma. The visual direction prioritizes clarity and focus: a calm layout that keeps students oriented during exam sessions, and a friendly content presentation for the information pages. Every screen was designed with the full experience in mind — empty states, loading states, and success states included — so the development team can implement without guessing.
10 · App screens
11 · Final Solution
The final design covers the complete Unggulin experience on web: a UTBK-SNBT tryout simulation with an authentic CBT session as the core product, surrounded by structured PTN admission information — entrance paths, a university directory, articles & tips, and a scholarship directory — plus an admin dashboard so the NELENGA team can manage all of that content continuously. Everything is built on a consistent, reusable set of UI patterns, designed to keep the experience clear, intuitive, and accessible as the platform grows.
12 · Reflection
Designing Unggulin reinforced a lesson about products with a "high-stakes mode": when part of your product mimics a real, stressful experience (an exam), the best design decision is often restraint — fewer colors, fewer elements, clearer states. And when another part of the same product is exploratory (admission info), the challenge inverts: you need richness and discoverability. Holding both inside one visual system was the most interesting design problem in this project.
As the platform grows, I'd want to keep validating the tryout experience with real students — watching how they behave in a full CBT session — and iterate on the feedback and results experience, which is where practice turns into motivation.
— Fegi Sucepto Priawan · UI/UX Designer