Felicia Sugiarta — Consulate General of Indonesia

Design System

Brand Identity

Information Architecture

Felicia’s design story • 4 min read

*While I'm unable to share project specifics due to NDA agreements, I'm excited to share the overall experience and learnings!

Team

3 Freelance Designers (Our little tiny design agency)

Role

Product Designer + Product Manager

Timeline

January 2024 - Present

Tools

Figma, Miro, Trello

Overview

I worked closely with a small team of fresh graduates and students. In addition to being the product designer responsible for ensuring the designs met standards, I was the main point of contact for the client, ensuring clear communication and alignment with project goals. I also guided the team, sharing my experience to help everyone grow while delivering on the client’s needs.

So... What have I done for Indonesian Consulate?

Project management

I was the main point of contact between our design agency and the client, managing and prioritizing tasks to ensure project effectiveness and on-time progression.

Client presentation

I presented our design concepts and progress updates to the client, ensuring clear communication and alignment with their vision.

Elevated brand guidelines

I elevated the brand guidelines, not through a complete rebrand, but by refining components & creating a seamless & clean interface – meticulous layout design.

Strategic platform utilization

I'm not just building and launching a website; I'm also analyzing communication touchpoints across platforms to ensure a trusted and secure user experience

An end-to-end digitalization of the passport extension process designed to effectively streamline the entire journey, from user-facing processes to back-end services.

IMPACT • 1

Once a constrain, now a breakthrough!

Resulting in a 63% growth in active users.

Improving internal workflow efficiency by 85% across platforms.

Reduced troubleshooting time by 95% for over 1.2 million annual users.

But First... | Who is Consulate General of Indonesia in Vancouver?

The Consulate General of Indonesia in Vancouver is an official diplomatic mission of the Indonesian government, located in Vancouver, Canada. Its primary role is to provide consular services to Indonesian citizens in British Columbia, Alberta, Yukon, and the Northwest Territories. These services include issuing visas, handling passport renewals, and assisting with legal matters. It also works to promote Indonesia’s culture, trade, and tourism in the region, while fostering bilateral relations between Indonesia and Canada.

THE CHALLENGE

Failed to satisfy the community & overburdening internal.

The Indonesian Consulate's priority is to ensure that the Indonesian community feels safe and served, even though they are far from home. One of the most in-demand consular services, passport extensions, has failed to satisfy the community due to inefficient processes and delays. Little did they know, it is also overburdening internal teams with outdated systems.

CONTEXT • 1

A new beginning for passport extension.

We heard you loud and clear.

Passport extension has always been a time-consuming and manual process, relying on outdated communication systems that often lead to delays and inefficiencies.

Uncover deeper insights with you.

It was critical to identify the common pain points users currently experience. Based on the user interview data we conducted, it turns out the process was actually messy.

83%

reported feeling frustrated, due to long wait times and unclear communication.

91%

stated that the process was not well explained, leading to confusion and uncertainty.

75%

users experienced delays beyond the expected timeframe

DISCOVER • 1

Understanding them – Consulate General of Indonesia.

Physically in Canada, Mentally in Indonesia.

As part of the Indonesian government, all their systems are decentralized and based in Indonesia. While they may have a presence in Canada, their operational style and systems remain tied to their home country, allowing for very little flexibility.

Diminishing returns – an imbalance where more effort yields smaller results.

The passport extension process takes up excessive time, overshadowing the other three key purposes and limiting overall service efficiency.

DISCOVER • 2

Understanding you.

Demographic & Psychographic Segmentation

On a mission to serve the Indonesian community in Canada, the Consulate General of Indonesia caters to a niche group of users.

🇮🇩

Indonesian Citizens

Residents: Need consular services like passport renewals and legal help. Tourists: Require assistance with travel issues or emergencies.

👥

Indonesian Diaspora

Students, professionals, and families seeking cultural, community, and government support.

🌏

Canadians & Foreigns

Travellers needing visas or information about Indonesia. Businesses looking for trade, tourism, or cultural collaboration.

DISCOVER • TAKE AWAYS

BUSINESS CONSTRAINTS

The centralized system and data limitations in Indonesia hinder the Consulate's ability to efficiently process passport extensions and other services in Canada.

USER CONSTRAINTS

Users face challenges due to the lack of clear communication and guidance throughout the passport extension process, leading to frustration and confusion.

APPROACH • 1

Regroup

We began with a 2-week discovery phase, diving deep into how the consulate currently worked. Sitting down with their team, we mapped out every step of the user journey, not just for the community but also for the staff who were feeling the strain. This gave us a clear picture of where things were breaking down.

Define

