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
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.
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.
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.
Also in the store space, the retail personas needed to be able to place and purchase larger orders and deliver them locally and remotely.
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.