Side projects NHA Knowledge Center
NHA Knowledge Center home page on a MacBook Pro floating over a blue to violet gradient: the headline ศูนย์กลางองค์ความรู้ด้านการพัฒนาที่อยู่อาศัย, a large search box and six categories
Side projectBid won2026

NHA Knowledge Center

A housing knowledge centre for the National Housing Authority of Thailand (การเคหะแห่งชาติ). Search, read and download guides, research and videos, on desktop and phone.

My role
UI designer
Year
2026
Started from
A feature list and a goal
Result
Bid won

What I had

NHA's feature list and one goal: a data and knowledge centre for housing.

What I made

The UI for the bid: home, library and detail, on desktop and phone.

showcase

One library, every screen

The library in card view on an open MacBook Pro resting on a mossy rock, surrounded by dark evergreen foliage
desktop library
The phone home page with search, on an iPhone lying among green chrysanthemum flowers
phone home
Close-up of a black iPhone 17 Pro showing the library page, on a dark navy gradient
phone library
Phone: library in list view
Phone: home page with search
Phone: video detail page

phone list · home · detail

Device mockups by creatoom

01 · home

Search first, then six ways in

hero · categories

Home
Home page top: navigation with a sign-in button, the headline, a search box with search and browse buttons, and six category cards
searchOne box, on the first screen
sign inFor members, top right
browseOr open the whole library
categoriesSix doors, one line each

recommended · video

Home
Home page middle: recommended and popular tabs, four knowledge cards with category chips, and the video library
tabsRecommended or popular
chipColour marks the category
countsViews and downloads
playlistRunning time on each video
playerOne big video up front

news · calendar

Home
Home page lower part: latest news with category tags, and an activity calendar with upcoming events
newsTagged by category
calendarActivity days in one month
upcomingDate first, then time

02 · library

Filters that show their counts

card view

Library · cards
Library in card view: search, a bar with count, sort and view switch, a filter column and a grid of knowledge cards
searchStays on top
viewCards or list
chipCategory on the photo
filtersSix groups, each with counts
countsViews and downloads

list view · search สินเชื่อ

Library · list
Library in list view after a search for สินเชื่อ (loans): rows with coloured file-type badges, metadata and download buttons, with pagination
file typeFILE, VID, WEB, SLIDE
downloadStraight from the row
datesFrom and to
pages1 – 10 of 400

03 · detail

Read it here, then download

Detail · PDF guide
Detail page for a housing loan guide: title and metadata, a PDF viewer with toolbar and page controls, and a side column with attachment, references, share and related items
aboutType, owner, views, rating
viewerZoom, full screen, download
pagesPage 1 of 24
attachmentFile size, one-click download
referencesThe rules behind the guide
shareFacebook, LINE, X, link
relatedOpens in a new tab

04 · phone

Scroll each phone

Phone home page, full length
home
Phone library in card view, full length
library · cards
Phone library in list view, full length
library · list
Phone video detail page, full length
detail

prototype

Click through it

Desktop or phone. Search, buttons, cards and rows take you to the next screen.

Or open it in a new tab (opens in a new tab)

typography & color

Kanit, and calm blues

typography

Kanit

Google Fonts · Thai and Latin in one family

ศูนย์กลางองค์ความรู้

display
ด้านการพัฒนาที่อยู่อาศัย
page title
คลังความรู้
card title
เทรนด์บ้านประหยัดพลังงานปี 2026 ที่ทุกคนควรรู้
body
ค้นหา อ่าน และดาวน์โหลดคู่มือ งานวิจัย และสื่อความรู้ด้านที่อยู่อาศัย
eyebrow
Knowledge Centers

color

  • PrimaryHEX0258FB
  • SkyHEX3AA3EF
  • SurfaceHEXE8F3FD
  • InkHEX232A31
  • NewsletterHEX0D73FC → A1F1FD

category

  • การพัฒนาชุมชน1F9D6B
  • นวัตกรรมที่อยู่อาศัย7646FC
  • งานวิจัย05B9DC
  • อบรมและสัมมนาE9A33E
  • การวางผังเมือง629DFC
  • การพัฒนาที่อยู่อาศัยE8F3FD

file type

  • FILED6453C
  • VID7C3AED
  • SLIDED97706
  • WEBE6F1FF
  • Rating starFDE553

components

Pieces of the system

Six category cards with 3D icons
category cards
Video library: a large player and a list of four videos with running times
video library
Detail side column: attachment, references, share buttons and related items
side column
Activity calendar with the 20th selected and two upcoming events
calendar
Rating card showing 4.6 from two people, and a comments list
rating · comments
Newsletter band on a blue to aqua gradient with an email field and a subscribe button
newsletter
Back to the startLab results a patient can read, and meal orders a ward can trust.