Marie's Gluten-Free Bake Shoppe

Platform Development

Timeframe

  • December 2015 to July 2016

Team

  • Jesyka Palmer
  • John Palgut
A compilation of work for Marie's software, featuring the admininstrator dashboard on desktop, ipad, and mobile

Role

Led design of component library and hi-fidelity mock-ups, data visualizations, grid and typescale. Collaborated on wireframing and information architecture redesign.

Intent

Provide scalable solutions to a growing bakery.

Marie’s is a small and rapidly expanding bakery in Wathena, near Kansas City, that offers gluten-free items both in store and in partner stores across the greater Kansas City area. The bakery needed a simplified shopping experience, a more robust tool to document orders and performance and a brand system to move quickly into the future.

Final Designs

Hi-fis

Below are a few of the high fidelity interfaces I made for Marie’s. It was imperative that this software be accessible on both the mobile and tablet for our users, so content and mobile accessibility were high priorities.

Currently, I am polishing the interface, specifically around color contrast and other points of accessibility, and will be making changes over the month of July.

Four high fidelity screens for Marie's software, specifically the wholesale invoices, the individual vendor profile, the master vendor list and the user settings.

Style Guide + Component Library

As a whole, the previous design lacked clarity in the user experience and consistency in the visual system. Too many interactions mixed with too much content created an overwhelming and under-delivering experience. From a visual standpoint, all sides of the tool needed to be reconsidered. I developed a style guideline and library, including a typescale and flexible grid system, new palette, UI and custom iconography. Below are a few mock ups of the tool and website, providing a glimpse into the way the individual elements came together.

Primary + secondary color palettes
Color palette designed for software.
Typography
Typography chosen for software.
Patterns
Patterns, including buttons, check marks, tab navigator, calendar, and tabs designed for software.
Iconography
Iconography designed for software.
Analytics
Data visualizations designed for tool, including bar charts, pie charts, 	and line charts. Palette of colors for analytics.

Process

Personas

Understanding users’ needs and use cases

The project extended to multiple users with unique needs. These users were categorized into three groups: shoppe personas, wholesale personas and retail personas.

Shoppe Personas

Within the bakery, shoppe personas completed business tasks such as creating and editing invoices, creating and managing reports, products, store hours and setting revenue goals. In addition, product-focused baking tasks such as preparing and packaging products, managing the ingredients list, recipes, and larger orders.

Wholesale Personas

In the grocery or vending store space, wholesale personas needed to conduct tasks such as purchasing products, managing accounts, assisting customer purchases, paying for invoices, advertising and maintaining supplier relationships.

Retail Personas

Also in the store space, the retail personas needed to be able to place and purchase larger orders and deliver them locally and remotely.

Information Architecture

The site architecture underwent a significant number of changes. Thinking about both the retail-facing and the shoppe and wholesale facing site as one allowed us to identify different flows and needs for the greater experience. We thought about how our personas would navigate the site in order to accomplish their goals. We thought about the micro interactions different users would complete to sign on, complete an order or see their profile. To read more about the process of updating the ia, take a look at my site ia post.

Wireframing + Ideation

Once additions and updates to the ia were identified, wireframing new and improved experiences was the next focus. While some just needed updates, such as the menu, ordering/shopping experience and check out, other pages and user flows were completely new. The cake builder, goal setter, dashboard, recipe maker and individual profile required a lot of ideation. Below are some sketches of my process.

Goal Setting
Process sketches around the goal setting experience for the admin.
Vendor Page and Ingredients list/Recipe
Process sketches around the individual vendor page.

Mock Ups + User Testing

Mid fidelity wireframes of dashboard work flow.Mid fidelity wireframes of dashboard work flow. Early on, we met with our stakeholders to conduct think alouds and task-based user testing. You can see our first prototype here, and read about our process and findings in my user testing post.

Mid fidelity wireframes of admin dashboard work flow. Including vendor page, recipe creation, ingredients list, invoices list, invoice creation, report creation and financial report creation. Mid fidelity wireframes of admin dashboard work flow. Including vendor page, recipe creation, ingredients list, invoices list, invoice creation, report creation and financial report creation.

Status Update

The site update is currently being developed. User testing will occur again once development is complete. I am currently working to finish the component library, including accessibility and empty state designs. We hope to have the site live by the end of summer 2016.