Magnolia Market
Magnolia’s e-commerce website redesign and first iOS app design.
Company
Magnolia, Riess Group
Duration
01/2016 - 07/2017
My Role
Lead UX&UI Designer
Link
About
Magnolia is a lifestyle company located in Waco, Texas. It has several businesses that make up its core revenue generation such as home décor, magazine subscriptions, apparel, gardening, homestays, and real estate. The company is owned and operated by Chip and Joanna Gaines. They gained a lot of traction due to a TV series they run called “Fixer Upper” on HGTV. I was tasked to redesign their website to improve the user experience of their online marketplace, enhance the visual softness of their blog, and add new content pages in order to accommodate each Magnolia business. I also led the design for Magnolia’s first iOS app which created an easy shopping experience on their customers’ mobile devices.
Design Impact
The new website design increased the conversion rate by 500% and attracted millions of new users and customers.
The app has been awarded by Apple several times including as App of the Day. It’s currently rated 4.9/5 in App Store with over 100,000 installs. The app has even been featured by Shopify in official events with Tim Cook and Justin Trudeau (Tim said he loved it!).
Project Details
Design Goal
Improve the user experience of the online market, enhance branding impact, add new content pages (the Gaines’ TV series, blog, offline store, journal page, etc.), and attract online users to offline events.
Target Users
25 to 60 years old
Homeowners
Potential home buyers
Interior design enthusiasts
Handcrafted product junkies
Design Criteria
Softness and quality – Farmhouse, low intensity, friendly, southern, feminine. The design style integrates the contemporary elements of these characteristics.
Ease of use – All important information needs to be easy to access and have a smooth purchase flow.
Sitemap
In this project, new content pages such as the offline store page, TV show page, blog page, magnolia home stay page, and journal page need to be designed and implemented. Each page was designed to be its mini website that had independent functions. The sitemap below organizes the order of these pages and the relations between them.
UX Redesign
The original Magnolia e-commerce site had a great visual design. However, it had many user experience issues:
Primary interactions are not prioritized
Primary and secondary interactions are not distinguished
Product names are not visible on the product listing page
Filters are displayed horizontally which is not sustainable with more items
Product photos are not in a consistent style - some have a background and some don’t
Important shipping and return information are hard to find
The footer section has an overwhelming amount of information
After going over all the issues with my client, I started mocking up design solutions for each page. Below is a comparison between the original product detailed page and the redesigned one.
Visual Design
Besides redesigning the user experience of the e-commerce site, the client also needed new pages featuring different sections of the business: Magnolia Home, Silos, About, Books, Magnolia Journal, Our Show, Blog, Stay, and Realty.
The visual design for the new pages follows the characteristics of the brand. It aims to give visitors a sense of softness, warmth, and liveliness. All pages are using a consistent design system with a slightly different touch of visual treatment to keep their individuality.
The new Silos page, for example, is a fun page listing all the amenities at Magnolia’s Offline market. On this page, customers can learn about offline events, food options, transportation information, and so on.
*Magnolia went through a rebranding a couple of years ago. However, the core e-commerce experience remained the same as my design.
Responsive Design
In this project, each page is designed for different screen sizes to ensure a great shopping and browsing experience across various devices.
Design Systems
To ensure the components are implemented consistently across the site, I created a UI guide with details on color palettes, typography, and reusable UI elements.
iOS App
The first version of the iOS app focused on the shopping experience of the Magnolia Market. Differently from the website design, I used a white background for the iOS app to reduce the visual complexity of the UI on smaller screens while keeping the Magnolia typography as page titles to enhance the consistency of the branding. Paint was a new product line the client wished to mark, hence paint stroke elements were widely used in this design.
