Hi, I'm Hasyimah — I design web interfaces, dashboards, and multi-surface digital products that turn complex systems into intuitive experiences.
I'm a UI/UX designer with a background in Information Systems, specialising in web and dashboard design. I practise user-centred design — researching what users need, planning information architecture, and crafting the visual look and feel of each product.
Coming from an engineering background, I understand how data flows and how developers think — making me a better collaborator and a stronger designer. I believe good design is invisible: when it works, users just get things done.
Real enterprise, government, and concept projects — spanning web, portal, and mobile surfaces.
Multi-role system for admins, managers, and proteges with distinct dashboards and workflows.
View Case Study →3-surface platform — public website, certification portal, and Flutter mobile app with unified design system.
View Case Study →Conversion-focused marketing page guiding business visitors toward enquiry through clear IA and persuasive CTAs.
View Case Study →End-to-end HR dashboard replacing manual leave tracking with a self-service system for employees and managers.
View Case Study →Mobile food ordering app for budget-conscious university students. Full UX process from research to wireframes.
View Case Study →Meal plan diary for diabetic patients — expert system suggests low-sugar Malay dishes based on glycemic index.
View Case Study →Directed and integrated AI-generated design output into a Flutter proof-of-concept — a serverless mobile messenger that relays messages phone-to-phone over Bluetooth LE with no internet or accounts.
View Case Study →I'm currently open to new opportunities. Whether you have a project in mind or just want to say hi — my inbox is always open!
A multi-role protege management system connecting proteges, managers, and HR admins in one unified platform.
Prowira Graduan is Weststar Engineering's internal management platform for the national protege (graduate trainee) programme. It serves three distinct user roles — proteges, managers, and HR admins — each with different information needs, permissions, and workflows. My role was to design the full UI across all three role views, ensuring each user could complete their tasks without confusion.
"Managing protege progress, task assignments, and evaluations was scattered across emails and spreadsheets — with no single place for managers to track progress or proteges to know what was expected of them."
"I just want to know what I'm supposed to do this week and whether I'm on track."
Add your Prowira user flow diagram here
Show the 3 separate role flows (Protege / Manager / Admin) and where they intersect
Export from Figma and drop the image here
[ Add your actual lo-fi wireframe screenshots here — export from Figma at greyscale and drop them in ]
Protege Dashboard
[ Add screenshot — task list, progress bar, upcoming milestones ]
Manager Overview
[ Add screenshot — team progress table, pending evaluations, notifications ]
Admin Panel
[ Add screenshot — programme-wide stats, user management, report generation ]
National halal certification platform — public website, Laravel + React portal, and Flutter mobile app with a unified bilingual design system.
HALO (Halal Lorosa'e Authority) is Timor-Leste's national halal certification body built by Weststar, designed to certify Timorese products and premises to MS 1500:2019 standard and pursue Gulf and ASEAN market recognition. I directed AI as a design tool throughout — prompting, evaluating, and refining output across all three digital surfaces — while owning and quality-controlling every design decision.
The unique challenge was contextual judgement that AI cannot make. All UI copy, legal references, and payment flows had to be adapted to Timor-Leste's specific context — Portuguese language, USD currency, Lda. legal form, BNCTL/BNU payment rails, 13 municípios — requiring research and human direction at every step.
"Timor-Leste had no digital infrastructure for halal certification — companies had no online way to apply, track progress, or verify certificates. The platform also had to look credible enough to support Gulf market recognition."
Design principle: Alternate section rhythm — photo → cards → editorial → process → dark band → photo — to prevent every section looking identical. Subtle motion only: cards rise 5px on hover, photos zoom 6%, gold underline on section titles. Always with prefers-reduced-motion fallback.
"[ Add a quote from your persona's perspective — what do they want and what frustrates them about the current process? ]"
Add your HALO certification flow diagram here
Apply → Documents → Site Audit → Assessment → Approval → Verified
Export from Figma and drop the image here
[ Add wireframe screenshots — export your early Figma frames and drop them in ]
Public Homepage Sections
[ Add screenshots — trust band, about, services, process, verify, why HALO, ecosystem, hotels, news, contact ]
WHIP Certification Portal
[ Add screenshots — dashboard, application pipeline, billing flow, auditor review, certificate issuance, verify search ]
HALO Empresas Mobile App
[ Add screenshots — Home, Scan, Verify, Tourism, News tabs ]
HALO Certificate Design
[ Add certificate screenshot — guilloché pattern, microtext, QR, status pill ]
Conversion-focused marketing landing page for Weststar Global Halal Trading & Certification — designed to guide business visitors toward enquiry.
WGHTC (Weststar Global Halal Trading & Certification) needed a professional marketing landing page to present their halal trading and certification services to business audiences. The primary goal was to establish instant credibility and guide visitors toward making an enquiry in a high-trust, competitive market.
"Business visitors landing on a halal certification company's page need to immediately trust what they see. If the design looks unpolished or the information hierarchy is confusing, they leave before reading a single word."
"[ Add a quote from your persona's perspective ]"
Add your WGHTC visitor flow here
Land → Scan hero → Read services → View trust signals → Click CTA → Enquiry form
Export from Figma and drop the image here
[ Add your wireframe screenshots — export from Figma and drop here ]
Full landing page screenshot
[ Add desktop full-page screenshot ]
Mobile responsive view
[ Add mobile screenshot ]
End-to-end HR UI replacing fragmented manual tracking with a self-service dashboard for employees, HR, and managers.
An internal HR management tool for Weststar Engineering that replaces a fragmented manual process — email requests, spreadsheet tracking, and direct HR queries — with a centralised web-based system. Three user groups are served: employees (self-service leave tracking), managers (approval dashboard), and HR admins (reporting and management).
"Employees had no reliable way to check their leave balance at a glance — leading to repeated HR queries, manual errors, and frustration on both sides."
"I spend half my day answering the same leave balance questions. I need a system where employees can help themselves."
Add your attendance system user flow here
Employee: Login → Dashboard → Apply Leave → Confirmation
Manager: Login → Pending Requests → Review → Approve/Reject
Export from Figma and drop the image here
[ Add your wireframe screenshots — export from Figma and drop here ]
Employee Dashboard
[ Add screenshot — leave balance card, attendance summary, apply leave CTA ]
Leave Application Form
[ Add screenshot — 6-field simplified form with date picker ]
Manager Approval View
[ Add screenshot — pending requests table, approve/reject actions ]
Malay food delivery app for university students on a budget. Full UX process — research, persona, competitive analysis, user flow, wireframes, and final UI.
NasiGo is a self-initiated concept mobile app solving a specific, underserved problem: university students in Malaysia who want affordable, familiar Malay food delivered quickly — without the high fees and minimum orders of GrabFood, FoodPanda, and Shopee Food. This project covers the full UX process from problem discovery to final high-fidelity screens.
"University students want affordable Malay food delivered fast — but existing apps are expensive, have high minimum orders, and barely surface local Malay restaurants."
"I just want something affordable and fast. I don't have time between classes to walk to the cafeteria every day."
Add your NasiGo user flow diagram here
Launch → Home → Search/Filter → Restaurant → Item Detail → Cart → Checkout → Track
Export from FigJam and drop the image here
[ Add your greyscale wireframe screenshots — export from Figma at each screen and drop here ]
Home Screen + Search & Filter
[ Add screenshot — nearby Malay restaurants, budget filter slider ]
Sign Up & Log In
[ Add screenshot — onboarding screens, registration form ]
Restaurant Page & Item Detail
[ Add screenshot — menu, item customisation ]
[ Add if applicable — in-app chat with restaurant or rider ]
[ Add if applicable — order status notifications, promo alerts ]
Cart, Checkout & Order Placed
[ Add screenshot — cart summary, payment, order confirmation ]
User Profile
[ Add screenshot — order history, saved addresses, payment methods ]
Meal plan diary for diabetic patients — expert system suggests low-sugar Malay dishes based on glycemic index. Reframed from chatbot to tap-based daily diary.
Glukosa started as an academic expert system project that recommended low-sugar Malay meals to diabetic patients through a chatbot interface. After evaluating the original approach, I reframed it as a meal plan diary — keeping the expert system logic but replacing the chatbot with a tap-based, visual daily planner far more suitable for older adult users managing a chronic condition daily.
"Diabetic patients need to track meals daily over time. A chatbot requires typing and conversational back-and-forth — too complex for older adult users managing a daily health routine. A diary is more habitual, more visual, and fits how people actually manage their diet."
"My doctor told me to watch my sugar, but I don't know which of my favourite dishes are actually safe. I just want something simple to track what I eat every day."
Add your Glukosa user flow here
Loop A: Plan Ahead (expert suggestions) · Loop B: Log What Was Eaten (instant GI feedback)
Export from FigJam and drop the image here
[ Add your wireframe screenshots — export from Figma and drop here ]
Onboarding
[ Add screenshot — welcome screen, health profile setup (age, HbA1c, daily carb limit) ]
Sign Up & Log In
[ Add screenshot — registration and login screens ]
Diary Home (Today View)
[ Add screenshot — calendar with colour-coded meal history, today's meal slots ]
[ Add if applicable — in-app messaging with dietitian or care team ]
[ Add if applicable — meal reminder notifications, daily limit alerts ]
Create & Log a Meal
[ Add screenshot — food search, expert suggestion list, GI feedback (✅⚠️❌), swap suggestion ]
User Profile
[ Add screenshot — health profile, HbA1c target, daily carb limit, logged history ]
An offline, serverless mobile messenger that relays messages phone-to-phone over Bluetooth LE mesh. No internet, no servers, no accounts — built for situations where infrastructure is unavailable or untrusted.
Meshsenger lets phones within Bluetooth range (~10–100m) communicate with each other — no internet, no servers, no user accounts. Messages hop device-to-device across a mesh network, meaning a phone that can't reach you directly can still reach you via other phones relaying in between.
The core product problem isn't networking — it's legibility. Making an invisible ad-hoc network understandable to a normal user. The UI's job is to answer, at a glance: who is nearby, how many hops away they are, whether a message is encrypted, and whether it actually arrived.
"How do you design a UI for a network that's invisible? Users can't see the mesh — they need the interface to tell them who is nearby, how far away they are, whether their message is private, and whether it actually got through."
All 7 ported 1:1 into Dart — zero manual sync between web kit and Flutter app.
30 light + 15 dark Tokens Studio variables auto-generated from the CSS token files by the Node.js pipeline.
"At big events my signal drops completely and I can't reach my friends. I need a way to send messages that doesn't depend on the network being up."
Add your Meshsenger user flow here
Discover nearby peers → View hop distance → Send public message → Start encrypted DM → Check delivery status
Export from Figma and drop the image here
[ Add wireframe screenshots — export from Figma and drop here ]
Onboarding
[ Add screenshot — first launch, nickname setup (no account required), mesh introduction ]
Users Sign Up & Log In
[ Add screenshot — no account model: nickname-only, identity generated locally, no server ]
Users Homepage — Mesh Tab
[ Add screenshot — nearby peers list, RSSI signal bar (4 levels), hop count, online/offline status ]
Messages
[ Add screenshot — public channel thread + encrypted DM thread, encryption status label ]
Notifications
[ Add screenshot — message delivery status, peer discovery alerts, offline/reconnecting states ]
Create and Publish
[ Add screenshot — compose message, select channel (public / encrypted DM), send with delivery indicator ]
Profile
[ Add screenshot — local identity display, public key, security section (encryption status), saved identity ]
A written content style guide was produced as part of the design system — standardising mesh-networking vocabulary across every screen and establishing a non-negotiable trust communication rule.
State who can read a message before claiming it is secure.
✅ "Public channel: anyone on the mesh can read this."
❌ "Your messages are protected." (without saying by what, or from whom)