HotelView 365 is a mobile app for hotel managers that delivers real time revenue data in a concise, visual and impactful way.
HotelView were developing an iOS mobile app for hoteliers to track the key performance metrics of their properties. I worked with H8tch in Vancouver, to build an intuitive interface that presented large amounts of financial data in real-time and allowed users to quickly compare month-on-month and year-on-year trends.
H8tch put together a detailed requirements list that we then used to select key screens for further interaction and UI development. The core requirement was that the UI had to be legible, and able to presents large amounts of interactive financial data in a small amount of screen real-estate.
HotelView initially provided a relatively hi-fidelity wireframe that aligned with a more classic spreadsheet model. While this was great reference – especially for color hierarchy – we wanted to develop a more fresh, contemporary and legible interface.
I presented various color palette alternatives, with the client selecting the dark theme in order to allow color to play a more central role in highlighting key pieces of information. Given that this was a native iOS app, I recommended Apple's San Francisco font for its high legibility and native Apple feel.
Once the client approved the UI direction I focused on the interaction and UI design, presenting InVision wireframes (iPhone 8) for feedback and approval. It was important that users be able to dig deeper into any single financial number and then navigate easily between 'months' in order to compare trends. We used a card UI pattern to achieve this and paired it with clear visual affordances to indicate more content either side of the current card.
The final UI design uses color to call attention to the important metrics, allowing the user to digest a large amount of financial data quickly. I drew inspiration from financial apps to present positive and negative number and percentage changes in a way that financial readers are already familiar with. Upon approval, I handed off the design via Zeplin, and built out iPhone X wireframes for the development team's reference.
H8tch Innovations, Vancouver