Hannah Jiang



Get in touch if you want to chat about design or just simply want to say HI!

haiyuanj@gmail.com

Image Alt

Magnolia

E-Commerce Website and iOS APP Design


Client: Magnolia, Riess Group

Duration: Jan, 2016 to Jul, 2017

Role: Lead Designer
Status: Online

Link: magnoliamarket.com

Tag: UX, UI, E-Commerce, Event, Fixer Upper

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, home stays, and real estate. The company is owned and operated by Chip and Joanna Gaines. The company has 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 for their TV series in order to accommodate each MAGNOLIA business.

The new design increased the conversion rate by 500% and attracted millions of new users and customers.

Project Analysis

Design Goal: Improve user experience of the original site, 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
  • 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 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.

    Mindmap

    This mindmap lists the content details of each page, also explores possible styles of the visual design.

    UX Details

    I went through the original website, listed all UX problems it had to make sure that the redesign fixed every one of them. Below is a comparison between the original product detailed page and the redesigned one.

    Visual Design

    iOS APP

    Download the APP

    Tim Cook Checking the Magnolia APP in Toronto
    He said he loved it!

    Photo Resource from Riess Group

    Logo Design
    For the app logo, I combined the “M” from Magnolia’s logo and their signature product, which on one hand shows the connection between the app and the website, and on the other hand differentiates the two platforms. The app only has the online store section of the website.

    UX showcase: