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
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
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
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.
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.
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.
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.
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.
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.