Avvo Mobile


Challenge

Google Analytics was reporting that 33% of our site traffic was coming from mobile devices. The user experience on mobile devices needed to be improved. This would have a direct impact on improving our Q&A rate i.e: capture consumers asking questions via mobile devices and attorneys answering on the go. The goal was to quickly create a low fidelity version of our desktop experience. Signed-in experiences for consumers and attorneys was part of the MVP.
 

Solution

First Version: Being one of the first projects at Avvo, my task was to understand our users and define their expectations when they encountered Avvo on their mobile devices. I went through my typical phases of sketching and visual brainstorming. I would interview co-workers and get their thoughts on paper. I took a first stab at what the mobile site would offer based on the responses and my initial research. The team would later brainstorm and formalize the scope and direction of the project. We quickly moved into the prototyping stages with the a dedicated developer coding my designs. We conducted usability tests both for consumers and attorneys with a fully functional prototype. The team came together one last time to prioritize the bugs/new features based on usability results.

Subsequent versions: We changed the process as the goals were to optimize the site for a better and uniform experience across most mobile devices. I spent more time on the digital side in fireworks and prototyping in html+css+jquery for nailing the interactions. If you’re familiar with the problems of the mobile world, then it may not come as a surprise when i say mobile browsers SUCK big time! The rapid mutations of android screens, a gazillion versions of browsers and apple’s retinafication were quickly degrading Avvo’s mobile site experience. With the dev’s on board, we put in place a few technological parameters which would ensure our site remained unharmed with hardware advances. To name a few:

  1. Un-avoidable images would be retina-friendly.
  2. Restricted the use of images. Created our own icon font thereby rendering all visual elements as type.
  3. Streamlined interactions that work both for Android and iOS.
  4. Optimized the grid with fluid html that flows for various devices widths.
  5. Created the mobile styleguide that eliminates css one-off’s and enables quick and painless style upgrades.

 

Results

  • v1.0 was shipped in Sept 2011.
  • v2.0 was shipped in Apr 2012.
  • v2.1 removed health from the site and was shipped in Nov 2012.
  • v3.0 is in the works.

Platforms Supported: iOS + Android.
Browsers: Safari + Chrome.