Select Page

Micro-interaction Redesign:

December 2019 – January 2020

 While taking the course on Prototyping Intearctive Systems by Prof. Massimo Zancanaro at the University of Trento, we were asked to do a project using an existing application.

The goal of the project was to redesign micro-interactions in an existing application to improve the UX.

My Role(s):

– Individual project 

Tools & Methods Used:

– Axure 

Critique of  overall macro-design decisions:

– The app is built around the “search” functionality as users are looking for places to stay  (persistent search)

– The search is mainly catered for accommodation

– There is a car rental option as well, but it is not designed in the same UI as the app.

– There are a lot of other actions and features that are all “additional” and put in one big “More” page.

– Main navigation is done through the bottom navigation bar

– The top bar contains certain isolated actions/pages (Notifications, Booking Assistant) [each page has a unique top bar]

– Navigation is mostly direct, but difficult to distinguish between navigation and action sometimes as both are used interchangeably.

Main Problems:


  • No consistent navigation
  • Unnecessary navigation (one step too many)


  • Actions designed as navigational items     (with back buttons)
  • Lack of signifiers, feedback and  feedforwards when filling forms or accessing user data


  • Extra features are not organized to match any coherent mental model

1. Selecting Rooms

Macro-design decision: To give users individual views of rooms at hotels.  (to see facilities, amenities, prices etc)

Micro-interaction: A button to “Select Rooms” visible throughout the page

Issues: Both the price in the top and the “See your options” button lead to the same pages – no coherent navigation and all space is filled.


Orginal design

Redesign to scroll through rooms

Redesign to show details in pop-up 

Proposed micro-design changes:

– Remove the extra pricing button – and add those details into the “See your options” button and make it swipe so a new page does not need to be opened

– Add a scrollable “Room” menu that opens a tab that can be closed within the same page – no need to navigate to another page.


2. Adding a Credit Card

The user has to fill in a form with credit card details to add it to their account for payments.

Micro-interaction: Typing in details into the form. User taps and starts entering in details.

Rules: User must enter a valid credit card.

Error states possible: No error checking done as the user is typing, so the user only finds out about the error once they press the “Add Card” button


Orginal design

Proposed micro-design changes:

– Add in format of user input into the text fields to avoid error earlier

– Add in an error checking indicator that will ensure the number if valid.

– Add in a feedback when the output is done and checked to be valid.

3. “More” Information Organisation

Macro-design decision: To put all other less frequently used features and actions into one page as a list

Micro-interaction: Clicking each individual item from list that is not organised in any form

Rules: User must know what they are trying to find here

Issues: Difficult to make sense of the ordering of this list as some items are also accessible in other places ( Lists, Car Rental, Reviews)

Orginal design

Redesigned with LATCH – categorisation by grouping similar items

Redesigned with LATCH – heirarchy and abstraction 

Proposed micro-design changes:

– Organise the information using LATCH principles

– Categorise list so it’s easier to find items

– Categorise and abstract by importance and hierarchy 

4. App Feedback Details

Macro-design decision: Ask users to give feedback on the app

Micro-interaction: Navigate to another page to select a different option by tapping on the field

Issues: Navigational excise when there does not need to be to select a choice.

Orginal design

Redesigned with pop-up selector in-page

Redesigned with buttons to select options directly

Proposed micro-design changes:

– Create a popup selector to select between the three choices instead of a navigational excise.

– Create a button selection in the same page

Redesigned with differentiating tabs

Redesigned with radio button selection

Proposed changes:

– Add in two tabs to help users decide whether they want to search by destination or a specific hotel/property name

– Add in radio buttons that are defaulted for destination, but also have a property search available specially for users who want to stay in specific hotels.

6. All Bookings

Macro-design: A dedicated page for bookings is directly accessible from the bottom navigation. To see any previous bookings/trips – the user must navigate further down

Micro-interaction: Click “All Previous Trips” to see all previous bookings

Issues: It’s an unnecessary step, causes navigational excise of one extra page.

Proposed changes:

 An alternative way to avoid this can be to include this information in the same page with clear distinction between future and past bookings to reduce the navigational excise.

Original design

Redesigned to reduce navigational excise

Original design

Redesigned with reviews carousel

7. Reading Reviews

Macro-design decision: To put some reviews in full to see but also give the option of reading all the reviews for the user and so they can see the overall score.

Micro-interaction: Users see an average rating and then read some reviews or click to navigate to page to see all the reviews.

Issues: There’s multiple ways to navigate to the same place on the same page and the same information is repeated. (Knossos palace’s effect)

Proposed micro-design changes:

– Use space effectively by letting users go through reviews in a carousel fashion over there rather than repeat the same information again and again.

8. Profile Page – Edit

Macro-design decision: Let users edit their profile

Micro-interaction: Edit text button on in top bar (right)

Rules: Users need to edit profile information

Issues: There are no signifiers here as to what exactly will be edited in what format as the profile page does not contain any standard profile details. Also even though “Edit” is indicating an action, it ends up being a navigational excise (due to the back arrow)

Proposed micro-design changes:

– Add personal information tab to signify that these can be edited later

– Add a view profile button where things can be individually edited


Orginal design

Redesigned with personalisation information tab

9. Profile Page – Edit Details

Macro-design decision: Let users edit their profile

Micro-interaction: Edit individual details by changing them in the form

Rules: Users must tap into each field to edit

Issues: There is no feedback given about whether the details are being saved or not. There is also no feedforward as to what would be edited specifically.


Orginal design

Redesigned with feedback icon

Redesigned with Save button

Proposed micro-design changes:

– Add a tiny feedback icon to show what text field has been saved.

– Add a Save Text action button on top bar to allow user to save before leaving.

10. App Feedback

Macro-design decision: Ask users to give feedback on the app

Micro-interaction: Rate the app through icons

Issues: There is no signifier that there are additional questions beyond the first rating question.

Proposed micro-design changes:

-Show other questions or show one question at a time but add a signifier like “ 1 of 5”, and update as user answers – providing all feedback, feedforward and signifiers.

-Put entire feedback survey in step by step form – the UI takes you to the next question sequentially ( would be good to use concepts of loops

Original design

Redesigned with sequential feedback

Original design

Redesigned with integrated search

11. Car Rental Search

Macro-design decision has been to put the “Car Rental” option at the same hierarchy as “Accommodation”

The car rental button takes you to an entirely different page – one that has not yet been built for the mobile app – the user is not expecting to see a different UI.

The user clicks/taps on “Car Rental”

Trigger: User wants to look at car rental services, clicks the button

Rules: User must know where and for how long they want to get a car

Proposed change:

Instead of opening new page, customising the current UI to search for car rentals.