Designing the Progressive native application pt2


When looking at building something new on the web, I try to never dismiss that which I’m replacing.
That thing, however out-of-date or hard to use, was a product of decisions that had to be made before it elevated. Knowing & understanding those going into the new project gives me insight on where I may be headed.
Was it built using tables because that was the style of the day, or because that what’s the legacy system (that you still have) marks up the page with? You may not know.
So, one of the first things I did when starting on the native app project was take a ton of screenshots, from both platforms, and try to talk to the people from the previous project team. Try and find out what drove the thinking on the last release and the hurdles they faced.
It always helps get me, the current stakeholders, and the other members of the project team on the same page.

Log in

This was one of the first screens we tackled.
Old Progressive app welcome screen on Android
Getting into your policy on our app involved a welcome screen (above), then clicking on ‘Manage Your Policy’, entering your credentials, or in the case of Android, touching a ‘Log In’ button which took you out of the app and to our “mobile” servicing site.
This was in part due to a decision for the original app to be more acquisition/marketing focused. Now things shifted and we wanted the focus on getting customers to their information quickly.
2014-05-08 01.55.38 1
I worked very closely with Jessica & Dan who were the Design Team. Based on my wireframes and sketches they came up with a design that was in line with our brand, didn’t stray far from the new iOS 7 & Holo guidelines, and still made the whole experience uncluttered.
New Progressive app log in screen on Android

  • Cleaner
  • User credentials moved forefront
  • Using sizing to hint at more if they scrolled
  • More inline with current iOS & Android native builds
  • Increased the touch targets
  • Made sure main targets worked for both left & right-handed users
  • Employed existing patterns

One thing that we created custom was the ‘Save User ID’ checkbox. On iOS I’d opted for a toggle, but when iOS7 hit, it changed to a huge green control that didn’t fit at all.
When we tested this existing users liked it a lot, and, new users felt comfortable as it followed existing patterns they were used to on their devices.
By knowing what’s come before enabled us to have conversations with the stakeholders about what should be kept, and let us move or ditch sections & links that weren’t really needed at that point of the experience. Making the designing of this a lot easier.