UI/UX DESIGN

HotelView 365 iOS App

HotelView 365 is a mobile app for hotel managers that delivers real time revenue data in a concise, visual and impactful way.

Hotelview dark UI

Design Problem

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.

Requirements

Requirements list

Key screen requirements

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.

Client Wireframes

Supplied wireframes

The client supplied wireframes in the vein of a traditional spreadsheet

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.

Color palette options

I presented various color palette alternatives in combination with Apple's San Francisco font (given that it's an iOS native app).

UI Exploration

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.

Wireframes

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.

Hotelview final UI

The final UI uses color to call attention to the important metrics and visual affordances (right) to show deeper content.

Final Design

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.

TEAM

H8tch Innovations, Vancouver