In a cluttered market, f(x) foods stands out by making bars that focus on having healthy ingredients that help the brain and heart.
As a first-time project lead at Scout Studio, I led a team of designers and developers to create a brand that was eye-catching, friendly, and clean, as well as an accessible marketing & e-commerce site that reflected the brand.
In this project, I oversaw and spearheaded the illustration & visual style of the site, the research & UI/UX process, team interaction, and client presentations.
f(x) foods, led by founder Sophie Gechijian, was looking for a redesign of their brand, as well as the creation of a marketing and e-commerce site.
Having previously never worked with a graphic designer, it was up to the team to create a brand that was eye-catching, friendly, and clean. It was also up to the team to create a site that reflected this brand, while also providing an easy way to buy the products online.
Research & Brand Development
To kick off the project, the team started with conducting extensive research into how people interacted with snack bars. Was horizontal or vertical packaging something that made information on bars hard to read? What did people like to see in snack bar packaging? These were all answers that we wanted to know, and took into account as we began to brainstorm.
In figuring out the brand, I lead the team in conducting brand exercises with our client, Sophie. Through our exercises, we figured out that Sophie wanted her brand to be friendly, eye-catching , and informative.
At the end of this phase, we had a fully-fledged out logo, as well as brand colors and type that reflective of the research we had conducted.
Marketing & E-commerce Site
I led the process of wire-framing and site-mapping the marketing site and the e-commerce flow. To do this, user stories were created based on the client’s priorities. After a sitemap had been written out, we moved into creating lo-fi wireframes for each page of the website and e-commerce flow in fast, weekly design sprints. Once they reached their finalized layout, we were ready to move on into hi-fi designs.
Style tiles (shown above) were presented to the client to gauge what direction to move towards for the website.
As the brand was beginning to solidify, we pushed the design of the website by creating hi-fi wireframes that united the marketing and e-commerce functionalities with the brand with the visual brand we had been exploring simultaneously.
With the progression of the project, the core of the branding became centered around high quality photography & textured illustrations. A library of photography and illustrations to be used in throughout brand was created.
Shown on the left are some initial hi-fi explorations of the homepage.
Final Product (Website)
With the feedback we received from the client as well from each other, we continued to push the design of the website. I oversaw the coordination between our designers and developers, and was in charge of styling all screens so they were consistent across the platform and with the brand.
My other team members included Kyle Bianchi, Graphic Designer and Photographer; Fiona Gridley, developer and UI & UX Designer; Jena Goldman, Graphic Designer; and Marie Yatsyk, developer and UI & UX Designer. The wide scope of skills that the team possessed allowed a great degree of collaboration, efficiency, and production of high quality work in a short period of time.
You can view the live site here!
Selected Pages of E-commerce flow
I created a set of illustrations to be used primarily in the packaging as well as for the website.Textures were used to give the illustrations a classic, hand-worn appeal that spoke to the friendly, home-grown nature of the snack bars themselves.
I also created a second set of more icon-like illustrations that lives on the website’s about page. You can see them here.
The packaging of the snack bars themselves was another big focus within our project. As packaging was something that was relatively new to all members of the team, we experimented with the process by creating packaging wireframes.
With two products (and potentially more products to come), we wanted to create a brand that could be consistently varied across each product. We also wanted the bars to stand out on a shelf, as well as instantly tell you the information you want to get from it: what’s in the bar!
You can see these newly-packaged bars for yourself out in the wild at local grocery stores and coffee shops around Boston.