The energy bar market is bursting with sweetened bars targeting athletes and fitness enthusiasts. Spacebar aims to be the rare savory bar, aimed at busy professionals, specifically working in tech.
META-CHALLENGE invent, design and brand a product.
UNDERLYING TASK design and develop a website to showcase that product.
MY ROLES research, branding, design, development and implementation.
The energy bar market seems ready for a savory, nutritious alternative given it’s strength—doubling yearly since 2015—and recent adverse publicity regarding the sugar content and nutritional value of some bars. The introduction of meat bars, such as Hershey’s Krave (in blueberry barbeque beef) and General Mills’ Epic Bar (in bison, salmon and venison) seems to bear this out. Interestingly, these newcomers aim not for the athlete, but for the average semi-active consumer. Additionally, consumers I surveyed pointed toward healthy ingredients (100%) and taste (81%) as top attributes for selecting bars, with fitness promise ranking significantly lower (25%).
Energy & nutrition bar consumption in the U.S. is highest among 25-54 year olds.
When asked to choose the top three factors that lead to the purchase of an energy bar, 100% of those surveyed selected ingredients, 81% selected taste, 25% selected fitness promise and 6% selected packaging.
In addition to office professionals, I rounded out my personas with a tangential group: busy people, such as working parents, who don’t necessarily work in an office environment but are often too busy to stop for a meal. I imagined a subsidiary advertising campaign that could target this group.
I began by brainstorming with word lists and mind-maps, flushing out obvious references and hacking into more inventive ideas, with graphic possibilities and marketing connections hovering in the wings. After multiple surveys, the name Spacebar emerged as the clear choice. A keyboard’s spacebar is used to create a space, or to pause music or video, connecting with the idea of pausing and creating a space to eat.
I envisioned a minimal, almost generic word mark for the logo. I searched through fonts that had a tech feel without being too obvious and settled on Orator, a monospace font originally designed for the IBM Selectric typewriter. I selected a gray similar to Apple’s space gray. I used the keyboard spacebar icon and played around with breaking the word in two. I narrowed down my designs and surveyed potential consumers, 52% of which chose the logo design that closely resembles a keyboard spacebar. Finally, I chose Roboto for the brand's secondary typeface.
Before I began package design, I researched existing products for ingredients, texture and flavor. I sampled a dozen or so bars, and created flavor profiles based on foods both popular and nourishing, working out hypothetical ingredients for each, as well as talking points for copy.
I mocked up multiple sizes and styles of packaging, deciding early on to go with a horizontal layout that mimicked the shape of a keyboard spacebar. I drew loose vector icons that I used as a background pattern, and came up with a color palette. In the end, drawn icons and color seemed too much of a departure from my original generic concept. Many iterations later I settled on a white package with simple flavor-identifying shapes.
With branding and package design complete, I focused on copy, which would inform the site's content areas. I invented testimonials by popular tech publications, designed a social media contest and created a tie-in with Apple Watch, with an app that could send alerts to users when it was time to eat. I sketched out rough flows that embodied these content areas which I used to render low-fidelity mockups in Sketch. I created an Invision prototype with two options and solicited feedback from fellow designers, who steered me in the direction of the more dynamic layout.
After extensive image research, I dropped my assets into Sketch and saved them out using image compressors to minimize file size. I iterated through a few high-fidelity mock-ups and solicited critique from potential consumers and colleagues. Feedback led me to consider whether the audience for the product was clear enough—I decided to use movement to express the brand more clearly, which I roughed out in an Adobe After Effects animation. Throughout development I shared my work-in-progress with colleagues who weighed in on various design and coding challenges. I used CSS Grid Layout combined with Flexbox for the structure of the site, and Javascript with the Scrollmagic and GreenSock Animation Platform libraries for the animation. I also made good use of browser development tools, particularly Firefox’s grid inspector and responsive design mode.
I was glad that I wasn’t forced to make any major design compromises during the development process, which I anticipated might happen. I did have to adjust my animation plan—luckily, the result was a better fit in the end. After testing the site on iPhone, Galaxy Note, iPad and iMac, I shared it with a handful of users. Here are some of their comments:
“Wow! This is great. The page is very clean and has great white space.”
Aidan
“Easy to navigate... I like the large text with nutritional info.”
Allison
“Your site looks amazing. Clean design and I love what you did with the shapes!”
Amanda