Overview
- The problem
- Visitors need to identify a consular service, understand the next step, and know when to move into an account-based portal. The public website and portal need distinct jobs.
- My contribution
- Product Designer. The documented scope covers service-first information architecture, portal handoff, shared information patterns, and responsive desktop, tablet, and mobile layouts.
- The outcome
- Responsive Figma designs for the public website and related service information. A production release and changes in service completion or satisfaction are not established.
Problem
Responsive source designs show service discovery, visit preparation, portal explanation, and supporting information pages. The problem framing comes from the designed journey; a research protocol and service analytics are not supplied.
My Role
- Company / product context
- Saphyte · E-Afghan public website redesign
- Users
- People exploring Afghan consular services, service requirements, and visit preparation before beginning an application.
- My role & scope
- Product Designer. The documented scope covers service-first information architecture, portal handoff, shared information patterns, and responsive desktop, tablet, and mobile layouts.
- Evidence available
- Original project narrative and design artifacts retained in this case study.
Process
Desktop, tablet, and mobile layouts provide an inspectable comparison of hierarchy and handoff. No original-versus-redesign usability study is documented.
One hierarchy, across screen sizes
Desktop, tablet, and mobile layouts are included in the design. The mobile version stacks service information and portal guidance into a continuous reading order while retaining the primary service and visit routes.
The same service-first story, adapted to desktop and mobile. Open either screen to inspect the full design.Key Decisions
The public website and account portal serve different jobs. Service information should help people prepare before the handoff, while responsive layouts must preserve the decision order rather than simply shrink desktop content.
Key design decisions
Start with the service, not the organization
Explore services and Plan a visit lead the entry experience. A service index then groups categories and gives passport services a focused information panel.
View the service-discovery designMake the website-to-portal handoff explicit
Create an account, access services, and track updates explain the account journey before the visitor enters it. Public guidance and the working portal stay distinct.
View the account-journey explanationPreserve the service-first story on mobile
Responsive layouts stack service information and portal guidance in reading order while retaining the primary service and visit routes.
Compare the desktop and mobile designs
Final Solution
A service-first public site connects the service index, visit planning, account-journey explanation, and supporting pages. The original responsive screens show the hierarchy at different widths.
Service discovery before account creation
The homepage leads with two routes: explore services or plan a visit. Below the introduction, a service index brings passport services together with other citizen-service categories. The hierarchy makes the service itself the starting point, rather than asking visitors to understand the organization first.
Service categories paired with a focused passport-services panel.Explain the relationship between website and portal
The design introduces the account journey in three stages: create an account, access services, and track updates. This explanation connects the information website to the Citizen Portal without treating them as interchangeable surfaces.
An explicit handoff from discovery to the account-based experience.Beyond the homepage
The landing-page design system extends into About, Citizen Services, passport guidance, birth-certificate information, e-Visa, and support content. Shared navigation, service patterns, and help sections establish continuity between the entry page and the detailed information visitors need.
The companion Citizen Portal case study follows the next part of the journey: managing a profile, preparing documents, and working through a passport application.
Outcomes
The deliverable is the responsive public-facing Figma design and its connection to the Citizen Portal. A production release and changes in service completion or satisfaction are not established.
Evidence & limitations
The source file and exported screens are the evidence. No project dates, research methods, tested outcomes, or performance metrics were supplied.
The intended hierarchy has not been validated with service applicants in the available record.
What needs validation
The following is a proposed validation plan, not research already conducted:
- Test whether visitors can find the relevant service and understand its requirements without prior knowledge of the organization.
- Check whether people distinguish service information, visit planning, and the account-based application route.
- Evaluate comprehension, keyboard access, and primary-route discoverability across screen sizes and supported languages.
Learnings
- What worked in the design
- Service selection and portal entry have distinct roles in the journey.
- What I would change next
- Test service identification, requirement comprehension, language needs, and the website-to-portal handoff before measuring completion against a baseline.
Delivery and design takeaways
The deliverable is a responsive public-facing design with a service index, account-journey guidance, and a consistent foundation for service and support pages. The companion Citizen Portal documents the next stage of the journey; neither case study claims a verified production release.
- A public service website earns its place by helping someone identify the next step, not by duplicating the account workspace.
- A portal handoff is clearer when its stages and purpose are explained before account creation.
- Responsive design needs to preserve the order of decisions, not simply shrink the desktop composition.
