Smart HQ Pro Management

Smart HQ Pro Management is an application that allows property owners, hotel managers, hotel guests, laundromat operators, and other appliance owners to easily control their appliances. They can control whole GE appliances features in their buildings at once such as control of temperature, on/off, and financial reports, etc.

ROLE
Sole Product Designer
(UX/UI in both Desktop and Mobile,
Design System)
TEAM
1 Product Designer,
4 Software Developers,
1 Project Manager
TIMELINE
8 months
(Dec 2023~)

Introduction

What is Smart HQ Management?

Smart HQ Pro Management is a cloud-driven enterprise software solution that enables property managers, hotel operators, and laundromat owners using GE Appliances to efficiently manage and maintain all their appliances across various locations in one platform.

Background

Why were we starting this project?

A surge in Smart HQ Pro contracts and rapid business expansion revealed usability issues and the need for enhanced functionality. This prompted a full redesign to address these challenges and ensure a seamless user experience.

Business Goal

Streamlining for Scalability and Usability

Redesign with a scalable approach to improve usability for business customers, offering streamlined and efficient solutions that maximize convenience and are simple to use.

Situation

Challenges Hindering Growth and Usability

However, the service faced significant challenges with feature expansion and user experience.

Approach

Optimizing UX Flow and Design Consistency

We decided to reorganize the UX flow to prioritize user needs, establish a consistent design system across mobile and desktop, and restructure the Information Architecture to highlight the most frequently used and newly added functionalities.

Impact

Improved Efficiency and Usability by Establishing a Cohesive Design System

These changes resulted in a system that is not only user-friendly but also more efficient for developers, driving both user and business success.

Scalable Design System
Simplified feature additions, reduced development time.

Improved IA and UI/UX
Easier navigation, faster access to desired features.

Unified Cross-Platform Design
Seamless transitions, increased desktop usage.

Design System of Smart HQ Management

Launched 2.0 Update with Improved User Satisfaction

We launched a redesigned app on iOS, Android, and the web (via Google Chrome). User feedback highlighted significant improvements in usability and satisfaction compared to the previous version.

App Store and Google Play with User Review

Process

How we are doing this project?

This project has great impacts to more contract renewals and sign-ups with major companies after the redesign. But of course, there were challenges. We don't have UX researcher or time for A/B testing, but I tried to find core issues and improved them.

Target Users

All kinds of Owners, Managers, and Operators

The SmartHQ Pro Management service supports two main areas: Management for property owners, hotel managers, and guests; and Commercial Laundry for laundromat operators and other appliance owners.

Research

What are user needs to use this?

First, to figure out which features we needed to prioritize, I focused on why users were actually using this product. I researched their needs and worked closely with the product manager and team to gather insights. Then, we analyzed the data to identify key patterns.

Three key user needs

(1) There are lots of appliances in their buildings, so they want to easily manage and control all appliances in one place. (2) To keep their business running smoothly, they need to track real-time status and monitor operational data to prevent issues. (3) To reduce costs, they need to quickly respond appliance issues anytime, anywhere.These became our top priorities moving forward.

Problem Definition

What are problems of current design?

For understanding their needs, we analyzed how they use this service, examined the features based on Heuristic Evaluation, and simulated user scenarios. Using an affinity diagram, we grouped feedback and identified the core problems.

After research, I reframed it using Jobs to Be Done (JTBD) framework.

As a user of Smart HQ Management. When managing GE appliances in my property,

I want to efficiently operate my property or hotel by quickly resolving appliance issues to minimize downtime, provide convenience to hotel guests, and smoothly allocate tasks to staff, ensuring safe and seamless operations.

So I can use Smart HQ Management to monitor multiple appliances across various properties at once, easily control them remotely, and diagnose and resolve issues even from a distance.

But the current design doesn't work very well.

Core Problem 1.

Unclear hierarchy and grouping made it hard for users to anticipate the impact of their actions, disrupting flow and usability.

Core Problem 2.

Poor data visualization, with overcrowded information and cluttered filters, made it hard for users to read graphs, distinguish values, and understand appliance status quickly.

Core Problem 3.

A lack of consistent design across platforms confused users searching for features, while also extending design and development time, slowing service expansion.

Goals

How might we make it easier for users to quickly find the features they need by organizing appliance controls and property management, while providing a seamless and intuitive experience across mobile and desktop?

Hypothesis

The more consistent the cross-platform experiences are,
the easier it is for users to find what they need, and
the faster development enables the product to expand more efficiently.

Sub-Hypothesis

Clear Hierarchy and Grouping
Restructuring the feature flow to prioritize key content for different user types will make it easier to categorize future features and help users understand and use them faster.

Improved Data Visualization
A design system will simplify feature development, speed up user feedback integration, and improve the product, increasing user satisfaction.

Consistent Multi-Platform Design
A unified design system across desktop and mobile, aligned with GE Smart HQ Applications, will reduce cognitive load, help users quickly learn and use features, and strengthen brand loyalty through familiar interactions.

Success Metrics

Increase
Contract Rate

Positive
User Feedback

Shortened
Development Cycles

Strategy

Set the design directions to meet hypothesis

Design Explorations

1. UX Design - Information Architecture

Prioritized user needs to reflect workflows and interfaces

For workflows improvement, I focused on what information users needed to see first and reorganized the user flow based on priority. Then, I discussed priority of user needs and flow changes with product managers and team to refine the experience.

