top of page

Maps Connect

User experience design of a web-based online platform for Apple Maps.

Maps Connect: Welcome

Project Overview

About

An Apple Maps product aims providing a customer management system for business/organizations to connect with user on data/feedbacks collection, service improvement, and business management in a straightforward and efficient way through the usage of Apple Maps.

Project Scope

1. Optimized user experience by improving/extending product features.
2. Initialized mobile version of the product.

Duration

3/2017 - 3/2018

My Role

Primary UX Designer

Process

1. Cross functional collaboration
2. Interaction design
3. Design Documentation

Collaborated with

Product Manager: Grant Ritchie
Frontend Developer: Bharat Nagwani
Web Engineer: Alex Perematko

Maps Connect: List

Design Process

Artboard.png

User

Analysis

Artboard Copy 3.png

Requirement

Defining

Artboard Copy 2.png

User Experience

Design

Artboard Copy.png

Product

Launch

Maps Connect: List

User Analysis

1. About user

The product will be used by the technicians of the companies/organizations who registered on Maps Connect. They are professional with different tools.

2. Use Cases

Mike is the technician of a food chain who's using Maps Connect to manage clients feedback and improve services and user experience of their customers.

  • He would add new location/business when new store opens, and update settings when the existing stores upgraded their services

  • He needed to track down to a specific business location to check on/change team member information and responsibilities

3. Pain Points

Mike provided some valuable feedback based on his experience using the product. We also interviewed some other clients and summarized the pain points they have when using it:

  • First time user was frustrated with the account setting process

  • User got lost at the interface of multiple pop-up modules after several clicks

  • User found it's hard to get the accurate items when they're multi selecting in the drop down menu

4. Solutions

After analyzing the specific feedbacks, I found that they share some common issues, e.g. lack of centralized navigation to show clear information hierarchy, and a consistent UI design.  The solutions should focus on the big picture instead of single feature deficiency. After analyzing with my manager, I provided some detailed strategic UI solutions:

  • Create a visual system applied to the entire website

  • Centralize all the data points to create a main navigation

  • Re-design the user flow of the complex operation

Maps Connect: Projects

Requirement Defining

Clear information navigation

  • A side navigation on every page that user will always be on track of where they are and how to complete the next task

Consistent UI

  • Consistent user experience for similar tasks. e.g. User will go through the same process when they register for the first time and add new business information.

  • Visualize the instructions for the register process; create process tracker with level of completion 

  • New user flow of complex operations. e.g. The feature of multiple selection can be broke down into several simple tasks

  • A button system will be applied as part of the visual system

  • Transitions and responses after user clicking

Maps Connect: Projects

User Experience Design • Web

Account Wizard
Create New

The floating create-new wizard module allows clients to create new items anytime without losing the current progress.

It shows clearly where the user is with the index of process at the top. And in specific steps the information is visualized with simple and straightforward instructions.

The button system gives suggested action to help user moving forward.

Multi-hierarchy 
Selection

Multi-hierarchy enables clients to select the target items with a clearly layered structure.

With the expended space user can have a better view of what options they have and what they've chosen. Item actions including adding and deleting is also clearly communicated with icons attached with the options.

Multi-Module

Loading

The multi-module loading experience gives the clients a birds eye view of how far they’ve been going for information retrieving, while avoid the confusion of the info structure.

The transition as the response to clicking one layer further gives instructional hint so that user can easily track their paths.

Maps Connect: Features

User Experience Design • Web

Map View

Map view is helping the clients to visualize the overall location information and form a better understanding in terms of geographic strategy for their properties.

The segment buttons at the top of global navigation give full flexibility to toggle between normal list view and map view.

Task List

The task list with filters helps the clients easily filtering tasks by variety of categories/purposes with a clean and intuitive interface.

Instead of hiding inside a side bar, the full page task list is a better solution with a clear focus and enough operation space.

Access Volume

Control

The volume control module was customized for the specific need of user access based on the customer data and feature requirement.

Maps Connect: Features

User Experience Design • Mobile

Account Wizard
Create New on Mobile

The mobile web version of create-new form was trying to give a clear idea of the task progress and respond to every action the client makes during the process.

The challenge of creating mobile web pages was that it has to be consistent with the web page design style by adopting the same elements like buttons and page layouts, and falls into the design standard of mobile apple.com pages.

In the mobile wizard of create-new session, each step can be expended or collapsed during the process of filling information. The icons on the title of the steps also keep track for the user of their progress of tasks.

Profile User Flow

on Mobile

The action items are re-designed for space-wise consideration.

The functions of checking progress, edit information, checking alerts, and even scrolling are re-designed following the principle of leaving as much space as possible for user's main focus.

The editing module deign was sharing the same layout with create-new wizard to reduce extra interaction type and help user be more focus on the task itself.

Maps Connect: Features

Product Launch

Team Collaboration

Communication with Engineers

Inspired by Google Material Design process, I created UI specs using a consistent system of measurement to communicate efficiently with engineer team. 

style guide 1.png

Library of UI Elements

During the iteration process, re-creating every UI elements is a waste of time. Therefore I created the content library including all the existing UI elements and updated with new launches to avoid inconsistency and increase efficiency.

Screen Shot 2019-05-02 at 12.06_edited.png

Content Tracker

The tracker is aiming to work as a reference to the old and news UIs. It shows the entire UI evolution over time, also provides insight of how the next build can be improved and fit into the system.

Screen Shot 2019-05-02 at 12_edited.png
Maps Connect: Features

Impact

Contributed to early launch for a quarter. The number of user increased significantly with the launch of mobile version. Saved 60% of time in the design process including wireframing, prototyping and collaboration.

Maps Connect: Image
bottom of page