CASE STUDY

Moen App Re-Design

Re-Design
Mobile
Design Systems
Animation

UX Cabin helped Moen combine three mobile apps into one, create a scalable design and animation system, and established user testing methods to improve all designs going forward.

Platform

  • iOS
  • Android

Deliverables

  • Mobile app
  • Design system
  • Animations
  • User Research
  • User Testing

Industry

  • Smart Home/IOT
  • Consumer Mobile app

Timeline

  • Start: June 2019
  • End: August 2022

Summary

UX Cabin helped Moen streamline several apps into one and update their visual design language.

UX Cabin also helped Moen win a silver IDSA award for one of the products in their Moen Smart Water Network platform!

Background

Moen is one of the largest producers of faucets and water hardware in the world. In addition to their hardware business they recently expanded into the Smart Home market. One of their initiatives for growing this line of business was to acquire multiple companies to integrate into their existing app.

Objectives

• Combine the existing app with the two acquired apps
• Update to a modern design language
• Create a design system to simplify design & unify development
• Find ways to add user delight

Brain Colby
I’ve worked with a fair amount of agencies… and this is Hands down one of the best experiences I’ve ever had
Watch Video
Player
Copy embed

<div class="callouts"><div class="card_wapper_client"><div class="bg_wapper"><img src="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/64342a8d1c99610edbcc6364_Client%3DBrian%20Colby.png" loading="lazy" sizes="(max-width: 479px) 231.1875px, 308.25px" srcset="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/64342a8d1c99610edbcc6364_Client%3DBrian%20Colby-p-500.png 500w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/64342a8d1c99610edbcc6364_Client%3DBrian%20Colby.png 525w" alt="" class="img_clinet_wapper-2"><div class="fg_wapper"></div><div class="content_wapper"><div class="padding_wapper-2"><div><div class="text_content_wapper-2">We stood up a fully functional design system in a couple of months. Because of that <strong class="blod_wapper">we were able to get products out the door, period. Incredible ROI for us.</strong></div><div class="div-block-143"><div class="button_card_wapper"><a href="#" id="w-node-_1ad2cbd8-605d-db82-85e9-2d58a07ae9cf-fbcf96be" class="button-lg greedin w-inline-block w-lightbox" aria-label="open lightbox" aria-haspopup="dialog"><div>Watch Video</div><script type="application/json" class="w-json">{
 "items": [
   {
     "url": "https://www.loom.com/share/627d2d6ca42e4ea5826216307971b400&autoplay=1",
     "originalUrl": "https://www.loom.com/share/627d2d6ca42e4ea5826216307971b400&autoplay=1",
     "width": 940,
     "height": 705,
     "thumbnailUrl": "https://cdn.loom.com/sessions/thumbnails/627d2d6ca42e4ea5826216307971b400-00001.gif",
     "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.loom.com%2Fembed%2F627d2d6ca42e4ea5826216307971b400&display_name=Loom&url=https%3A%2F%2Fwww.loom.com%2Fshare%2F627d2d6ca42e4ea5826216307971b400&image=https%3A%2F%2Fcdn.loom.com%2Fsessions%2Fthumbnails%2F627d2d6ca42e4ea5826216307971b400-00001.gif&key=96f1f04c5f4143bcb0f2e68c87d65feb&autoplay=1&type=text%2Fhtml&schema=loom\" width=\"940\" height=\"705\" scrolling=\"no\" title=\"Loom embed\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen=\"true\"></iframe>",
     "type": "video"
   }
 ],
 "group": ""
}</script></a><a href="/case-study/ux-cabin-case-study-moen" class="button-lg w-button">View Case Study</a></div></div></div></div></div></div><img src="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen.png" loading="lazy" sizes="(max-width: 479px) 100vw, 700px" srcset="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen-p-500.png 500w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen-p-800.png 800w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen-p-1080.png 1080w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen.png 1150w" alt="" class="img_wapper_bg"><div class="logo_wapper"><img src="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643d4277830acf06dbe3965b_logo.svg" loading="lazy" alt="" class="logo_clinet"><div class="item_wapper"><div class="text_blog_wapper">Brian Colby</div><div class="text-block-24">Principle UX Design - Moen</div></div></div></div></div>

Moen
Moen logo
Brian Colby
Principle UX Design - Moen

App Re-Design

UX Cabin helped Moen combine three mobile apps into one unified experience to manage all water products in your smart home.

Getting Up to Speed

To get up to speed as quickly as possible, the UX Cabin reviewed old Sketch and Figma files. The team organized relevant mockups and app screenshots and mapped them to existing flows.

Information Architecture

After reviewing product feedback as well as industry best practices UX Cabin reviewed the current information architecture and created a model that could support many different types of smart water devices within one app.

Results

After several iterations of feedback we landed on a glassy look and feel and a scalable design that would support many more smart water devices as Moen continues to grow their offering.