2. Consistent Multi-Platform Design

Analyzed user goals both in desktop and mobile

Both on desktop and mobile, we found that users had specific goals depending on the situation and device they were using. These clear and different goals helped us focus on the right features and design each platform to fit user needs.

Desktop and Mobile ver.

3. Design System

Established a Smart HQ Management Design System

Developed an entire design system tailored for Management functionalities, including color codes, fonts, icons, and component styles.

Desktop and Mobile ver.

3. UI Design Structuring

Grouped informations and components in the interface

Based on the design system, I focused on creating an intuitive hierarchy by grouping related information and components. Instead of a scattered like zigzag flow, you can now see clear, stacked layers, making navigation smoother and making users find information faster.

Iterations

Enhanced Data-Informed Design for Consistency and Clarity

Incorporated feedback from team members and users to resolve navigation issues, reduce excessive colors, and improve overall usability. Ensured consistency in button positions, page titles, and scroll areas for seamless user orientation.

Iteration Process

Continual improvements were made to achieve the following:

Unified Button Placement and Spacing

Standardized button positions and spacing across all pages to ensure consistency and improve usability.

Visual Status Indicators

Replaced text-heavy information with color-coded statuses and icons for faster recognition of key states and appliances.

Optimized Desktop Layout

Maintained a consistent UI with mobile while leveraging the wider screen to minimize navigation depth and provide an at-a-glance view of related functions.

Intuitive Navigation

Bread crumbs and a search bar simplify navigation, helping users quickly find their location and move between sections in a complex, feature-heavy system.

Minimized Depth for Better Usability

Frequent screen transitions and excessive depth can cause user fatigue. To address this, I minimized depth by utilizing collapsible buttons, allowing users to access information more efficiently without overwhelming navigation.

Enhanced Clarity with Visual Cues

Transformed stacked text lists into icon-based visuals with color-coded distinctions, enabling users to grasp information at a glance without relying on extensive reading.

Organized Features with Collapsible Cards

Grouped similar functions together and organized them into collapsible card formats for easier distinction and navigation.

Final Design

Comprehensive Design System for Usability and Cohesion

We developed a complete design system and created new components tailored to each feature, enhancing brand consistency across the entire product. This approach enabled users to easily identify functions and manage appliances at a glance.

Reorganize the user flows and interfaces with visual cues and consistent design to clarify hierarchy and improve navigation.

Easily Distinguish Hierarchies Across Multiple Locations

Enhancing Usability with Better Navigation and Consistent UI

Enhancing Usability with Better Navigation and Consistent UI

To simplify complex flows and make access faster, I moved detailed functions out of hidden controls and placed them at the same level. Now, similar features are grouped with the same position and font size, making them easier to spot.

Enhance data readability with clear spacing, key metric highlights, and logically positioned filters.

Easily Distinguish Hierarchies Across Multiple Locations

Efficient Data Management with Drawer Interaction

Color-Coded Visual Cues for Quick Recognition

Develop a unified design system to streamline development, reduce costs, and enable faster updates.

Unified Design System for Both Mobile and Desktop

We received positive impact on AI Assistant in Smart HQ Pro after introducing voice interaction.

Mobile Optimization in the Unified Design System

We received positive impact on AI Assistant in Smart HQ Pro after introducing voice interaction.

Impact

Increased Contract Renewals with Major Partners

After we launched the redesigned, we saw a clear increase in contract and renewal rates from big companies.

Increased User Satisfaction and Development Speed

After implementing the design system, we received positive usability feedback, saw a higher contract signing rate after business contacts, significantly reduced the gap between mobile and desktop usage, and improved development speed by more than 2x through component reuse.

Ensured Consistency across 800+ Screens of both Mobile and Desktop

Analyzed the strengths and weaknesses of both mobile and desktop platforms, designing similar yet platform-optimized experiences to enhance usability for each.

Confidential Detail UX/UI Pages

Achieved consistency with GE Design Alignment

Maintained consistency with the existing GE app design system while introducing new components specific to Management needs.

GE Appliances' Smart HQ Home and Pro Series

Industry Recognition and Exposure at Major Conferences

Our product was featured at both the Heritage Properties, Inc. Conference and the NAA Apartmentalize Conference in Philadelphia. Presenting at these high-profile industry events allowed us to introduce the product to a wide audience of property management professionals, fostering interest and receiving valuable feedback directly from key stakeholders in the field. This exposure enhanced the product's credibility and highlighted its potential for broad application across the property management industry.

Key Takeaways

Importance of Data-Driven Design

I realized that restructuring the UX based on user data, rather than assumptions, helps avoid costly changes during development.

The Power of Cross-Team Collaboration

This project showed me how invaluable it is to collaborate with different teams. Partnering with developers, product managers, and fellow designers helped us overcome the unique challenges of creating a seamless experience across platforms. This taught me that bringing together different perspectives leads to more cohesive, user-friendly designs and stronger solutions overall.

Effective Design of Across Platforms

Designing for both desktop and mobile taught me the importance of creating adaptable yet consistent experiences. Understanding the unique challenges of each platform allowed me to develop user-friendly designs that feel seamless, no matter the device.

Previous

⇽ AI Voice Interaction of Home App

Next

Smart Service App of Appliances ⇾