Beni's Sweet Potato Chews
Freelance Project
Role
Brand + Concept Design
Web Design
Timeline
January 2025 - Present
Skills
Concept Development, Visual Design, Web Design
Building from the ground-up, we started off with nothing but our product; A Japanese snack made out of 100% dried sweet potatoes, and an end goal: To create an experience tailored to on-the-go, active, and healthy individuals. With these two things in mind, we created Beni's Sweet Potato Chews (Beni's for short).
Project Overview
Hoshi-Imo
is a traditional Japanese snack made by steaming, slicing, and drying Japanese sweet
potatoes. A specialty of Ibaraki Prefecture, it's celebrated for its naturally sweet flavour and satisfying chewy texture. Despite its impressive nutritional benefits and clean ingredient profile, Hoshi-Imo has yet to make its mark commercially in Australia. With the rising demand for health foods and superfoods, there exists a strong potential for this product to resonate with Australian consumers and thrive in the local market, which is what we were tasked with.
How can we bring a completely foreign product from Japan into a highly competitive, health-food market full of well-established Aussie products?
How can we use branding to bridge cross-cultural differences, communicate health benefits, as well as differentiate ourselves against local competitors?
Throughout this project, I learned the importance of aligning creative direction with both the client’s vision and my own design instincts. There were many times where I veered off onto my own direction, failing to always have the client's needs at the forefront of every decision. Learning this early on saved me a lot of time later on. I also learned the importance of visual clarity- often I got caught up in prototyping without realising the amount of information I had placed on the screen. This impacted communication with users. Overall, this project really sharpened my client-designer relationships, and my ability to work rapidly in a small team with different ideas and skills.
What I learned
Who Are We Designing For?
Opportunity
Despite the abundance of so-called "health foods," many products on the market still contain processed ingredients and additives that don’t meet the standards of today’s health-conscious consumers.
The product we're designing for offers a solution for this gap, and this opportunity must be communicated as the core purpose of the brand.
Busy People: Constantly on-the-go, don't always have time to eat full, proper meals
Health Fanatics: Skeptical of unknown ingredients, preservatives, preference toward wholefoods
Active People: Exercise regularly, prioritise physical activity
Health Food Stores
School Canteens
In understanding our market space, we decided to draw inspiration from other brands that were doing similar things, or had a marketing strategy and style that resonated with our demographics.
We noted down aspects of each brand that we found successful and unsuccessful, focusing specifically on aesthetics and brand messaging. We then synthesised our notes into actionable insights outlining inclusions and exclusions for our own brand.
Likes
Cohesive and bold colour scheme (no more than 4 colours)
Playful and unserious: A fun design with big text, bright and colourful
Visually striking and instantly memorable
People should want to be seen carrying them around; Not only is it a healthy snack, but also a signifier that you care about your health
Characters/icons used in branding and packaging that creates 'liveliness' and personality
Dislikes
Text-heavy packaging that overwhelms the eye
Visual styles that feel overly serious, sterile, or corporate
Trend-chasing aesthetics that might feel dated or lack longevity
Creating Beni
This also helped give context to such a new product without having to explain it with words; It answers the questions: 'Where do I eat this snack?', 'When should I?'.
We set out to design a character that embodies the feeling of self-care — not just through its look and pose, but through its entire vibe. When someone reaches for a snack, we don’t want them to think only in terms of what's healthy. We want them to see Beni as something more meaningful — a gentle reminder that choosing to eat well is really about choosing to take care of yourself.
First Round Rapid Ideation
*All designs created on Procreate
We decided to incorporate more movement in the character. The product is targeted toward 'active people', so allowing consumers to envision themselves doing the same activities as Beni allows a deeper connection with the brand.
Second Round Rapid Ideation
Final Iteration
Through further iterations and refinements, we collectively decided on this character to be 'Beni', and went ahead with the star icon on the belly. We agreed on features such as the legs and arms being seperate from the body and the three freckles on the cheeks.
Introducing 'Chad'
Creating The Logo
Without much guidance for logo design, we knew we had to stick to our 'likes' and steer away from our 'dislikes'. We started randomly ideating, knowing we wanted something fun, playful, and striking.
The client was most drawn to the logo with the potato outline, so we decided to iterate further, refining the features, removing the 'sketched style' and improving clarity.
From the Final Logo, the client also wanted alternative logos to use in different contexts such as for the website, favicon, and packaging. We created the following final logo collection as the following:
Final Logo Collection
The final logo collection is something that speaks to all aspects of the product; The smooth roundness of the lettering, and particularly of the star mimic the texture and taste of the sweet potato chew product, as well as represent the playfulness of the brand and what it represents. The shape of the logo, particularly in the short logo shows (not tells) the actual product itself without being too on the nose. The incorporation of the star contributes a sense of energy and vibrancy behind the brand whilst also adding to the aesthetic appeal, breaking monotony.
Colour Exploration
The client wanted a colour palette that 'pops out' when the customer walks down a supermarket aisle; Something that will catch their eye and draw their attention.
I decided to conduct my own research and take photos of grocery items that popped out at me during my weekly grocery shops. I analysed their colour schemes and found a common recurrence: Most colour palettes used a variation of a complementary relationship between either their main background colours, or between two accent colours.
It almost felt like pure luck that the colour of the skin of a Japanese sweet potato was purple, and the inside was orange; A great example of complementary colours.
However, we weren't certain on which shade of purple and orange would be most effective at 'popping out' at customers during their grocery shop. As our client was set on a dual colour scheme, we trialed and errored with several shades and combinations of the orange and purple.
Logo Colour Scheme Ideation
Beni Colour Scheme Ideation
We realised that the dual colour scheme was too limiting. The client realised that the 'retro vibe' of the colour scheme was also not fitting of how she wanted the brand to be marketed.
Colour Scheme Ideation Round 2
Deviating further from the aforementioned 'retro style', we started ideating with more unconventional colours. Although this did not adhere to our previously mentioned purple and orange colours we thought we'd be using, it was important to us to move on for exploration purposes.
Colour Scheme Ideation Round 3
We collaboratively decided on the top 4 colour schemes that we thought aligned with our criteria (likes and dislikes), as well as being eye catching and cohesive.
Top Colour Combinations
To help narrow down and select the most suitable colour palette, we explored how each option would perform in context—particularly how the colours would work together across a website interface.
I decided to take a wireframe prototype of the website I was developing and make a mid-fidelity, non-interactive version using the different colour palettes.
Colour exploration in Website Context
We made the decision to go with colour combination 1, as it was the most visually effective and cohesive across all contexts; Website, logo, and character design.
This palette also provides a nod to the purple and orange in the potato, which effectively communicates the original Japanese sweet potato.
Final Colour Palette
I found that aligning your mental model with the client and finding a balance between personal stylistic preferences, and that of the client's, is difficult to attain, but bridging this gap earlier on saves lots of time and resources.
Font Type
Choosing the right front that aligned with both the client's vision, and my own personal interpretation of the intended style was difficult.
I created a multitude of options for font type including primary (titles and headers) and secondary font types (body text), and worked closely with the client to work out what they wanted exactly.
Font Pairing Ideation
None of these font pairings were quite right for the client, and didn't represent the brand well enough.
How can we create a font pairing that walks the fine line of being playful, bold, and fun, whilst still being able to be taken seriously, and not come off childish?
Taking inspiration from other product websites that are doing similar things.
All these websites used a bold, playful logo typeface, combined with a clean and simple text font. This contrast made the websites and brand feel more dynamic and expressive, but also more legible. The simplicity of the text enhanced the creativity of the logo and created an effective balance that reflects both the personality and professionalism of the brand.
Heading Text
Typeface: BN Cringe Serif | Weight: Medium | Size: 40px
Body Text
Typeface: GT Alpina Typewriter | Weight: Medium | Size: 16px
Developing the Website
Key Contributions:
Wireframing
Mockups
Web Development
Responsive Design
SEO Optimisation
Wireframing
I met with the client and collaboratively constructed a navigation map to identify each section of the website that she wanted, and most important features of each page. This way, I could save time and effort in creating aspects of the website that were irrelevant.
In this phase, it was important we create the best Minimum Viable Product (MVP), so that time and effort wasn't wasted, and that I'd have something to show quickly as we move up in fidelities.
Navigation Map
Mockups
Using the font pairing and colour palette, I created a series of mockups to gain an understanding of general style and tone of the website, with constant feedback from the client and back-and-forths to align aesthetic direction.
I wanted to speak to the natural, single ingredient features of the product, so I decided on using fruit sticker-like buttons for the navigation bar,
It was important that legibility and accessibility was maintained, prioritising this over aesthetic value.
Fruit Sticker Buttons for Navigation bar
Enhancing Readability
Screenshots from Figma mock up (bottom-left) and iterated mock up (right) showing refinements made
Added iconography to each type of product displayed to improve recognisability and take the weight off the users' cognitive load
Removed stylistic arrows and slang 'Yeah Nah', and opted for a simple cross icon
Narrowed the scope of our health factors to the top 5 most necessary
Used accent colours in the Beni's column to highlight the success of the product in terms of health
Creating the Website
After having client approval for the prototype created on Figma, it was time to put it together on a web builder. After a few recommendations from different website designers, we decided on Framer as the most suitable, no-code builder.
As this was one of my first times using a web builder, it was important to learn the necessary steps, and due to the collaborative nature of the project, to create the necessary assets and components to enhance replicability and consistency throughout all pages of the website.
Key Factors Considered
Health Value Communication
Screenshot from landing page of website
The positioning of the product as a healthy snack is emphasised straight away in the landing page as a film photo of 3 hikers can be seen. No product in-situ as of yet (due to constraints), but the image and use of the word 'adventure' centre the branding on first glance.
Website section break moving banner
I decided to include a tilted, moving banner in several places around the website as a page break, with the tilt subtly drawing the users attention downward to the other sections of the page.. The movement of the banner keeps the users' experience from feeling monotonous and helps maintain attention whilst showing the pages' liveliness (motion = energy). Along with the green included, also draws their attentions to the health benefits of the product.
Screenshot of section break banner in-situ just past the landing page (left), and section break in the footer (right)
Iterations of home page section break: Pre-iteration (left), post-iteration (right)
The initial 'Beni Loves You' wording felt a little direct and fell short of communicating the brands' adventurous and health-centred values. Thus, I decided to use imagery consistent with the landing page; A heartwarming film image of two figures in a natural environment, emphasising that 'the product cares' about it's consumers health both emotionally and physically, which feels more in-touch with users than the previous iteration.
Screenshot of nutrition breakdown (Home page)
Communicating the nutritional value in small, compartmentable sections enhances user understanding and reduces the cognitive load needed to read larger sections of text. Each nutritional fact is broken down into two sections, one explaining quantities of each health benefit, and the second showing exactly what the health benefits are.
Intuitive Navigation and Flow
Beginning of About Page, showing an outline of the different sections
To aid with navigation and guide users through the About page, I included a sticky side menu that updates based on what section the user is currently viewing. This motivates users to explore the different sections of the page and helps with the flow as they scroll.
I also included a leading line toward off the screen, prompting users to scroll further and explore more.
Interactive, Playful Elements
Footer section
In the footer of the website, I included an assortment of stickers made by our graphic designer, that appear sequentially as the user enters this section. This element communicates the fun playfulness of the product and branding.
Interactivity in the 'About' Section
I also included a series of micro interactions with moving elements as the user scrolls down through the page. Images and iconography move with each scroll taken by the user, bringing life to some of the characters we created with Beni's branding.
Have a look here
