Nestaway Smart Filter Motion
Problem statement
Nestaway, which is a property rental app, uses 3 main filters of Beds, Rooms and House. The same UI space, when used for sub-filter options for each of the main filters, can get confusing for users looking for different options.
The idea was to synchronise the filter option with categories and let the motion do the indication work in a more pleasing yet functional way.
Design
Initial brainstorming included figuring out how the hierarchical flow would work.
Some initial rough sketches were also done to figure out the 3D perspective and placement of assets.
Icons were designed around geometric forms to ensure clarity and consistency across different filters and also align better for 2D to 3D translation.
.jpg)
.jpg)
The design for the elements was directly inspired by Nestaway's brand language and in-app iconography.
Motion Approach
.jpg)
.jpg)
.jpg)
.jpg)
Progressive disclosure was employed to reveal additional filters in a structured manner. Each asset was designed to be an extension of the previous one.
3d space movement: The core motion behaviour creates a 3d space where one filter smoothly transforms into the next rather than abruptly switching.
Expansion and collapse motion:
New selection feels like a continuation rather than a separate screen, which helps showcase the buildup of sequential information.
Interaction System
Elastic motion: Elastic curves were used to have one part react to the motion of the other.
The interaction system has two sections. The main filters tab (consisting of Beds, Rooms and House) and sub-filters for each tab option. The whole logic system was designed to work interconnectedly with the icon animations.
Triggers were set on each filter of the main tab (consisting of Beds, Rooms and House).
Number logic was used in each level of housing animations.
For sub-filters, Boolean logic system was apt to switch between each of the sub-filters (Boys or Girls; Furnished or Unfurnished).
Final Prototype
The interconnectivity of the entire logic system was important to make sure that the interactive system of choosing filters was seamless and iterative across the board for any number of selection permutations.