Design System & Dev Handoff

UX Cabin created a design system containing 400+ re-usable components with an average usage of ~2,500 insertions per week.

Brain Colby
We stood up a fully functional design system in a couple of months. Because of that we were able to get products out the door, period. Incredible ROI for us.
Watch Video
Player
Copy embed

<div class="callouts"><div class="card_wapper_client"><div class="bg_wapper"><img src="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/64342a8d1c99610edbcc6364_Client%3DBrian%20Colby.png" loading="lazy" sizes="(max-width: 479px) 231.1875px, 308.25px" srcset="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/64342a8d1c99610edbcc6364_Client%3DBrian%20Colby-p-500.png 500w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/64342a8d1c99610edbcc6364_Client%3DBrian%20Colby.png 525w" alt="" class="img_clinet_wapper-2"><div class="fg_wapper"></div><div class="content_wapper"><div class="padding_wapper-2"><div><div class="text_content_wapper-2">We stood up a fully functional design system in a couple of months. Because of that <strong class="blod_wapper">we were able to get products out the door, period. Incredible ROI for us.</strong></div><div class="div-block-143"><div class="button_card_wapper"><a href="#" id="w-node-_1ad2cbd8-605d-db82-85e9-2d58a07ae9cf-fbcf96be" class="button-lg greedin w-inline-block w-lightbox" aria-label="open lightbox" aria-haspopup="dialog"><div>Watch Video</div><script type="application/json" class="w-json">{
 "items": [
   {
     "url": "https://www.loom.com/share/627d2d6ca42e4ea5826216307971b400&autoplay=1",
     "originalUrl": "https://www.loom.com/share/627d2d6ca42e4ea5826216307971b400&autoplay=1",
     "width": 940,
     "height": 705,
     "thumbnailUrl": "https://cdn.loom.com/sessions/thumbnails/627d2d6ca42e4ea5826216307971b400-00001.gif",
     "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.loom.com%2Fembed%2F627d2d6ca42e4ea5826216307971b400&display_name=Loom&url=https%3A%2F%2Fwww.loom.com%2Fshare%2F627d2d6ca42e4ea5826216307971b400&image=https%3A%2F%2Fcdn.loom.com%2Fsessions%2Fthumbnails%2F627d2d6ca42e4ea5826216307971b400-00001.gif&key=96f1f04c5f4143bcb0f2e68c87d65feb&autoplay=1&type=text%2Fhtml&schema=loom\" width=\"940\" height=\"705\" scrolling=\"no\" title=\"Loom embed\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen=\"true\"></iframe>",
     "type": "video"
   }
 ],
 "group": ""
}</script></a><a href="/case-study/ux-cabin-case-study-moen" class="button-lg w-button">View Case Study</a></div></div></div></div></div></div><img src="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen.png" loading="lazy" sizes="(max-width: 479px) 100vw, 700px" srcset="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen-p-500.png 500w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen-p-800.png 800w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen-p-1080.png 1080w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen.png 1150w" alt="" class="img_wapper_bg"><div class="logo_wapper"><img src="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643d4277830acf06dbe3965b_logo.svg" loading="lazy" alt="" class="logo_clinet"><div class="item_wapper"><div class="text_blog_wapper">Brian Colby</div><div class="text-block-24">Principle UX Design - Moen</div></div></div></div></div>

Moen
Moen logo
Brian Colby
Principle UX Design - Moen
Styles

In order to create a scalable system we started with basic style primitives including:
· Text styles
· Base color palette
· Shadows and containers styles

These styles enabled us to maintain a consistent design language and speed up the design process. Adding new styles was also a breeze thanks to our flexible naming conventions.

Component Library

The Design System was created after Brad Frost’s “Atomic Design” model. In this model, the smallest UI elements are referred to as “atoms” and are assembled together in order to create components referred as to"molecules". The most complex are called "organisms".

From these basic elements we then created more complex design “organism” components such as:
‍
· Top Nav
· Bottom App Bar
· Stepper
· Floating Player
· Device Cards
· Notifications Cards
· Action dropdowns

It was important to Moen to give their user's the choice of different visual themes. For this, we delivered all designs in both a light and dark theme.

Light and Dark Modes

It was important to Moen to give their user's the choice of different visual themes. For this, we delivered all designs in both a light and dark theme.

Documentation

Extensive documentation was delivered to maintain consistency in future designs and quickly onboard new designers and developers.

Usability Testing

Usability tests helped us discover common mistakes and fixation points. They were also an opportunity for users to give us qualitative feedback.
‍
These often revealed unintuitive truths about specific flows and allowed us to update them accordingly.

Prototypes

For especially complex workflows multiple prototypes were created to test out the feel and usability of each.

Usability Tests

Usability tests helped us discover common mistakes and fixation points. They were also an opportunity for users to give us qualitative feedback.

