Redesigned No-Code Tools to Build Smart City Solutions
Redesigned No-Code Tools to Build Smart City Solutions
Redesigned No-Code Tools to Build Smart City Solutions
TerraGo Technologies has launched a redesigned interface for the Config Editor, a no-code solution for building smart city solutions on web and mobile. This update enhances usability and streamlines workflows, making it easier for TerraGo employees to deliver products quickly and incorporate client-requested features with ease.
As the UI/UX Design Lead, I analyzed existing functionality and pain points to identify areas for improvement. I iterated on multiple design solutions to enhance usability and efficiency, collaborating closely with cross-functional teams to ensure smooth implementation and an intuitive 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
Sunil Karthick, Software Developer
Ramachandran, Software Developer
Fred Wolke, Lead Software QA
TIMELINE
Aug 2023 - Mar 2024
PLATFORMS
Web
Project Goal
The goal of this project was to transform Config Editor from a developer-focused interface into a more user-friendly and accessible tool for all TerraGo employees. The redesigned platform simplifies the configuration of smart city mobile and web applications, enabling faster product updates, making it easier to implement customer-requested feature updates, and reducing training time for new users.
Before
After
Process
Research
Regular team meetings with TerraGo employees, including project managers, product teams, and configurators, were held to discuss pain points and identify improvements in the user interface, features, workflows, and overall usability. Through this collaboration, I identified workflow bottlenecks, such as complex navigation and unintuitive UI elements, and tested the platform to map the end-to-end user journey, documenting areas where users hesitated, struggled, or took unnecessary steps to complete tasks.
Insights Analysis
Optimized Screen Space Utilization
63.4% of users value interfaces that make efficient use of screen real estate, reducing clutter and ensuring important content and actions are easily accessible without overwhelming the user.
Clear Content Hierarchy
54.2% of users prefer a structured layout that organizes content logically, making it easier to navigate and understand.
Data Structure Visualization & Organization
49.3% of users value clear, organized representations of data, improving their ability to locate and manage records efficiently.
Enhance Discoverability
58.7% of users seek features that are easy to find, with well-placed icons, labels, tooltips, colors, badges, and buttons that streamline interaction and make key actions more noticeable.
Design Flow
Focused on enhancing the Config Editor 2.0 by refining the user interface, optimizing navigation, and improving overall usability. This included analyzing user needs, iterating on design concepts, and aligning the platform structure to streamline processes. Close collaboration with cross-functional teams ensured the final design met both user needs and business goals.
Design Overview
The design update focuses on enhancing the overall user experience by improving navigation, optimizing layout organization, and simplifying interaction. Key changes aim to make it easier for users to manage their tasks and data while maintaining a clean, intuitive interface. These updates help simplify workflows and improve accessibility, making the platform easier and more efficient to use.
Improve navigation to create a more seamless and user-friendly experience.
Refine layout organization for better data access and visibility.
Incorporate intuitive design elements to enhance feature discoverability.
Simplify configuration processes to reduce repetitive tasks and improve efficiency.
Improve Navigation and Organization
Restructuring the navigation infrastructure improves the flow and usability, making it easier for users to transition between sections. Related items are grouped logically, simplifying configuration and reducing unnecessary clicks for a more streamlined user experience. The design also prioritizes the workspace, helping users stay focused on their tasks without distractions. Additionally, the interface is optimized for both laptops and desktop monitors, eliminating the need for extra displays or large screens, fitting seamlessly into typical office setups.
Navigation
Default stacked view with the map on top and an expandable data table below.
Settings General Page
New side-by-side view for map records and the data table.
Enhanced User Recognition & Interaction
Various design elements were introduced to improve the discoverability of features, making it easier for users to locate, update, or remove options. These adjustments focus on streamlining user interaction and ensuring key functions are clearly visible. The interface now includes visual cues like badges, graphical elements, and color-coding, along with intuitive layouts that enhance both usability and accessibility.
Form
Displaying input fields next to their corresponding form palettes streamlines the configuration process, making it easier for users to interact with the interface. Additionally, badges are used to highlight and help users quickly recognize the applied options.
Symbol Legend
A clear, icon-based legend is incorporated to help users quickly identify and understand the map icons in use, improving clarity and making the interface more intuitive
Mapper
Color coding is applied to visually differentiate types of mappers, making it easier for users to add, edit, and manage them. This method helps improve visual understanding and simplifies the interaction with various mappers.
Reducing Repetitive Configuration Tasks
To simplify the configuration process, a new option was introduced that allows users to link mobile and web configurations using the Link & Unlink buttons. This eliminates the need for users to re-enter or reconfigure settings separately for each platform. For those who need distinct setups, the "Unlink Web & Mobile" option provides the flexibility to customize each configuration.
Unlink Web & Mobile
Enter different configurations for web and mobile independently.
Link Web & Mobile
Enter the same configuration for both web and mobile together.
Outcome & Conclusion
The release of Config Editor 2.0 has been successfully completed, providing TerraGo employees with a more efficient and user-friendly experience. The transition was seamless, leading to improved data management, streamlined workflows, and greater accessibility.
Impact and Results
95%
User Adoption Rate
Reflecting strong engagement with the updated system
35%
Task Completion Efficiency
Reducing the time required to configure and manage data
71%
Optimized Training Duration
Accelerating the learning curve and enhancing efficiency.
