DropTop
Projects
User Interface
DropTop
In 2018, the city of Cape Town asked its residents to drastically adapt their water consumption in the face of the imminent “Day Zero”, an event that would see the city’s tap run dry. Hotels in the city also joined the collective effort and adopted new measures to reduce the water consumption of their establishments. Inspired by an extreme situation expected to become usual in the future for many cities in arid climates, the team imagined how the hotel industry would react to this new normal.
DropTop is a facility upgrade and renovation app for iOS that helps 5-star hotels in cities at risk of draught to reduce their water consumption by suggesting improvements in a goal driven way. The app uses a five-drop rating system allowing hotels to communicate the water efficiency of their facilities through a simple graphical model.
In the app, the hotel’s director is presented with possible improvements to the hotel’s water facilities. As improvements get added to a to-do list, the app displays the rating that will be attained after completion, helping the user to set a renovations goal.
The app was created over two weeks during which the concept was taken through several iterations, allowing the team to test and refine the concept in the process while increasing fidelity at every step. First, the concept was defined and tested with paper prototyping. Sketch and the Human Interface Guidelines for iOS were then used to refine the mechanics of the app until an efficient and elegant solution could be reached. After the high fidelity wireframes were tested using Invision, the app was redesigned and branded at the UI level to add to the apps esthetics. Finally, Principles was used to bring the app to life using animations and custom transitions in a high fidelity prototype.
DropTop Interactions
![](https://www.ubaldodesiato.com/wp-content/uploads/2020/04/OneSentence.jpg)
![](https://www.ubaldodesiato.com/wp-content/uploads/2020/04/IMG_3076web.jpg)
![](https://www.ubaldodesiato.com/wp-content/uploads/2020/04/wireframes.jpg)
![](https://www.ubaldodesiato.com/wp-content/uploads/2020/04/Animated_Mockup.gif)