These often revealed unintuitive truths about specific flows and allowed us to update them accordingly.

Objectives

• Combine the existing app with the two acquired apps
• Update to a modern design language
• Create a design system to simplify design & unify development
• Find ways to add user delight

Animation

Animations were used a vehicle to express the Moen brand and educate users on complex topics.

Animation System

To keep animations consistent we created an animation design system that detailed specific rules around motion, duration, transitions, and styles.

Animations

UX Cabin created two types of animations:

1. Micro-interactions: subtle transitions and loading states to make the app feel more fluid and polished.
2. Educational GIFs: illustrations showing how to use or troubleshoot various Moen devices that requires motion.

Brain Colby
They had to scale, change direction… incorporate new branding into a design system… deliver under very aggressive deadlines.

They were just fantastic to work with
Watch Video
Player
Copy embed

<div class="callouts"><div class="card_wapper_client"><div class="bg_wapper"><img src="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/64342a8d1c99610edbcc6364_Client%3DBrian%20Colby.png" loading="lazy" sizes="(max-width: 479px) 231.1875px, 308.25px" srcset="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/64342a8d1c99610edbcc6364_Client%3DBrian%20Colby-p-500.png 500w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/64342a8d1c99610edbcc6364_Client%3DBrian%20Colby.png 525w" alt="" class="img_clinet_wapper-2"><div class="fg_wapper"></div><div class="content_wapper"><div class="padding_wapper-2"><div><div class="text_content_wapper-2">We stood up a fully functional design system in a couple of months. Because of that <strong class="blod_wapper">we were able to get products out the door, period. Incredible ROI for us.</strong></div><div class="div-block-143"><div class="button_card_wapper"><a href="#" id="w-node-_1ad2cbd8-605d-db82-85e9-2d58a07ae9cf-fbcf96be" class="button-lg greedin w-inline-block w-lightbox" aria-label="open lightbox" aria-haspopup="dialog"><div>Watch Video</div><script type="application/json" class="w-json">{
 "items": [
   {
     "url": "https://www.loom.com/share/627d2d6ca42e4ea5826216307971b400&autoplay=1",
     "originalUrl": "https://www.loom.com/share/627d2d6ca42e4ea5826216307971b400&autoplay=1",
     "width": 940,
     "height": 705,
     "thumbnailUrl": "https://cdn.loom.com/sessions/thumbnails/627d2d6ca42e4ea5826216307971b400-00001.gif",
     "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.loom.com%2Fembed%2F627d2d6ca42e4ea5826216307971b400&display_name=Loom&url=https%3A%2F%2Fwww.loom.com%2Fshare%2F627d2d6ca42e4ea5826216307971b400&image=https%3A%2F%2Fcdn.loom.com%2Fsessions%2Fthumbnails%2F627d2d6ca42e4ea5826216307971b400-00001.gif&key=96f1f04c5f4143bcb0f2e68c87d65feb&autoplay=1&type=text%2Fhtml&schema=loom\" width=\"940\" height=\"705\" scrolling=\"no\" title=\"Loom embed\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen=\"true\"></iframe>",
     "type": "video"
   }
 ],
 "group": ""
}</script></a><a href="/case-study/ux-cabin-case-study-moen" class="button-lg w-button">View Case Study</a></div></div></div></div></div></div><img src="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen.png" loading="lazy" sizes="(max-width: 479px) 100vw, 700px" srcset="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen-p-500.png 500w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen-p-800.png 800w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen-p-1080.png 1080w, https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643428792518c2ae1fdee989_Background%3Dmoen.png 1150w" alt="" class="img_wapper_bg"><div class="logo_wapper"><img src="https://uploads-ssl.webflow.com/61d86b3ec78588ec06baf803/643d4277830acf06dbe3965b_logo.svg" loading="lazy" alt="" class="logo_clinet"><div class="item_wapper"><div class="text_blog_wapper">Brian Colby</div><div class="text-block-24">Principle UX Design - Moen</div></div></div></div></div>

Moen
Moen logo
Brian Colby
Principle UX Design - Moen

See our other projects!

Emergency Management Suite
Stay in control for drills, active incidents and reunification by keeping vital teams apprised through a centralized, cloud-based user experience with Emergency Management Suite
EmployStream
EmployStream is a candidate management software platform that helps companies find, engage, and onboard employees.
Illiquid Labs NFT Marketplace
A beautiful, one-of-a-kind NFT marketplace for peer-to-peer trading, raffles, and loans.
Panasonic Weather
The Panasonic Weather Solutions application allows meteorologists to interpret weather highly sophisticated weather data from the atmosphere during the flight of an aircraft.
Suite360
UX Cabin helped Suite360 revamp their webapp by upgrading the visual design, introducing gamification for students and simplifying the teachers’ navigation so they can get tasks done seamlessly.
Tekonsha Mobile App
Giving truck drivers control over their braking technology from the palm of their hand.