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 introduced the concept and design direction for the multi-select pin feature. I evaluated existing single-selection workflows, created prototypes, and coordinated with cross-functional 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
The design process focused on expanding the single-location selection to support multi-location use in collaboration with product teams. Multiple design strategies were developed and refined to address key use cases, with reviews and validation from cross-functional teams to ensure they met user needs and project goals.
Design Process Breakdown
a. Collaborating with Product Teams to Define Development Plans
Worked closely with product teams to analyze the current single-location select implementation and discuss how it could be expanded or modified for multi-location selection.
b. Exploration and Competitive Analysis
Explored various multi-select methods by conducting competitive analysis to identify effective strategies for introducing new functionality to the app.
c. Iteration and Introduction of Multiple Design Solutions
Created wireframes and high-fidelity prototypes, presenting different design versions to address various use case scenarios.
d. Final Review and Validation
Conducted a comprehensive design and structure review with product teams and validated the new feature with project teams to ensure its effectiveness.
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 manually add, edit, or delete pins via the slide-up screen. The coordinates on the screen are synchronized with the map for instant updates.
Outcome & Conclusion
We successfully launched the multi-select location feature, which was well-received by clients. While the feature turned out to be more complex than initially expected, we carefully addressed various use cases and quickly resolved minor bugs post-release. Our clients were pleased with the new feature, confident it will greatly improve efficiency.
