Square

Redesigning a signature kitchen UI

UX/UI, Motion, Appliance

Square has been a premium kitchen brand in China for the past 30 years. Today, the taste of Chinese consumer has become more sophisticated with more competitors join to serve the market. How could Square build its next-generation product to keep its dominance in the coming years?

* Name and photo in this case study have been changed to protect confidentiality.

Challenge

Square is a premium kitchen appliance brand in China known for its embedded range hood and dishwasher. The product series has brought the company more than ten billion yuan in revenue over the years.

The company always takes pride in its innovation capability, and this time they wanted to take it further - to redesign the UI system of the two flagship products which hadn’ t been touched for a decade.

My Role

I worked as an interaction lead to redesign the logic and visual of the legacy UI. I ensured it connects well to product design and validating through user insights.

Square has been serving China's kitchen for over 30 years

Approach

Design hand in hand with product designer

The new UI system is only successful if it blended well with the product design. Throughout the project, we work hand in hand with the product designers to set goals, define priorities, broke down the exiting UI elements, studied the workflow, and explore visual directions for the redesign.

In parallel, we also built full-size prototypes to run tests with target consumers to learn about their aspirations and needs. The insights helped us to quickly refine and evaluate the proposal with the client. We finally hosted a workshop at Square's headquarters, where we showed the final design to the leadership team and start the conversation on how to push the two new flagship products to the market.

Kickoff

Picking up the context on the go

Since we joined the team halfway with a tight timeline, we started with a quick review of what had been done and where the gaps were . We met the two client teams respectively to clarify their needs and assumptions about the product and consumer while sitting down with the product team to learn about their philosophy, and the newly developed features and design language. In the process, we also learned some hardware limitations that would l eventually impact the UI design. The review taught us a few key points that helped us to focus our efforts down the line.

Creating a signature UI that does not disrupt its legacy in the market

Making the interface easy enough for all family members to use the products

Making the visual language timeless and scalable to apply across the portfolio

Design

Reconstructing the UI flow

The new UI language was not just the look, but also how it could work smarter to serve its users. Therefore, we first studied the current hood and dishwasher UI to inform ourselves of how the two products worked. Then we broke down all the functions and status, laying out the information architecture and workflow to explore how a user might interact with the product in different contexts. This process helped us to uncover the superfluous parts and missing links of the system, providing opportunities to create a much simpler yet more delightful user flow.

Exploring the signature visual idendity

With the new structure in hand, we now had a foundation to build the new visual language upon. In order to be more generative, we first listed all the visual elements of the two products that we could possibly play with, including the tone of the copy, font, color, icon, layout, motion, sound, and even tactility.

In parallel, we extracted keywords from the product design principle, and expanded the existing mood board to provide broader visual inspiration for both the product and interaction team. This dual effort helped us to quickly explore multiple possibilities without losing sight of our goal , generating three distinct UI proposals for both products which were ready to be tested in the field.

Testing

Building prototyping to learn from the consumers

As the time was short, we were eager to see how the consumer might resonate with the new UI proposals. We spent 2 days building real size, hi-fidelity prototypes with ambient sound to mimic the kitchen scenario. Then we recruited 5 participants based on Square’s consumer profile who cooked regularly, owned a high-end range hood and dishwasher, and were key decision makers on kitchen appliances. Then we recruited 5 participants based on Square’s consumer profile: regular cooks, owners of a high end range hood and dishwasher and key decision makers in purchasing kitchen appliances.

We asked about their ideal brand and the experience of using the hood and dishwasher. We then invited them to try out the prototype while thinking out loud to tell us what was going on in their mind. This result not only helped us to clarify some questions on brand perception and usability, but also inspired the team to think more extensively by uncovering some hidden scenarios that we had not considered , for example , looking from the living room to check if the dishwasher had finished.

People love autosave settings, so they don’t need to readjust every time.

People want to know the status from afar so they can better control while multitasking.

Automation is cool, but it should be easy to understand and undo anytime.

Feasibility check with the client

Based on the above findings, we quickly refined the UI prototypes and invited the core members from the range hood and dishwasher design team to the workshops. In the session, we walked them through the three UI proposals and played back the insights from the consumer research. The prototypes helped the Square team to fully grasp the design intent while running a quick assessment of its market value, cost, and feasibility. This enabled us to prioritize the proposals for both range hood and dishwasher, and have a clear view of how to refine the design and push it forward.

Crystallizing the chosen UI direction

While the workshop gave us a clear alignment on which direction to go in, the final UI design remained unresolved since the clients were pushing for a much more iconic design and many technical challenges remained to be settled. To address the issue, we went back to our drawing board, conducting runs of brainstorming sessions with the product team on how to evolve the chosen UI directions.

We came up with over 50 ideas in one day, built them in real size and put them side by side to mimic how an idea might stand out to a consumer in the store . In the meantime, we collaborated with a motion designer to explore how the UI might perform in key functions like switching on/off, button click, operating etc. These efforts helped us to nail down the final solution with the core team and get ready to bring the solutions to the board room.

“The horizontal pattern feels like a beautiful calligraphy stroke. It signifies the oneness of the sea and sky.”

Ma Qun

CEO of Square

Outcome

The Square leadership team were delighted with the design of the two new products. They considered the UI to elegantly blend with the product design and connect well with the legacy of its predecessor. The CEO was especially drawn to the rangehood UI, as it symbolized his Chinese ideal of harmony and peace. The company aimed to launch the two new flagship products by the early of 2021.

Final design

We hosted our final workshop at Square’s headquarters in Ningbo, China, where we met the leaderships from all functions. We brought in real size prototypes for both rangehood and dishwasher, played back consumer insights, and walked them through the new UI structure and visual language. By experiencing the prototype, the leadership members could easily imagine how the new UI might stand out from the shelf and support their consumers’ daily tasks. The positive feedback quickly moved the conversation forward to the launch timeline and how we could work with the core team to bring the two products to life.

  • 01. Simplifed workflow
  • 02. Signature Patterns
  • 03. Delightful Interaction

01

Simplifed workflow

Reduce clutter steps

Most user don’t change the settings often when using rangehood and dishwaser. We skip the setup steps by remebering the latest settings while keeping the option open so user can adjust later.

Highlight the Smartness

Square have amzing cleaning technology, but the comfusing presentation make users shy away from it. We combine smart features into a ‘auto cleaning’ mode, with staus display so they know what’s happening and have better control of it.

02

Signature Patterns

The legacy 2.0

The wing liked UI pattern has been a classic symbol for the Foteil’s product. To build on the legacy, we took the key visual elements and blend them into a more unified shape so the controls are more visiible and clean to the users.

Sync with product

To have a harmonious look, we desing the visual pattern out of the product details - components outline, corners and edges. We put the UI in relevant spot and use shape-mimicking icon to signify the usage.

03

Delightful Interaction

The grand opening

A premium product goes beyond functions to elevate user’s emotion and character through usage. We applied delightful yet subtle animation in the trasitions of the key moments, providing guidiance while added taste to their everyday life

Reflection

Involve other disciplines in the process to uncover blind spots and brings unexpected solutions to the problem.

Designing in real size and scenario is essential. It grounds everyone in the reality.

Identify ownership and dependency upfront reduce unnecessary communication efforts later on.

Similar case studies

Prototyping the Future of Healthcare

Driving a 100-year-old brand into the mobility future