02
Sarea City
How might we design a smart street lighting management platform with optimized usability, easy maintenance, and adaptability to various use cases?
My Contribution
UX Design / Wireframing / Design System / Visual Design
Project Type
Product Design @ Spark Technologies Inc.
Team
2 Frontend Developer, 2 Backend Developer, 1 Project Manager, 1 Product Owner
Project Goal:
Optimizing Street Light Management in Smart Cities
Spark Technologies is a company that provides customized IoT services for businesses or organizations. The smart street light management solution is one of their main service, which allows users to control street lights remotely, monitor the device status of each streetlight, and set lighting schedules.
User Archetype:
Street Light Management Staff
Our users were street light management staff in the city government or large institutions like universities. They need to set up and maintain street lights in specific areas to ensure people’s safety.
However, the existing street light management solutions were hard to market as products due to unintuitive and inconsistent UX patterns.
The smart street light management system was developed during the company’s early stages, and due to time and resource constraints, there was room for improvement in the UX of the digital platform.
Additionally, since the previous platforms were one-off solutions built for different clients, the UX patterns across them were not consistent, making it hard to market the solution as a product for potential clients.
Design Overview:
Sarea City: a digital platform optimized for intuitive IoT device management in smart cities
Background:
Real-Time Monitoring with Interactive Map Pins
Sarea City is a modular street lighting management platform that integrates with the hardware system to offer users an intuitive device management experience. The three main design challenges were clear device status display, intuitive IoT interactions, and a scalable design system for future customization.
In this project, I optimized the overall user experience, designed the entire platform from 0 to 1, and established a consistent design system for the platform to simplify maintenance tasks for the R&D team.
Challenge 01
How might we display IoT device statuses clearly and informatively?
Users need to monitor real-time device status and check the detailed information of each street light on the platform. Therefore, it is important to display these information clearly and informatively.
In Sarea City, each map pin represent the location of a street light. When users click on a map pin, the information module would slide in to display the detail of the street light and the equipped devices.
Problem:
The Existing Methods of Displaying Information Need Optimization
1. The Old Map Pins are Hard to Identify
In the existing platform, we used different colors on rings and circles to define the different statuses of each smart pole. However, as the number of installed IoT devices increased, the combination of colors on the map pins became too complicated and hard to identify.
2. The Old Information Modules are Space-Consuming
While editing data, the pop-up window covers the map so that users cannot see the pins.
Design Solution:
New Map Pins and Information Module Design that Provides Clearer Information
1. New Shape and Color
We replaced the original circular icon with a pin-shaped one to enhance user accuracy in identifying the specific location of streetlight poles through pinpointing. Based on the needs of streetlight maintenance staff, we prioritized the luminaire controller statuses above other IoT devices, utilizing varied colors for map pins to represent different statuses of the luminaire controllers. For other IoT devices, such as electrical switch box controllers, their statuses are indicated by a small dot positioned in the top-right corner of the respective icons.
2. Providing Real-time Feedback of Device Status to Reduced Unnecessary Actions
We incorporated five distinct colors to indicate the status of devices on the pole: on, off, offline, alert, or under repair. If there are no devices on the pole, the pin remains white.
Notably, there’s a brief delay between users controlling the lights through the platform and the luminaire controller receiving the signal to adjust the light. This delay might lead users to believe they haven’t successfully controlled the lights, prompting unnecessary repeated commands.
To resolve this issue, we introduced a unique “switching” status that appears during the time gap after users control the lights through the platform. To convey this status more clearly, I combined the colors representing “on” and “off” to indicate the “switching” status better.
3. Optimized Layout that Provides Flexibility in Information Display
The new information module is fixed on one side of the map so that users can edit the pole’s information and check the map pins simultaneously. This design provides more flexibility of displaying more location-related information on the map.
Challenge 02
How might we design an intuitive way to manage hardware that aligns with hardware logic?
Background:
Setting Multiple Lighting Schedules for Various Scenarios
To provide greater flexibility in lighting management, we enabled users to set multiple lighting schedules for each streetlight based on different needs. For example, users can set a regular lighting schedule that operates daily. Also, they can create “special schedules” for specific events, like, streetlights in shopping areas might stay brighter later into the night on New Year’s Eve to accommodate celebrators.
Problem:
The Misalignment of User Interface and Hardware Operation Led to Confusion in Schedule Setting
In the existing platform, the lighting schedule was displayed as a box, enhancing the user’s mental model of “scheduling” as setting a time slot. This differs from how the luminaire controllers actually operate. Since we aimed to apply multiple special scheduling to luminaire controllers to increase flexibility in lighting control, the existing display (box model) might cause confusion for users.
Design Solution:
Aligning Interaction Design with Hardware Logic for Clear and Accurate Scheduling
1. Setting “Timings” instead of “Time Slots”
To resolve this, we shifted from a time slot approach to a timing-based system, where users set specific times for lights to turn on or off. This way, users can clearly understand how the street light will behave.
2. Displaying Scheduling Details in Timing Lists instead of Time Slots
When users check the details of every schedule applied to each street light for troubleshooting, they would see a list of timings instead of time slots. This allowed users’ mental model to align with hardware logic seamlessly, providing clarity and reducing scheduling errors.
Challenge 03
How might we build a design system that ensures consistency and scalability across current and future IoT products?
Design Strategy:
Simplicity for Future Adaptations
Sarea City was the first product of Sarea, the product series that contained Spark Technologies’ IoT management platforms for different vertical domains.
Anticipating the need for a consistent design system across future products, I built the new design system with a flat and simple design style. This not only matched the logos but also ensured flexibility for upcoming adaptations, streamlining maintenance for the R&D team and providing clear instructions for future updates.
Design Solution:
Consistent Design System that Applies to Various Purposes
1. Simplifying the Color Scheme of each Product to Reduce the Effort to Keep Consistency across Products
I used grass green as the primary color to match the logo. For the secondary color, I chose light yellowish orange, which not only created a visual hierarchy through varying color brightness but also provided sufficient contrast with the primary colors of most other products in Sarea product series. This strategic selection simplifies the application of the design system to other IoT platforms, reducing the effort required to keep consistency across products.
2. Dark Mode
While dark mode wasn’t a primary focus for this project, we ensured the design aligns with the overall product series’ standards by creating a dark mode color palette that directly references the default palette. Adjustments were made to saturation and color contrast to optimize readability and maintain clear differentiation between elements.
3. UI Components in Different States
In Sarea City and future IoT products, UI components come in various states, from basic elements like buttons and input fields to specialized ones like map pins. To help frontend developers understand and use these components in different scenarios more efficiently, I created an exhaustive list of all their possible states and statuses.
Impact
Improved usability and future design efficiency
Impact 01:
Enhancing usability by bridging user behavior and hardware operation
We anticipated that by providing real-time feedback and aligning user expectations with hardware operations would increase users’ confidence in the system and enhance the overall usability.
Impact 02:
Increasing efficiency in design & development in future IoT solutions with design system
The UX design patterns and design system I created for this project were extensively applied across multiple custom IoT service projects. The design system and Figma component library significantly streamlined the design and frontend development processes in the following projects, enhancing overall product development efficiency.