Human-Computer Interaction Design
Research, wireframes, prototypes, testing. More than ten years of it, from a bank to a palm-oil giant.
The DXC Bionix design systemHey 👋 I'm Rudzainy. I've done UX in education, maritime, media, banking, agritech, IT and telco, as a designer, a developer, a lecturer, and once as a stage manager. Most of what I know, I learned by shipping something. Here's the evidence.
15+
Years working
7y 3m
IT & web development
6y 8m
Education & mentoring
5y 6m
Enterprise environments
Cumulative years, counted from my CV. The overlaps are on purpose, most of those years wore two hats.
Eight reasons to work with me
Each one comes with something you can actually go and read.
Design + code
Rails and React, not just Figma, now with custom AI workflows. The handoff problem goes away when the designer is also the developer.
The Hoojah projectMultimedia
Animation, video, photography, sound. Useful when the brief says "make it feel like something."
Flip-down numbers & charactersCuriosity
I read outside the field: geology, history, off-grid living. Odd inputs make for less generic outputs.
Of booksProblem-solving
Website revamp, app concept, interactive installation, a national communication framework. Different shapes, same job: make the vague thing concrete.
The FrameworkTeamwork
Mentored 14 bootcamp intakes. I'm comfortable explaining, listening, and being wrong in front of people.
Mentoring 14 bootcamp intakesTemperament
Directed a play. Built two maritime academies from an empty building. New ground doesn't bother me.
Directing Orang KasarDelivery
Product-owner mindset: I write the stories, set the priorities, and keep design, QA and engineering pointed the same way.
Day Food catalogueHow I work
Listen first, sketch early, test before anyone writes production code. Because I build too, the gap between "designed" and "shipped" is usually days, not sprints.
%%{ init: { 'theme': 'base', 'themeVariables': { 'darkMode': false, 'fontFamily': 'Crimson Text, Georgia, serif', 'fontSize': '15px', 'primaryColor': '#F6F2E9', 'primaryTextColor': '#201A2B', 'primaryBorderColor': '#201A2B', 'lineColor': '#5B5566', 'secondaryColor': '#EAE6DD', 'tertiaryColor': '#ffffff' } } }%%
flowchart LR
A["Listen: requirement gathering"] --> B["Research users and domain"]
B --> C["Sketch journeys and wireframes"]
C --> D["Prototype in Figma"]
D --> E["Test with real users"]
E -- "what we learned" --> C
D --> F["Build with Rails or React"]
F --> G["Ship, measure, report"]
G -- "next iteration" --> B
Text version of this diagram
- Listen: requirement gathering.
- Research users and domain.
- Sketch journeys and wireframes.
- Prototype in Figma.
- Test with real users, then loop back to sketching with what we learned.
- Build with Rails or React.
- Ship, measure, report, then loop back to research for the next iteration.
More than fifteen years of track record
Seven industries, in roughly this order. Every jump taught me a vocabulary I still use.
%%{ init: { 'theme': 'base', 'themeVariables': { 'darkMode': false, 'fontFamily': 'Crimson Text, Georgia, serif', 'primaryColor': '#F6F2E9', 'primaryTextColor': '#201A2B', 'primaryBorderColor': '#201A2B', 'lineColor': '#5B5566', 'secondaryColor': '#EAE6DD', 'tertiaryColor': '#ffffff', 'fontSize': '15px', 'cScale0': '#E1F0E9', 'cScale1': '#E5E8F4', 'cScale2': '#F7E9D8', 'cScale3': '#E1F0E9', 'cScale4': '#E5E8F4', 'cScale5': '#F7E9D8', 'cScale6': '#E1F0E9', 'cScale7': '#E5E8F4', 'cScaleLabel0': '#201A2B', 'cScaleLabel1': '#201A2B', 'cScaleLabel2': '#201A2B', 'cScaleLabel3': '#201A2B', 'cScaleLabel4': '#201A2B', 'cScaleLabel5': '#201A2B', 'cScaleLabel6': '#201A2B', 'cScaleLabel7': '#201A2B' } } }%%
timeline
2007-2009 : Web and graphic design : Teras Solutions, MSC Management
2009-2012 : Maritime : Built two academies from the ground up
2012-2014 : Education : Lecturer at Universiti Tenaga Nasional
2015-2017 : Bootcamp mentor and Rails developer : NEXT Academy, 14 intakes
2018-2020 : Enterprise and media UX : DXC Technology, Rev Asia
2021-2023 : Banking and agritech UX : Affin Bank, Ace Resources
2024-now : Product ownership and freelance : Maxis Broadband, rudzainy.com
Text version of this timeline
- 2007–2009 · Web and graphic design: Teras Solutions, MSC Management.
- 2009–2012 · Maritime: built two academies from the ground up.
- 2012–2014 · Education: lecturer at Universiti Tenaga Nasional.
- 2015–2017 · Bootcamp mentor and Rails developer: NEXT Academy, 14 intakes.
- 2018–2020 · Enterprise and media UX: DXC Technology, Rev Asia.
- 2021–2023 · Banking and agritech UX: Affin Bank, Ace Resources.
- 2024–now · Product ownership and freelance: Maxis Broadband, rudzainy.com.
Selected roles
2024
Digital Product Owner · Maxis BroadbandOwned the Q3–Q4 roadmap and backlog, wrote the user stories, ran the research, kept QA, design and engineering pointed the same way.
2022 – 2023
Platform Designer · Ace Resources AdvisoryOne of six designers serving a palm-oil business group. Four requirement-gathering workshops, four shipped Figma prototypes: fruit-bunch grading, multispectral tree health, seed production, R&D.
2019 – 2020
UI/UX Designer · Rev AsiaRedesigned says.com from the ground up, with reader and writer experience research across a group of news portals.
2018 – 2019
UI/UX Designer · DXC TechnologyLed the design team, reporting to the Director of Engineering. SaaS application UI, marketing-page concepts, and a design system reviewed by stakeholders across three regions.
2015 – 2017
Developer & Bootcamp Mentor · NEXT AcademyFourteen intakes of a nine-week Ruby, Rails, Sinatra and JavaScript bootcamp, plus building and maintaining the in-house Rails and ReactJS apps.
2012 – 2014
Lecturer · Universiti Tenaga NasionalC programming, web programming and multimedia for diploma and foundation classes. Wrote a new multimedia diploma programme for accreditation.
2009 – 2012
Business Development · Malaysia Maritime AssociationProject team that built maritime academies in Seri Manjung and Rawang from nothing: premises, Bomba certification, syllabus, day-to-day operations.
Eight earlier roles (helpdesk, factory floor, McDonald's kitchen), plus theatre, freelance and side projects, live in my full résumé.
My preferred stack
One core discipline, two supporting ones. The supporting skills are why I rarely need to hand a problem to someone else.
%%{ init: { 'theme': 'base', 'themeVariables': { 'darkMode': false, 'fontFamily': 'Crimson Text, Georgia, serif', 'primaryColor': '#F6F2E9', 'primaryTextColor': '#201A2B', 'primaryBorderColor': '#201A2B', 'lineColor': '#5B5566', 'secondaryColor': '#EAE6DD', 'tertiaryColor': '#ffffff', 'fontSize': '15px' } } }%%
flowchart LR
R(("What I bring"))
subgraph CORE["CORE · HCI and UX design"]
direction TB
C1["Requirement gathering, research"]
C2["Wireframes, interaction, interface design"]
C3["Prototyping, journeys, user testing"]
C4["Figma, Adobe XD, Sketch, Illustrator"]
end
subgraph DEV["SUPPORTING · Web and mobile development"]
direction TB
S1["Ruby on Rails, Jekyll, Discourse"]
S2["ReactJS, NextJS, Stimulus, Express"]
S3["HTML, CSS, Bootstrap, Wordpress"]
end
subgraph MEDIA["SUPPORTING · IT and multimedia"]
direction TB
M1["Text, image, audio, video, animation"]
M2["Adobe suites, mobile photography"]
end
R --> CORE
R --> DEV
R --> MEDIA
Text version of this diagram
- Core · HCI and UX design: requirement gathering and research; wireframes, interaction and interface design; prototyping, journeys and user testing; Figma, Adobe XD, Sketch, Illustrator.
- Supporting · web and mobile development: Ruby on Rails, Jekyll, Discourse; ReactJS, NextJS, Stimulus, Express; HTML, CSS, Bootstrap, WordPress.
- Supporting · IT and multimedia: text, image, audio, video, animation; Adobe suites, mobile photography.