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 a belief in our product; A Japanese snack made out of 100% dried sweet potatoes.
Our aim was to create a brand tailored to active, health-centred individuals. We asked ourselves two main questions:
How can bring a foreign product into a highly competitive, health-food market full of well-established Aussie products?
How can we use branding to bridge cross-cultural differences and communicate health benefits?
Want to see the final website before continuing?
Click here
Project Overview
Hoshi-imo is a traditional Japanese snack, celebrated for it's naturally sweet flavour and satisfying chewy texture.
It has impressive nutritional benefits and a clean ingredient profile, however has yet to enter the Australian health food market.
Rising demands for health foods and superfoods have created strong potential for this product to thrive in the local Aussie market.
Examples of traditional Hoshi Imo packaging
Things I learned
Always centre the client
Making sure creative direction aligns with both client's vision, and my own ideas. And don't make assumptions on what the client wants. This will save a lot of time later on.
Prioritise visual clarity
Putting too much information/visual content on the UI impedes on the clarity of the actual message, or what we're trying to convince the viewer of.
Who are we Designing For?
Opportunity
Many "health-food" products on the market don't meet the standards of today's health-conscious consumers
Our product offers a solution for this problem. This opportunity must be communicated as the core purpose of the brand.
Demographics
Busy People - constantly on-the-go, don't have time to eat full, proper meals
Health Fanatics - skeptical of unknown ingredients
Active People - Regularly exercising, prioritising physical activity
Health Food Stores
School Canteens
Competitor Analysis
In understanding our market space, we decided to research other brands and see what we did and didn't want for our brand messaging.
Example branding concepts we took inspiration from
We then synthesised our competitor analysis 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
Dislikes
Text-heavy packaging that overwhelms the eye
Visual styles that feel overly serious, sterile, or corporate
"Trendy" aesthetics that might feel dated or lack longevity
Character Development
Creating memorable and recognisable iconography
People should want to be seen carrying the product around; Not only is it a healthy snack, but also a signifier that you care about your health.
Creating "Beni"
Iterations based on feedback
Carrying through iconography of star symbol
Character needed movement - allow consumers to envision themselves doing the same activities as "Beni".
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.
Creating a Secondary Character
Logo Creation
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.
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 in black and white
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
It was very important to the client that the colour palette 'popped out' when customers walk down a supermarket aisle; Something that will catch their eye and draw their attention.
What better way to research this, than to see what jumps out at me when I go to the grocery store?
I took photos of grocery items that popped out at me and analysed their colour schemes.
I 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
Iterations
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.
Colour Scheme Final Picks
To help narrow down and select the most suitable colour palette, we explored how each option would perform in context across a website interface.
Colour Exploration in Website Context
Final Colour Palette
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.
Typography
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.
Thought Processes
None of these font pairings represented 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 use 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
Final text type
Key Contributions:
Wireframing
Mockups
Web Development
Responsive Design
SEO Optimisation
I met with the client and we collaboratively constructed a navigation map including 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 prototype
I made sure to stay in constant communication with the client to align aesthetic direction.
My goal was to speak to the natural, single ingredient feature of the product, so I decided on using fruit sticker-like buttons for the navigation bar.
** This was idea was later scrapped due to usability issues
Fruit Sticker buttons used in UI
Enhancing Readability
Screenshots from Figma mock up (bottom-left) and iterated mock up (right) showing refinements made
Changes made:
Added iconography to each type of product displayed to improve recognisability and take the weight off the users' cognitive load
Removed unnecessary stylistic features (such as arrows)
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
Having no web development experience, it was important to learn basic fundamentals first through repetition.
Eventually, I learned the language of Framer, and delivered a working website and all necessary assets and components, enhancing replicability and consistency.
Key Factors Considered:
Health Value Communication
Highlight the nutritional benefits of the product, specifically the single ingredient benefits, and 'clean eating' lifestyle. Include relatability of the target demographic by showing where the snack can be eaten and acknowledgements of the 'active lifestyle'.
Intuitive Navigation and Flow
Prioritise scroll-first, limiting the amount of times users need to navigate around the site with clicks reducing mental effort Include CTAs on every page to prompt users to explore Ensure information hierarchy feels natural and intuitive
Interactive, Playful Elements
The interactivity within the website needs to reflect the playfulness of the brand image; Micro-interactions such as hover effects, parallax scrolling or imagery that's animated on scrolls Scroll interactions will increase engagement and also prompt users to explore the website further Ensure that the motions guide rather than distract from the content
Stylistic Layering
Creating depth through multiple assets and components will give a tactile feel, and reinforce the natural brand identity
Health Value Communication
Website landing page
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.
Section break moving banner
Moving banners were used to 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).
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.
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.
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
About Page
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 that appear sequentially as the user enters this section. This element communicates the fun playfulness of the product and branding.
See the final website here!
Click here
