We design user journeys, interfaces and prototypes for websites, apps and business systems, with clear specifications for development.
Design concept · From sketch to interface
Follow one room-selection screen from its first structure to the finished design and developer handover. Open the demo to try the booking flow.
Make the route and recovery paths clear before drawing screens.
Deliverable: a reviewed journey map
01 / Understand
Keep room details together so guests can compare before choosing dates.
Garden Room
King bed · Garden view
Courtyard Room
King bed · Courtyard view
Rooms available?
No rooms → Change dates → Browse again
Need to change something? Return to room and date selection.
Set the order of information before choosing colours and imagery.
Deliverable: low-fidelity screen structure
Example screen · Sample dates
Apply typography, imagery and visual hierarchy to the same booking journey.
Deliverable: responsive visual designs
Example screen · Sample dates
Try choosing a room and dates, then review your stay.
Deliverable: a clickable prototype for review
Example screen · Sample dates
Interactive example · No booking or payment
Describe the component states and rules a developer needs to build.
Deliverable: components, states and implementation notes
Example screen · Sample dates
UX helps people complete a task by shaping the journey, information and decisions. UI makes those choices clear on screen. Accessibility and responsive behaviour overlap both.
Compare rooms
Garden Room
Choose dates
Stay dates
Review stay
Garden Room
Stay dates
Dates available?
Available
Try other dates
King bed · Garden view
These concept illustrations explain design decisions. They are not findings from user testing.
Concept explorations, not client projects. These are static mockups; names and data are illustrative.
Design concept 01
Boutique hospitality · Website & mobile booking
Design concept 02
Business operations · Dashboard & work orders
Design concept 03
Lifestyle membership · Mobile app
The final deliverables depend on the agreed project scope. Research and user testing are scoped separately.
Clarify user tasks, decisions, permissions and screen flows before visual design.
Turn agreed key journeys into an interactive prototype that the team can review.
Define layouts, content hierarchy and key states for the agreed screen sizes.
Provide annotated components, responsive rules and implementation notes for the development team.
Relevant work
Explore client projects related to this solution.
Showing related use cases page 1 of 2.
Our client is a traditional financial services company in Hong Kong. They needed a membership app with market news and exchange rates to keep closer contact with users.
This membership app gives each member a profile QR Code, facility reservations, event information and service updates. The cloud administration portal connects to the existing member database and lets the management team configure booking rules, publish activities and export attendance records.
This member-facing portal provides online reservations for clubhouse facilities such as tennis and pickleball courts, barbecue areas and football pitches. Members can review availability before booking, while staff control facility rules, monitor schedules and create reservations on a member’s behalf.
Bring an idea or an existing interface. We can help define the design scope and the next step.
