UX Design for
Anthem Mobile App
Project Detail
Type: UX Design for mobile App and connected experience
Year: 2020 to 2021
Product: A smart home shower system that has advanced shower control and spa experience. It can be controlled by mobile app, remote panel, and 3rd party voice assistant.
Background
Anthem™ is the high-end remote control designed specifically for managing the Statement™ series of shower products.
The Statement™ series boasts an extensive collection of over 400 fixtures, encompassing various types of faucets, body spray outlets, and shower heads. Additionally, it offers a range of spa accessories that provide luxurious features such as steam, lighting, and music integration.
The mobile app not only includes all the functions available on the Anthem™ remote but also provides advanced smart home benefits. With the mobile app, users can enjoy enhanced control and automation features that seamlessly integrate their shower experience with other smart devices in their home.
Responsibility
I am responsible for :
Designing intuitive UX flows for various use cases, ensuring a seamless user experience throughout the product.
Conducting thorough reviews of usability testing to gather valuable insights and make data-driven design decisions.
Collaborating with consultants to manage the UI design process, ensuring consistency and quality across the interface.
Overseeing the implementation of the design, working closely with the development team to ensure the design vision is effectively translated into the final product.
One Ring to Rule Them All
During the preparation phase, I identified three challenges in pursuit of our goal to create a series of products that are consistent in design:
The first challenge is to design a user interface that can effectively accommodate the wide range of functions involved in managing over 400 fixtures.
The second challenge is to create a streamlined onboarding experience that is clear and easy to follow, particularly for DIY users who may be less familiar with the technology.
The third challenge is to develop a UX design that is consistent with previous generations of shower products while also incorporating new features and functionality.
UX Design Highlights
Clean up the library
The initial design challenge involves integrating 400 distinct fixtures into our mobile app. Throughout the company's history, our icon library has accumulated numerous design. As depicted in the image, these icons encompass representations of the (A) fixture's physical form, (B) water flow patterns, (C) specific functions, and even (D) the spa experience they embody.
I have outlined three key strategies to reduce the size of our icon library and modernize the app design:
Unifying icons with similar meanings but different design styles. For example, in the image (1), I consolidated four different icons representing hand-shower fixtures into a single, cohesive icon.
Simplifying icons with similar meanings. In the image (2), I combined icons representing dual and triple outlets for body-spray fixtures into one icon that represents multiple outlets.
Avoiding icons for complex functions. Instead of relying solely on icons, as shown in the image (3), I have opted to create separate app pages dedicated to describing the spa experience, ensuring a more comprehensive understanding for users.
Streamline Onboarding Experience
The installation of a customized Statement™ shower system poses significant challenges, and successfully setting up with the accompanying app is equally demanding. Thus, the onboarding process plays a crucial role in enhancing the overall user experience.
Here is an overview of the feature map of Anthem™ app.
The most challenging aspect of the onboarding walkthrough was the “Assigning Fixtures” step. This required users to associate corresponding fixture icons with the water outlets, enabling them to control specific fixtures like the shower-head or foot spray.
I explored two design directions to address this challenge:
Concept A: Guided Fixture Assignment
This design aimed to guide users through each outlet individually, ensuring they completed the assignment for every fixture. However, during usability testing, it became evident that users found this approach overwhelming and were prone to losing track of their progress.
Concept B: Overview of Fixture Assignment
The second design provided users with an overview page displaying all the outlets and their assigned fixtures. This approach simplified the assignment process by enabling users to quickly identify which outlets were yet to be assigned.
The Verdict: Concept B
Based on the usability testing results, it was clear that users preferred having an overview rather than a straight-lined guidance approach. To enhance the understanding of this process, we incorporated interactive guidance when users first accessed the fixture assignment page. This additional feature helped users navigate the process more effectively.
Bring in New Features
In the previous version of the app, the Spa features were located within the secondary function drawer and represented by icons without clear descriptions, leaving users uncertain about the actions they would trigger upon tapping. To address this issue and bring clarity to the users, the new design focuses on providing essential information, such as the duration of the spa, the affected body areas, and the benefits of the spa experience. Additionally, the design incorporates a visual indicator to display the running status, enabling better interaction.
In the updated design, the device home page now features an "experience" section where users can access and initiate the spa experience. Tapping on each image within this section will lead users to detailed pages with information about the fixtures used in the spa experience and the corresponding water temperature.
The initial design, known as Design A, underwent prototyping and user testing. While the product protocol and cloud service were not fully established at that stage, we utilized a prototype app along with a manual control shower system to simulate the final product experience. During this testing phase, a significant finding emerged: users expressed a desire to not only understand where the water comes out but also which specific body areas would be affected.
Based on the insights gained from user testing, two key changes were implemented in the final product, as represented by Design B. Firstly, the layout of the experience cards was modified to maintain consistency with previous design from other regions. Secondly, a body silhouette was added to the detail page to address the users' feedback. This visual element serves as a helpful representation of the spa treatment area and further enhances the overall user experience.
By incorporating these improvements, the redesigned app not only offers increased clarity and information to users but also aligns with the expectations and preferences revealed during the testing phase.
Learnings
Best design on mobile app may not be the best design for smart home devices that require users’ attentions on multiple touchpoints. A good design needs to reduce users’ mental loads by providing clear information structure and easy guidance.
Testing early with working prototypes can reduce the development time and ensure the usability.