Matthew Seungheon Nam
KOEN
English résumé

Korea Institute of Green Climate Technology · April–June 2026 · 3 months

G-SEED green building certification

One certification case, followed from quotation to certificate across three roles.

The G-SEED progress detail screen. Five of the eight stage tabs are active and site inspection, evaluation result and certificate issuance are greyed out.
A stage opens only once its own data exists. The certifying body shown is a demo setting, and applicant details were replaced with stand-ins before capture.

In short

Applicants filed their documents and then could not see what their case was waiting on. I mapped the eight-stage certification process, defined whose data opens each stage, and designed the applicant and certifying-body screens as one shared case. The result is a working browser prototype in which a case moves from quotation to certificate without leaving the flow.

Context

G-SEED is Korea's national green building certification, in the same family as LEED or BREEAM. An applicant requests a quotation and files documents, a certifying body reviews them and inspects the site, a committee decides, and a certificate is issued. This is an internal prototype built at my employer. The certifying body on screen is a demo setting, and there are no live certification, payment or delivery connections.

Role
Project Manager / Service Designer
Team
Frontend and backend engineers at KGCT
Organisation
Korea Institute of Green Climate Technology
Timeline
April–June 2026 · 3 months
Tools
Figma · AI-Figma MCP · Browser prototype on local storage

What was built

  • Eight progress stages, three roles, one shared data store
  • An unbroken chain of state transitions from quotation to certificate issuance
  • Working browser prototype used for stakeholder and developer review

The problem

Every step of certification belongs to a different party. The applicant writes the application, the certifying body issues the receipt, a committee settles the result. Each party sees its own screen and the work gets done, but no screen follows one case from beginning to end. After filing, an applicant cannot tell what the case is waiting on. A reviewer assembling one case's history has to look in several places.

What I was responsible for

I led the project: I learned the certification rules, mapped the process, specified the screens, and built the clickable prototype with AI-Figma MCP before handing it to the engineers. The constraint was scope. This was an internal prototype with no live certification or payment connection, so the design had to prove the workflow, not the integrations.

Decisions that shaped the design

  • One case, not three role views. Applicant, certifying body and committee read and write the same record, so information entered once appears wherever the next party needs it.
  • A stage opens only when its own data exists. The eight tabs are gated by the previous stage's output, which makes the current status and the next action readable from the tab bar alone.
  • Going backwards is part of the design. A document-correction round sends the case back to self-assessment, and each request and response accumulates in one table, so corrections are reviewed on the same basis as forward progress.

Certification runs through eight stages. Each stage opens only once the previous stage's data exists, and the document-correction stage sends the flow back to self-assessment.

  1. 01Application
  2. 02ReceiptOpens only when data exists
  3. 03Self-assessment
  4. 04Fee
  5. 05Document correction
  6. 06Site inspection
  7. 07Evaluation result
  8. 08Certificate issuance
Returns to an earlier stage
Reconstructed process diagram. This sequencing, gating and backward-correction structure is the design decision no single screenshot can show.
The document-correction tab. A collapsible header for the first correction round shows request and due dates, and a four-column table pairs each request with an empty response field.
The backward path. When the certifying body asks for corrections criterion by criterion, the same case returns to self-assessment and each round accumulates in one table.
The evaluation-result tab. Three summary cards for grade, committee total and self-assessment total sit above a per-field table with allocation, self-assessment and committee columns.
The committee's scores sit beside the applicant's own, field by field. The data the applicant created earlier has carried through as the same case.
The certificate tab. A table lists the certificate and evaluation-report files, with the certificate number, grade, issue date and validity period beneath.
The chain that began at the quotation ends here, on the same case record.

What was built and verified

A browser prototype that carries one case through all eight stages, including a correction round, on a single shared store. Stakeholders and engineers reviewed it by clicking through real transitions rather than reading a specification, so the discussion moved from whether a screen looked right to whether a state transition was right. It was not connected to the live certification system, so no operational figures are claimed.

All work