"As a child, I was always thrilled to watch dough expand with a life of its own, a fascination which I carried on to motherhood."
by Mary Grace
Overview
The new face of Mary Grace’s website allows the user to experience the same heart-warming atmosphere where the essence of Mary Grace’s “Goodness of Home” can be felt with the heart and soul. The excellent assistance will make people feel how truly treasured they are to be part of Mary Grace’s home and family.
The new system of purchasing online of fresh-from-the-oven pastries and custom cakes has been made simple wherein the customers can track the status of the order and when the “Taste of Home” can readily be picked up.
The Challenge
Combining photography, art, UI elements and user experience was a great challenge to create powerful visuals in a versatile style of Mary Grace. Another challenge was to make a new system for online ordering and to resolve the existing process which took up almost 20 steps just to customize a cake which also resulted in an excessive drop rate.
Grid System
It uses a responsive grid system, which has flexible columns and padding that can resize depending on the screen width (such as mobile, tablet, or desktop). Tablet can use the mobile grid system, it center-aligns to sections of its layout grid.
Colors
Mary Grace’s uses a color theme based on their brand bible. The primary color is Maroon and other supporting colors to create harmony.
Typography
Type scale uses two typefaces, Playfair Display and Arbutus Slab. The two typefaces are a perfect match for the overall aesthetic of Mary Grace.
Design Elements
When you go to Mary Grace’s Cafes, these are the common designs you’ll see which is cozy and pleasantly comfortable. We incorporate these elements to the website to make customers/users feel the same experience as they go to the cafes.
Responsiveness
Designing both web and mobile at the same time helped us to identify the best approach in which one converts more and which aren’t.
UI/UX Designer: John Edmund Dela Torre
Frontend: Chezka Bermillo
Company: Digiteer Inc