Founded by a loving grandmother and her grandson learning to work with his new health issues, Lorraine's Cakes is a specialty cake company committed to gluten-free, soy-free, vegan, and generally allergy-friendly products. By not compromising on flavor and quality, Lorraine's Cakes offers products for everyone to enjoy together, whether or not they all have dietary limitations, so no one is made to feel "othered" by their social food experience.
Lorraine's Cakes asked me to redesign their website to better reflect their brand's premium quality as the business grew to reach new sellers and customers. This also prompted an update to their existing visual brand identity, production of all-new product photography, and collaboration on stronger brand messaging and copywriting throughout the site. After our first project we continued working together, adding a second website dedicated to online orders, and I even designed new packaging for their products for their ecommerce launch.
Lorraine's Cakes' existing WordPress website had served the business in its earliest stage, but was now holding them back. It was difficult to manage or update, felt unstable and buggy with inconsistent design details, and generally did not accurately convey the quality of their growing business. It also lacked support for direct-to-consumer ecommerce, which was an expansion the business aspired to.
Using Webflow to visually code the new website allowed for a totally custom design and a fluid transition to development. This flexibility helped transform the entire website experience—for both the client and their customers—with engaging visuals and interactions, improved content hierarchy, stronger brand messaging, and much easier content management. After the initial launch, we continued our progress by adding an entire Shopify-powered ecommerce website, networking the two sites together to create one unified experience.
Accomplishing Lorraine's Cakes' unconventional online-ordering user experience needs was a significant undertaking. In order to optimize shipping costs without sacrificing customer choice, we needed to restrict orders to six custom-box combos with compatibility limitations based on product type and quantity (i.e., 1, 2, or 4 cakes; 1 cake + 1 cupcake pk; and 4 or 8 cupcake pks), all while allowing customers to select their preferred flavor combinations, and still calculating custom-box pricing accurately with each as a single item in cart.
Before the Shopify site went live, we added a CMS-powered news post feature to the Webflow site for the team to announce the ecommerce launch and any future news, and even created a mailing list to keep customers connected with news and insider perks.
Lorraine's Cakes already had a logo that they loved and felt represented their brand with sophistication and quality, as well as the "natural, healthy, and wholesome" values they intend to communicate. However, the existing logo had a challenge with flexibility and versatility when it came to scale and compatibility with certain situations and backgrounds. The new website design process provided an opportunity to resolve these issues, improving the overall readability and detail.
Notably, the logomark's capital "L" was simplified, and its stroke weight increased, in order to balance its elegance with scalability. The circular, green "helix" ornament was re-rendered from scratch and adapted into three different versions for flexibility at smaller display sizes, using progressively heavier stroke weight as scale is reduced.
We also created several solid-fill-color versions, as well as black and white variations.
For consistency of quality and brand style, nearly all photography on the new website was shot specially for the project.
All photography was shot and initially edited in RAW format.
Product Photography – When planning and capturing the product images, we relied entirely on natural lighting as the most appropriate choice for communicating the "natural, healthy, and wholesome" values of the Lorraine's Cakes brand. The staging was carefully arranged with decorative props, backgrounds, and time of day on location for lighting.
Portrait Photography – It was also important to show the friendly humans behind the brand, as the company's story is so closely tied to Tyler and his grandmother Lorraine. We staged and lit a few simple portraits of the two founders with a counter full of their products, right in Lorraine's own home kitchen, where the first Lorraine's Cakes recipes were created. We selected just one shot for the website.
Macro Photography – With the very goal of inducing the inter-sensory experience of craving, these enticing, magnified cake and frosting textures were captured using macroscopic photography—perfect for abstract backgrounds throughout the website.
Special-case Shots & Advanced Edits – In a couple cases, special shots and edits were custom-tailored to achieve conceptual goals in the website design: (top) in the Commitments section, the mostly empty dish on the tablecloth was purpose-shot to imply that a cake was shared and fully devoured; and (bottom) on the Story page, top-down shots of products were carefully clipped from their backgrounds, with realistically color-tinted shadows artificially rendered, so they appear to rest in three dimensions over the pure white backdrop.
(Right) Each of these images are implemented with a subtle, parallax-background animation technique: scrolling at a slower rate than the "foreground" content, causing them to appear further away, thus evoking a sense of depth.
Product Packaging – The launch of online sales also presented an opportuity to switch to new 100%-compostable packaging, reflecting a core brand value for Lorraine's Cakes. This prompted us to redesign their package labels, translating the updated brand identity, visual design language, and overall elevated aesthetic developed for their website into physical media.