Context
Keep the trip in view.
The destination, dates and guest count remain visible while the person compares stays. Editing them returns to the same trip form.
02 / UI/UX & front-end / Self-initiated concept / 2026
Roamwise.
Less friction.
More room to explore.
A travel-product concept that connects destination search, room choice and price review in one usable front-end journey.
Actual screenshots of the coded prototype. Editorial photographs provide atmosphere; hotel names, room details and prices are fictional.
The question
Can the next step
stay clear?
A traveller starts with dates and a destination, then needs to compare a stay, choose enough space and understand the price.
The concept brings those decisions into one connected flow. Search details remain visible, room capacity affects the available options and the total follows the chosen room through to review. The prototype uses in-memory sample data so that the interaction itself can be explored.
01 / Discovery & comparison
A place to imagine.
Details to compare.
Photography gives the stay an atmosphere. A repeatable card structure keeps its name, sample amenities and nightly price in predictable places. Filters and sorting change the actual sample results.
Capacity
Make room choice meaningful.
A room that cannot fit the selected guest count is disabled. Changing an eligible room updates the nightly price and trip total.
Cost
Explain the whole amount.
The selected rate, number of nights and illustrative service fee appear together before sample completion.
02 / Stay detail & review
Make the decision
with its context intact.
A working photo gallery gives the page depth. Room information and price review remain part of the same flow rather than separate static screen designs.
03 / What the prototype handles
The journey includes
the moments between screens.
The coded implementation includes validation, loading and recovery states. These are functional demonstrations, not measured user-research outcomes.
When the input needs attention.
Invalid or missing dates are explained beside the field. Searches are limited to a defined sample range of nights and guests.
When there is nothing to show.
Kyoto demonstrates an empty destination result. Combined filters can produce no matches, with a clear action to reset them.
When a search fails.
A visible demo control triggers a search error. Retry returns to the sample results without asking for the trip again.
04 / Actual visual iteration
From illustrative scenes
to a more convincing product.
The earlier prototype used repeated vector buildings. The revised version uses credited editorial photography, a gallery and a tighter screen composition. Both versions are preserved in the source pack.
The implementation
A concept
you can actually try.
- Responsive screens Search, results, detail & review
- Sample interactions Filters, gallery, room choice & totals
- Recovery states Invalid, empty, loading & error
- Source implementation HTML, CSS & JavaScript
- Photography handoff 5 credited Unsplash images
Project scope
Self-initiated front-end concept. Hotel and room information, amenities and prices are fictional sample data. Stock photographs are visual references, not verified images of those fictional properties. There is no live inventory, reservation, payment or account system. Browser implementation checks have been performed; usability research, conversion improvement and commercial results are not claimed. The next design evidence should come from observing people attempting defined tasks.
Next project / Identity & packagingNira Tea.
Have a project in mind?
Tell us about your brand, packaging or digital product.
Discuss your brief ↗