Consulted design that created a material counterpart to engage a broader audience

Definition

An Android app that allows users to gain points when booking a flight or hotel.

Challenges

The iOS app needed a material counterpart. Designs were created and needed vetting from a material specialist.

Approach

I consulted with the senior designer at Rocketmiles on how to marry their brand with material design, consolidated inconsistencies, and designed new solutions.

Lessons Learned

I gained a deeper understanding of material design and sketch. I learned how to work more efficiently with a designer from another company.

Deliverables

Suggestion Comps / New Designs

All assets

Play Store Template

Sign In

The proposed sign in design was problematic because of its ties to the outdated holo android design, top-heavy two-toned header bar, and duplication of screen titles. 

The new design reflected new material design principles with one base header color and a different tab action approach to solve for a duplicated title.

 

Navigation

The proposed navigation had unnecessary icon treatment and a popover on a nav item.

The new design added more personality to the app. It prioritizes the logged in state of the user because navigation items change based on the state. It also uses the expand arrow for more contact options instead of adding another z-index to the drawer.

Select a room

The proposed design used a slightly different browsing metaphor, which became problematic when considering variable content on variable sized devices.

The new design allowed for any sized content to fit in each card without relying on a full screen view. 

Headers

Headers were identified early as a problem area, because they tended to jump around in the first version. A confirmation screen showed a header below a photo, and a hotel detail screen showed a header above a photo.

A large feature of the Rocketmiles is the map view, which ultimately dictated this decision. In the map view, the header / action bar sat below the map, and upon swipe became fixed to the top of the screen. We opted to carry this pattern throughout the app for consistency, and edit reach on large devices.

Scrolling Patterns

After we made static layout decisions like 'information should always beneath photos, carousels, and maps,' we were able to play with interaction patterns with the developers to make sure header bars and text we're lining up the way we envisioned.

Wrap

To wrap up the project, I sliced out all asset for the developers, and created a template for their senior designer to populate with the final screens and upload to the Play Store in multiple sizes.

Back Home