Magnolia

Overview

At Warner Bros. Discovery, I work on the Direct-to-Consumer Lifestyle Brands which comprises of brands that connect customers to IP they love. More specifically, I’ve worked on Magnolia - a joint venture, started by Chip & Joanna Gaines. As Magnolia’s design lead for their e-commerce digital platforms, I worked with another senior designer on the team to redesign the Magnolia app navigation.

The Problem

How might we redesign the Magnolia app's navigation to enhance customer experience by making it easier to navigate, while improving the discoverability of content and products?

Currently, users face challenges in finding what they need due to unclear navigation paths and hidden features, leading to frustration and potential drop-offs. By streamlining the navigation and making content more accessible, we aim to create a more intuitive and engaging experience that supports user goals and drives increased interaction with the app’s offerings.

Old App Design

The old Magnolia app design lacked organization by not having a global navigation menu and utilizing practices like horizontal scroll menus that lower customer engagement. As you can see, there are many layers the customer needs to navigate to reach their destination and each vertical of the app whether it be Shop or Visit, has it’s own navigation system that can be confusing for customers and limit their ability to navigate between each section.

Brainstorm

We organized a brainstorm session to find ways to enhance the app navigation systems. Some of the common themes that came from the session were having a unified, persistent bottom navigation and persistent search bar. Some new features that were requested as enhancements were also including a product scanner and custom modals for location and camera permissions, both of which we eventually shipped.

Overview

At Warner Bros. Discovery, I work on the Direct-to-Consumer Lifestyle Brands which comprises of brands that connect customers to IP they love. More specifically, I’ve worked on Magnolia - a joint venture, started by Chip & Joanna Gaines. As Magnolia’s design lead for their e-commerce digital platforms, I worked with another senior designer on the team to redesign the Magnolia app navigation.

The Problem

How might we redesign the Magnolia app's navigation to enhance customer experience by making it easier to navigate, while improving the discoverability of content and products?

Currently, users face challenges in finding what they need due to unclear navigation paths and hidden features, leading to frustration and potential drop-offs. By streamlining the navigation and making content more accessible, we aim to create a more intuitive and engaging experience that supports user goals and drives increased interaction with the app’s offerings.

Old App Design

The old Magnolia app design lacked organization by not having a global navigation menu and utilizing practices like horizontal scroll menus that lower customer engagement. As you can see, there are many layers the customer needs to navigate to reach their destination and each vertical of the app whether it be Shop or Visit, has it’s own navigation system that can be confusing for customers and limit their ability to navigate between each section.

Brainstorm

We organized a brainstorm session to find ways to enhance the app navigation systems. Some of the common themes that came from the session were having a unified, persistent bottom navigation and persistent search bar. Some new features that were requested as enhancements were also including a product scanner and custom modals for location and camera permissions, both of which we eventually shipped.

Reflections & Key Takeaways

Balancing Business Goals and User Experience - We collaborated closely with Magnolia, as part of their joint venture, to gain a deep understanding of their business goals and vision, ensuring that the most important elements were prioritized in the main navigation. Balancing the complexities of the business relationship, we carefully navigated the process to align both strong user experience design practices with their business objectives.

Cross-functional Collaboration is Crucial - Successfully redesigning the navigation required deep collaboration not only with the design and development teams but also with stakeholders at Magnolia. By working closely with Magnolia as a joint venture, we were able to navigate the intricacies of their various business units (e-commerce, hotels, TV shows, etc.) to ensure their needs were reflected in the navigation without sacrificing usability.

Navigating Tight Deadlines without Sacrificing Quality (Yet Pushing Back if Not Possible) - Working under tight deadlines presented a challenge, but the project underscored the importance of maintaining quality even when time is limited. By focusing on key priorities and ensuring no details or edge cases were missed, the team was able to deliver a high-quality navigation system within the required timeframe. We were also unafraid to ask for more time if needed.

Reflections & Key Takeaways

Balancing Business Goals and User Experience - We collaborated closely with Magnolia, as part of their joint venture, to gain a deep understanding of their business goals and vision, ensuring that the most important elements were prioritized in the main navigation. Balancing the complexities of the business relationship, we carefully navigated the process to align both strong user experience design practices with their business objectives.

Cross-functional Collaboration is Crucial - Successfully redesigning the navigation required deep collaboration not only with the design and development teams but also with stakeholders at Magnolia. By working closely with Magnolia as a joint venture, we were able to navigate the intricacies of their various business units (e-commerce, hotels, TV shows, etc.) to ensure their needs were reflected in the navigation without sacrificing usability.

Navigating Tight Deadlines without Sacrificing Quality (Yet Pushing Back if Not Possible) - Working under tight deadlines presented a challenge, but the project underscored the importance of maintaining quality even when time is limited. By focusing on key priorities and ensuring no details or edge cases were missed, the team was able to deliver a high-quality navigation system within the required timeframe. We were also unafraid to ask for more time if needed.

Redesigning the Magnolia app navigation to add new verticals and improve discoverability

Overview

The Problem

Old App Design

Brainstorm

Overview

The Problem

Old App Design

Brainstorm

Final Product

Stage 5. Final presentation and handoff

Reflections & Key Takeaways

Reflections & Key Takeaways

Other projects

Moshicam