From those journeys, we identified the most crucial pain points and decided which features would make the biggest difference—things that could really simplify the process for both sides.

Build

With that in mind, we built a solution that focused on user-friendliness for the public while giving the internal teams much-needed relief from manual work.

Launch

When we rolled out the new system, it wasn’t just about delivering a product. We made sure the consulate staff understood the tools we were giving them, so they felt confident using the new tech.

THE PROBLEM • 1

This wasn’t going to be your typical wireframe update.

Finding structure amidst the chaos.

We start by looking at the passport extension service journey from a high-level view to understand what users experience overall. This gives us a sense of the key stages and emotions involved in the process.

A pile-up of constraints.

Then, we dig into the details of each touchpoint, exploring how users feel as they interact with the service. This helps us uncover their frustrations and what works well for them.

Watch the system fails: Zooming in to the internal back-end.

Finally, we take a peek behind the scenes to see what’s happening internally when users hit those touchpoints. This reveals where the system is falling short and highlights areas for improvement to make the process smoother for everyone.

Poor digital infrastructure outdated systems limited resources

Inefficient workflows and an absence of automated systems to manage documents.

Over-reliance on manual processes and a lack of digital or remote alternatives

A lack of structured prioritization, automated tracking, or a proper queue management system.

Lack of real-time scheduling tools, resulting in inefficiencies in confirming appointments.

Pinpoint the issue – The old system is outdated.

They're too comfortable relying on manual techniques, which slows everything down and hurts efficiency.

DISCOVER • TAKE AWAYS

PROBLEM SPACE

The current passport extension services are disjointed, inefficient, and unreliable for users, while overburdening internal teams with outdated systems.

QUICK WINS • 1

Focusing on Quick Wins.

Digitalize Key Priorities: Design isn’t just about Figma; it’s about making a real impact.

Once we recognized this, we focused on quick wins. We started small, helping the team get comfortable with the Google ecosystem they already use, making the transition feel exciting and accessible.

Dynamic Digital Files: Tackled 2/5 major pain points.

This not only streamlined their workflow but also empowered the team to collaborate more effectively, showing just how small changes can lead to big improvements in their day-to-day tasks!

BRAND • 1

Consistent across all digital platform.

Understanding design guidelines, system, and patterns.

To make sense of an otherwise unconventional process of passport extension, I started by exploring ways to perceived sense of progress.

Elevating brand guidelines through layout.

To make sense of an otherwise unconventional process of passport extension, I started by exploring ways to perceived sense of progress.

LAYOUT • 1

No fluff, consistent, and scannable.

Restricted dekstop view: Dealing with documents, we prevent any potential errors.

To maintain accuracy and prevent misunderstandings when dealing with official documents, we've restricted access to desktop-only, ensuring users interact with the content in a controlled environment.

Boilerplate layout – A question of readability vs. glanceability.

To make sense of an otherwise unconventional process of passport extension, I started by exploring ways to perceived sense of progress.

✅ Emphasizes the current page action, allowing users to view all information at once.

❌ On smaller desktop screens, the layout can become cramped, making it difficult to see everything clearly.

❌ The viewing flow can be somewhat confusing, potentially hindering user comprehension.

✅ Greater scalability — just look and do, read if needed

✅ Focuses on the overall process, encouraging users to fill out the form step by step.

✅ Provides a scrolling experience with fewer distractions, allowing for a smoother interaction.

✅ The streamlined view helps users better understand the steps they need to take.

✅ Greater readability — improved retention, reduced confusion.

LAYOUT • TAKE AWAYS

ONE COLUMN FORMAT

The One-Column Form really helps create a clearer and more guided experience, especially for something complex like passport extensions. It makes it easier for users to engage and understand the process, which means they’re more likely to complete the form successfully.

DEVELOP • 1

Easy and reliable!

Ensuring every task is straight-forward.

No more back-and-forth emails or unreliable resources for your passport extension! Your information is secure with us, and we’re committed to delivering results efficiently and reliably.

High-Fidelity Screens + Prototype

To make sense of an otherwise unconventional process of passport extension, I started by exploring ways to perceived sense of progress.

DEVELOP • 2

Hand-off: Sharing Awareness

Bridging the gap: Effective handoffs for lasting solutions

A crucial part of the design process is handing off to clients, where we conduct demos to ensure they understand how to use the new system and to guarantee its sustainability for both internal and external use.

Optimizing user engagement across platforms

Leveraging other platforms means analyzing user journeys and engagement patterns across various channels. We utilize email newsletters and provide direct links from the official Indonesian consulate website and the passport extension site to ensure seamless accessibility and engagement for our users.