ApartmentGuide.com - Mobile Map

Redefining the Mapping Experience

ApartmentGuide.com having recently gone through a visual refresh on the desktop and mobile the only missing piece was adding a mapping experience to the mobile web version to compliment the rest of the experiences across the board. 

OBJECTIVE: Create a mobile mapping experience that users can easily discover and search for a new home as well as explore the potential neighborhood in more depth.

ROLE: Product DESIGNER

PHASE 1: DISCOVERY

Things to keep in mind:

  • What is the appropriate zoom level?
  • How to handle multiple listings i.e clustering
  • Filtering
  • Being able to switch between the listings detail page and map without losing context

Competitor Analysis:

I used websites like pttrns.com and mobile-patterns.com to do a quick analysis just to get an idea of how maps are being used in a mobile context.

I then proceeded to visit competitor app/mobile websites to get an indepth look and get a feel for UI controls as well as the overall experience.

Findings:

  • Map UI controls make or break the experience
  • Clustering isn’t an easy task
  • Maps can get overwhelming very quickly
  • Performance when zooming and loading pins
  • Removing everything that doesn't add value

PHASE 2: Sketches & User Flow

 

PHASE 3: WIREFRAMEs & PROTOTYPE

 

I had the opportunity to use Principle and give life to the design and play a bit with adding some subtle animations and motion.


APARTMENTGUIDE.COM - Points of Interest Icons

Apartment-Guide-Points-of-Interest