01 / RMHC
Making a growing service ecosystem feel simpler.
A website redesign for Ronald McDonald House Charities Thailand, bringing donation, Run for Kids, volunteering, account and commerce experiences into a clearer, more consistent system.
Context
The existing experience needed a more current interface and stronger consistency while still respecting global brand direction and the expectations of Thai users.
My role
I worked across page structure, user flows, responsive UI and interaction details, collaborating with project and development teams as requirements evolved.
Key challenge
Unifying multiple journeys—including donation, event registration and volunteering—without making the experience feel fragmented or overly complex.
Get Involved
Five ways to help.
One clear starting point.
The client wanted five dedicated pages—Donate, Volunteer, Online Shop, Run for Kids and Corporate Partner—under the main Get Involved menu. I designed this landing page as a shared starting point for those routes.
A family photograph and short introduction to the mission lead into five illustrated choices, each with a clear name and a direct link to its own page.
The same page at two sizes: a shared story and set of actions, with a layout suited to each screen.
Make every way to contribute easy to find.
On desktop, the five routes sit in a compact grid. On mobile, they become a single vertical list, keeping the illustration, label and arrow together for each choice.
- A direct route to donation
- A dedicated donation button sits beside the mobile menu, giving visitors a way to contribute directly from the header.
- Give each route a clear identity
- Distinct illustrations sit alongside explicit Thai labels for donation, volunteering, the shop, Run for Kids and corporate partnerships.
- Adapt the supporting navigation
- The desktop footer presents a full sitemap. The mobile design groups those links into expandable sections to keep the page manageable.
Donate
Make guest donation the default.
The client initially requested a login popup before donation. With most donors making a one-off contribution after following a shared link, I was concerned that mandatory sign-in would interrupt the journey and lead people to leave before donating.
I proposed making guest donation the main path, with optional sign-in as a shortcut for existing account holders. The form remains accessible without an account, while returning donors can choose to sign in before filling it out.
- Choose an amount
- Enter donor details
- Review
- Confirmation
Keep attention on the donation.
- Offer the shortcut before the work begins
- I placed the “Already have an account?” prompt before the amount selector. Offering sign-in after someone has started entering details would make the shortcut less useful.
- Give the donation action visual priority
- I used an outlined sign-in button and kept the primary red action for “Donate now.” Account access remains available without competing with the purpose of the form.
- Make the guest route explicit inside the popup
- I added “Continue donating without signing in” to the login popup. Donors have a named action that returns them to the donation flow, alongside the close icon.
See review and confirmation · 2 mobile screens
Run for Kids
Keep the runners, race kits and payment connected.
Race registration involves more than a name and a payment. The screens support registering for yourself or a friend, reviewing multiple runners, choosing race and shirt options, and deciding how to receive the race kit.
On desktop, delivery details sit beside a summary of the runners, collection or delivery choice and total. On mobile, the same information follows a single vertical sequence. The progress indicator keeps the four main stages visible.
- Runner details
- Review runners
- Race-kit delivery
- Payment
Follow registration through to confirmation · 4 mobile screens
Volunteer
Explain the activity before asking people to join.
The activity detail page puts the registration status, schedule, responsibilities and purpose of the activity ahead of the application form. Visitors can understand what they are signing up for before entering their details.
The same content order carries through to mobile. The listing introduces the available activities, while a dedicated completion screen acknowledges the submitted registration.
- Find an activity
- Read the details
- Apply
- Confirmation
See activity discovery and confirmation · 2 mobile screens
My Account
Give every completed action a place to return to.
The account area brings profile information, shipping details, purchases, race registrations and donation history into one navigation system. It connects the separate service journeys after the initial transaction.
Donation records pair the date and amount with a receipt action. A desktop sidebar becomes navigation above the content on mobile, keeping the same destinations available in a narrower layout.
Explore the account area · 3 mobile screens
Wireframe → Hi-Fi
Show how the structure develops into the interface.
Two comparisons connect the early page structure to the detailed UI: a multi-step registration flow and a content-led volunteer application. Open any preview to inspect the complete screen.
Run for Kids: a more focused registration journey
The wireframe split registration into six stages. I simplified the Hi-Fi design to four main steps—runner details, review, delivery address and payment—so participants would not have to work through more stages than necessary. A dedicated review step still gives them a chance to check their information before moving on.
Volunteer: from content structure to a complete activity page
The wireframe establishes the activity information and application areas. The Hi-Fi design fills that structure with the activity photograph, registration status, schedule and supporting detail before the form.
Selected design exports. These comparisons show the design structure and interface; no usability-test results or performance metrics are claimed.
Design system
One visual language across every journey.
I organized the RMHC interface around shared colour, Thai and English typography, responsive grids, components, icons and page patterns. These foundations connect the donation, event and account experiences while keeping each page consistent with the brand.
Explore the full design system