WEBSITE - UI + MOTION DESIGN   
8 MIN READ

Budberry — enhancing the brand experience

During my time at Hawke Media, I designed the UI animations for Budberry, an elevated cannabis experience lounge and retailer. As one of the first legal cannabis consumption venues, their mission was focused on nurturing a forward-thinking community by educating consumers and providing an unique ambiance with their cafe space.

 

Their 420 celebrity chef and the delivery offerings contributed to a progressive brand  identity, so our objective was to visualize Budberry's innovation in their online presence.

VIEW THE LIVE SITE
budberry_motiondesign.gif
ROLE
Motion Design
Micro-interactions
UI Design
Illustration
TOOLS
After Effects
Illustrator
Procreate
HTML / CSS
TEAM
Web Designer
Senior Brand Designer
TIMELINE
2 weeks

the challenge

How might we differentiate Budberry from competitors?

How might we elevate Budberry's web experience?

How might we use this platform to create an engaging experience for our customers?

the solution

Micro-interactions! Three animated illustrations on the website's UI design to draw interest and attention to Budberry's value props: Dispensary, Delivery, and About Us.

DISCOVERY

setting the mood

Our first step was to put together mood boards using inspiration from online research and our stakeholder's assets. Budberry's captivating property was major point of interesting for the brand, and we wanted their virtual real estate to represent their physical landscape. We also pulled ideas from other illustrations with friendly, witty, inclusive, warm, and casual styles. 

 
budberry-moodboard.png
 
IDEATION

sketching the thumbnails

Typically, when I have a concept in mind I will start with rough thumbnail sketches. Since the final illustrations would live on web pages, I also drew them in the context of lo-fi wireframes. It helped that our web designer had already created wireframes and laid out the info architecture of the site, so the general placements were decided.

budberrysketches1.png
budberrysketches2.png

complementingthe brand 

Limiting the illustration by colors was something we wanted to experiment with. It was important to stay true to the style guide, but Leaf Green was the one exception I made to the palette. I wanted to reflect the lush, exotic imagery of their lounge space and I knew it would work with their existing web images. Since Budberry's original brand colors are striking to represent innovation, the dark tones of the green helped us complement the Cod Gray while also recalling their plant-based product.

kc-budberry-palette.png

mocking up the wireframes

Next, I drew color sketches that could fit as placeholders in the existing wireframes. This way I could visualize the atmosphere of each page and communicate this vision to our stakeholders. Our designs were very collaborative and as the illustrations developed, the wireframes also developed to better incorporate them. Below is our first iteration of the designs with the UI elements mocked in.

 
Budberry Homepage Wireframes

homepage

S2. dispensary

Engage the viewer's attention here. 

S3. & S4.

foliage & frame

Smooth aesthetic transitions from section to section.

S5. delivery

We're eco-friendly, fun and casual.

Budberry About Wireframes

about

S1. about us

It's about the edibles.

S2. & S3. foliage

Smooth aesthetic transitions from section to section.

S4. our space

What sets us apart.

 
DELIVERABLES

refining the taste and texture

With our stakeholders' approval on the mocks, I refined the set of illustrations through color, line, and shadow. Inspired by the illustrative styles from our mood board, we want to add texture as well, so I experimented with different resources. In my sketches, I used a dark, placeholder pencil texture but eventually settled with a dusty brush texture in the same Linen color as the background. The choice was both a practical one and a conscious decision for a subtler undertone. I created the final texture myself after an exhaustive search of online resources.

kc-budberry-exp.png
Homepage.png

the evolution of our

hi-fi wireframes

The impact my illustrations made inspired us to revisit the wireframes and see where we could reiterate the fluid lines and dynamic breaks between sections. Looking at a holistic view of the UI helps us craft a strong narrative for our customers' experience.
About.png
 
MOTION DESIGN

wiggle

To keep all three animated illustrations cohesive, each one had leaves blooming once visible, and then repeat a wiggle motion. The rustling of the leaves were designed to be random and minimal, keeping the page alive and interesting without distracting too much from the content. All the animations are triggered by the system when it appears on the viewer's screen, and will loop after 15 seconds. 

dispensary

For the first animation that viewers would see when scrolling down the page, I wanted to quickly capture their attention and think, 'This isn't any ordinary website'. The storefront flips open to face the customer walking up to the shop, generating a friendly and welcoming emotion.

budberry-dispensary.gif

delivery

Although Budberry doesn't deliver by bike, we decided it was an eco-friendly and interesting symbol to use. It was also feasible to imagine a cyclist riding in from off-screen, directing viewers' attention to the text block on the right. Using movement (not just motion) to create focus is important when maintaining visual interest.

budberry-delivery.gif

about us

Referencing the visuals from Budberry's lounge, I wanted to make their koi pond come alive because how often do you come across one of those in LA? Water and animals are notoriously difficult to animate, and with the constraints of code in mind, I kept it simple. Using fluid lines and details, the illustration pulled off the illusion of surfacing fish.

budberry-about.gif
 
LEARNINGS

reflections

I had a blast creating these elements during my time at Hawke Media! It was awesome to be able to flex my illustration skills again while also applying it in the context of web design. The build phase was an especially unique learning experience because our dev had limited bandwidth that week, so we did it ourselves! Taking an opportunity to try something new is always stimulating, and I felt a great sense of accomplishment watching my animations come alive on the site. Unfortunately, Budberry seems to have closed since last year as their website and social media are no longer around :(

 

Regardless, I think the most impactful lesson I learned from this experience is how to be a good collaborator. Our team (a web designer and senior brand designer) really encouraged me to take ownership over the UI, and respected the contributions I made as a growing designer. I’m still learning, but I hope to be able to mentor other designers in the same way one day.