The Gen 5 Streetlights management application introduced a new feature that allows users to quickly and efficiently select multiple locations on a map to add assets through workflows.
As UI/UX Design Lead, I led the design and implementation of the new multi-select pin feature by evaluating existing single-selection UI workflows, creating prototypes, and coordinating with project, development, and QA teams to enhance the overall user experience.
ROLE
UI/UX Design Lead
TEAM
Chip Hathaway, VP Product
Jon Willis, Director of Product Development
Kyle Goranson, Senior Software Developer
Mark Walsh, Full-Stack Developer
Ramachandran, Software Developer
Sunil Karthick, Software Developer
Fred Wolke, Lead Software QA
TIMELINE
Sep 2022 - Jan 2023
PLATFORMS
iOS, Android
Project Goal
To achieve the goal, the following requirements have been outlined for the new multi-location selection feature
Requirement 1
Retain the current map and include features for tapping, dropping, and capturing locations.
Requirement 2
Retain the single-select location UI and workflows, ensuring consistency with the new multi-select UI to avoid user confusion.
Requirement 3
Allow users to create, change, and delete locations smoothly.
Process
Please Include Design Process Lorem Lipsum
Design Process Breakdown
a. Collaborating with Project Managers and Analyzing Data
Met with project managers to analyze and understand the data. Categorized, grouped, and ungrouped data while establishing a clear hierarchy based on its importance.
b. Restructuring Navigation and Information Architecture
Redesigned the navigation system and reorganized the information architecture to improve accessibility and clarity.
c. Exploring and Implementing Data Visualizations
Researched and selected appropriate graph and table types to best represent the data.
d. Final Review and Validation
Conducted a comprehensive design and structure review with project managers and Tableau analysts to ensure accuracy and usability.
Design Overview
The updated interface introduces a more intuitive, map-driven approach with enhanced interactivity. Users can now seamlessly interact with coordinates and locations through a gesture-enabled map, improving the overall experience. Several key changes have been made to optimize workflows and ease of use.
Location Pin Creation
Users can create location pins directly on the map. Each location pin is assigned a sequential number, and the count of selected pins is displayed on the top bar of the slide-up screen.
Dynamic Location Modifications
Users can easily change a map location pin by pressing and dragging the pin on the map.
Deleting Location Pins
Users can delete pins on the map. Tapping the trash button activates delete mode, where selected pins turn red, and a delete button appears at the bottom for confirmation. Once confirmed, the selected pins are removed.
Manual Location Pin Entry and Adjustments
Users can delete pins on the map or in the coordinates screen. In delete mode, selected pins turn red, and a delete button appears at the bottom for confirmation. Once confirmed, both the selected pin and its coordinates are removed.
Outcome & Conclusion
We successfully launched the multi-select location feature, which was well-received by clients. We addressed various use cases and quickly resolved minor bugs post-release. Design enhancements, such as improved visual cues, further refined the user experience. This feature significantly boosts efficiency for both field crews and office admin users.
Impact and Results
42%
Faster asset input with multi-location selection.
Reflecting strong engagement with the updated system
15%
Improvement in accuracy through enhanced visual cues and indicators.
Reducing the time required to configure and manage data
25%
increase in operational efficiency for field and office teams.
Accelerating the learning curve and enhancing efficiency.
