01 / 07
Context
A company that runs diving and spa services needed guests to complete waivers, consents and medical forms before each activity. There were about 15 forms across two business lines, and the company had no defined design system.
Level 3: Guest forms
UI Designer and front-end. Guest forms and an admin console for a company that needs waivers and medical forms signed before every activity.
Confidential
The company name, brand and data are changed here. The process and the decisions are real.
02 / 07
Problem
The forms needed a consistent look and a build the developers could ship quickly. The team also needed a back office to follow check-ins and control which forms each hotel requires, and that was not part of the original brief.
Scope
I proposed the back office redesign myself, outside the original scope.
03 / 07
My role
I designed the forms and back office in Figma for desktop and mobile, and interviewed key users. I also turned my designs into front-end code and reviewed my peers' code so the build stayed true to Figma. About five months.
Team
I worked with Laravel developers and key users, and joined the developers' code reviews.
04 / 07
Process
I proposed a design system on Tailwind, based on Flowbite, instead of designing tokens and components from scratch. Interviews with key users shaped the screens, and reviews with the developers kept the designs close to what the code could do.
A decision
I based the components on Flowbite, a Tailwind library, because the developers needed screens quickly.
05 / 07
Solution
Guest forms that work on desktop and phone, and a back office with a check-in dashboard, a console for every submitted form, settings for which forms each hotel needs, user permissions and a QR generator for staff.
Check-in dashboard
Totals, a breakdown by activity and a list of the latest check-ins, filtered by date and country.
06 / 07
Results
Adoption was good. After launch, the only change anyone requested was extra fields on one form, and it was easy to add. I do not have measured numbers yet.
A result
Users now have less friction filling the forms, and staff reported a better flow with them.
07 / 07
What I learned
Coding the front-end and reviewing my peers' code showed me what developers need from a handoff. Now I design with how things get built in mind, and I collaborate better with developers.