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
- Being able to switch between the listings detail page and map without losing context
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.
- 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.