← PortfolioBefore & after

Case study · Web application · UX/UI · Prototype

Habib University E-Application

One guided admissions journey: tell us once, see what is next, never leave the flow.

Client
Habib University
Cycle
Admissions 2027
Role
Problem framing, stakeholder and data-owner workshops, UX & UI design
Output
Interactive prototype and PRD
Redesigned applicant dashboard with seven section cards and an overall progress of 80 percent

01 — The problem

The previous e-application worked, but applicants had to work for it.

01

Too much asked

Previous Personal Information section repeating details already given at signup, shown with names and contacts blurred
  • 25 fields on one signup page
  • The same details asked again in section one
  • 19 upload slots, whatever your board
02

A journey with no order

Previous Upload Documents page listing every transcript, voucher and form slot in one table
  • Seven sections, open in any order
  • The fee voucher and activities form uploaded inside Documents
  • “Submitted” was not submitted until you paid
03

Sent elsewhere

  • Eligibility requirements external
  • Academics and prerequisites external
  • Activities form template download
  • Portfolio sites external
  • Change a detail email
  • Applicants left the flow to learn if they qualified
  • Some steps ended in a download, a Word file and an upload

02 — Before & after

Eight moments, redesigned

01

Start with a program

Applicants pick a program first and see its requirements before they create anything.

Before
Previous landing page asking applicants to choose between international and national board
  • Choose a door before you know if you qualify
  • “Click here” to begin
After
Redesigned program selection with six program cards and a selected state
  • Six programs, one tap to requirements
  • Your choice follows you through the flow
02

Requirements, in the flow

The rules for a program live inside the application, shown for your qualification only.

Before
Previous program requirements page, a long wall of text covering every qualification
  • One long page of text per program
  • Eligibility pages lived outside the flow
After
Redesigned requirements page with a qualification selector and threshold tables
  • Pick your qualification, see only its rules
  • Published thresholds in clear tables
03

The right plan, found for you

Applicants no longer read thresholds to decide between HU TOPS and HU EOP. The plan follows from their marks.

Before
Previous HU TOPS and HU EOP eligibility page with percentage thresholds in bullet lists
  • Two programs, thresholds in bullet lists
  • The applicant had to work out which fit
After
Redesigned admissions plan step with marksheets, marks and the assigned HU EOP plan
  • Plan assigned from board, group and marks
  • The other plan is shown as not applicable
04

Tell us once

Account creation is six short steps. What the applicant already shared travels forward.

Before
Previous signup form, one very long page of fields
  • 25 fields on a single page
  • Personal details asked again later
After
Redesigned academic details step with program, board and plan carried forward and marksheets reused
  • Program, board, plan and marksheets carried forward
  • Replace a marksheet, never re-upload by default
05

A dashboard that shows what is next

Every section has its own status. The applicant always knows where they stand.

Before
Previous overview page with a status table and long instructions
  • A text wall and a status table
  • Sidebar crowded with dates and buttons
After
Redesigned dashboard with seven cards, section progress and one next action
  • Seven cards, each with its own progress
  • One clear next action
06

Program and assessment

The first choice carries over. The assessment path is a plain choice, not a policy to decode.

Before
Previous program choice and entrance examination page with long policy notes
  • Policy paragraphs before the choice
  • Test sessions tied to the fee and submission
After
Redesigned program and assessment page with first choice, optional second choice and two assessment paths
  • First choice carried forward, second optional
  • Exam or exemption, with the session marked as a preference
07

Review, then submit

Submitting means submitting. Nothing hides behind a pop-up.

Before
Previous alert saying the application is not considered submitted until the fee is paid
  • “Submitted”, but only once you pay
After
Redesigned review and submit page with expandable summaries, optional additions and declarations
  • Summary rows with Edit links
  • Optional sections stay optional
08

The fee, as its own step

Form status and fee status are never mixed. The fee opens once the form is in.

Before
Previous application fee page with a long agreement, voucher download and proof upload
  • A wall of agreement text
  • Download a voucher, pay, upload the proof
After
Redesigned application fee step with a short agreement and two payment routes
  • Opens only after the form is submitted
  • Voucher or card, in one place

03 — More screens

The steps in between

Redesigned welcome screen with create account and log in

WelcomeCreate an account, log in, or explore programs.

Redesigned education board step with national and international options

Education boardNational or international, with the specific board optional.

Redesigned addresses step of account creation

AddressesStep three of six. Fields stay optional until submission.

Redesigned dashboard at zero percent progress

A fresh dashboardZero percent, one obvious place to begin.

04 — Design principles

Calm, clear, and honest about status

One clear next action

Every screen has one dominant button and a way back.

Carry data forward

Choices and marksheets from signup fill the sections that follow.

Segment complexity

Long forms become short cards, each with a one-line purpose.

Explain status precisely

Uploaded is not verified. Submitted is not paid. Payment pending is not complete.

Validate late

Applicants can save a draft. Only final submission enforces the core requirements.

Keep optional optional

Activities, additional information and portfolio never block submission.

Ivory and pale lavender surfaces, a muted purple for action and a subdued gold for emphasis, with isometric illustrations to keep the process friendly.

IVORY
LAVENDER
PURPLE
GOLD
Find your place
AT HABIB

A single geometric sans, bold for headings and light for body copy, keeps long forms easy to scan on any screen from 320px to 2560px.

A prototype, said plainly. It shows the intended experience end to end. It does not provide live authentication, document reading, storage, payment, email or admissions decisions, and the interface says so wherever it could be mistaken for a live service.

05 — My part

From the problem to the pixels

What I did

  • Identified the problem in the previous application
  • Met stakeholders and data owners to learn what was asked, and why
  • Crafted the experience and the interface
  • Documented the requirements as a PRD

What changed for applicants

  • Fewer questions, each asked once
  • A clear order, with progress they can see
  • Requirements and payment inside the flow