Extended Stay America | Design Challenges

Problem/Definition: the business decided to add a secondary and already developed application (PERKS) into the new app, this happened on sprint 8.
  • Total number of sprints: 9
  • ESA main goal: for user to book rooms, make reservations
  • PERKS app, main goal: for users to find coupons, discount within the brand and affiliates.
  • Expected delivery date: June 15th, 2019
  • The already developed PERKS app, presented a very poor and complicated navigation system and didn’t match any of the already existing features within the upcoming booking app (please download the old PERKS app from the store if you like to see the navigation system).
  • There is a time and resources constraint, design and development is now 12 sprints, not 9.
  • The last minor issue, was related on supporting iPhone 5, with a 326 ppi (pixels per inch), although the original requirements from the business was NOT to support these devices, we encounter some minor issues specifically related to the bottom navigation bar, please read below.
Please refer to labels below: ENMAR 46, 234, 235, 237, 238 and 239.

The major obstacle is related to the PERKS navigation system, with a poor design, usability issues, redundancies, users journey path moving into too many unpredictable/inorganic directions and not aligned with customer needs.
Our first approach and solution was to reduce the amount of navigation choices in order to maintain clarity and focus on what people need to accomplish. The second conclusion and concern was to make this an enjoyable experience with a more attractive and clean graphics than the current app. With an already established style guide, patterns and behaviors, we were able to implement a new and clean filtering option(s) for the PERKS section, in a more heuristic approach (booking first), with this in mind, we left the coupons area as a second part of the business, we also found important data that leads for the conclusion that the PERKS section only represents 2% of the business profits, and because of this, the “myExtendedPerks” was left inside the “more” button/menu from within the bottom navigation bar. In addition to this, we implemented a third CTA style, that derives from the famous Amazon Orange (Hex: #ff9900), this orange is also, the complementary value from the ESA green, we added a  darker gradient on the bottom area of  the CTA’s in order to stay within the ADA compliance and 5:1 contrast ratio and increase readability.

Lastly, as far as all related issues to the iPhone 5, we managed to work around with the developers and create a Java Script that detects the device(s) screen size and present a different set of media queries , adapting and transforming the font-size and letter spacing in order to accommodate for different situations, some other similar approaches were introduce for the top title/labels with a max number of characters set at 24, and left and right padding of 20px/grid, changing from 16px font-size; letter-spacing:2px > to 13px; letter-spacing 0px. Please refer to SCREEN LAYOUT graphics at the bottom of the screen to see all details.

The team, designer and developers, were able to complete the entire app within the 12 sprints, the business and stakeholders were very please with the final outcome.