Freshko

website redesign
‹›
🔒 freshko.bg
↗+
Freshko website redesign hero showing juice bottle among fresh oranges
role
UX/UI Designer
project
Self-initiated redesign
timeline
2 weeks
date
May 2025

I started by listening

Before touching the visuals, I ran a moderated usability testing where I sat with users in real time so I could analyse their behaviour, listen to their comments, ask follow-up questions and watch problems happen. As expected, it gave me far richer, more contextual feedback than a survey would.

Site structure

Disorganised hierarchy made product discovery frustrating.

Conversion blockers

Users abandoned flows when they hit broken links or unclear next steps.

Brand perception

Visual design did not reflect the premium nature of the products.

I also mapped two distinct audiences whose needs barely overlapped — retailers vetting Freshko as a supplier, and end clients just trying to find a flavour and where to buy it. The old site served neither well.

Wholesale Partners

Looking for:
  • Sourcing details
  • Bulk pricing structure
  • Quality certifications
  • Distribution logistics
  • Partnership terms
Grocery store aisle with fresh produce shelves

Individual Consumers

Looking for:
  • Product ingredients
  • Retail locations
  • Brand story
  • Subscription options
Woman shopping with basket at grocery store

Where competitors fell short

I ran a competitive analysis against similar juice brands to separate what's now table-stakes from where there was room to stand out.

Freshko
Fresh Bros
Queen's
Cappy
Florina
Consistent Brand Identity
Yes
Yes
Yes
Yes
Partial
Intuitive Navigation
Yes
Partial
No
Yes
Partial
Site Architecture
Yes
Partial
No
Partial
No
High Accessibility
Yes
No
No
No
No
Product Catalogue
Yes
Yes
Partial
Yes
Yes
High-Quality Media
Yes
Yes
No
Yes
Partial
Individual Product Page
Yes
No
No
Partial
No
Online Order
Partial
Yes
No
No
No
Highlighted Advantages
Yes
Partial
No
No
No
Technology Process
Yes
No
No
No
No
Contact Form
Yes
Partial
Yes
Partial
No
Social Media Links
Yes
Yes
Partial
Partial
Partial
Responsiveness
Yes
Yes
Partial
Yes
Partial

Time for an audit

I audited the existing website in seven parts: Hero, Product list, Advantages, Technology, Additional info, Where-to-buy, and Contact, annotating every usability and accessibility issue and pairing it with a fix. This turned a vague 'it feels off' into a concrete, prioritised work list.

Easy-to-miss subheading
!
It is not very readable due to the background picture making it easy to miss.
✓
Represent the strong sides of the product in a more eye-catching way.
Scroll down Button
!
The button is clickable but inactive.
✓
Remove the button or make it active with a 'Scroll Down' animation.
Audit Hero Section
Main Menu
!
The button blends in with the design making it hard to notice. Upon opening and closing, the animation of the appearing side menu is a bit too slow. One of the linked pages leads to an 'Error 404' page.
✓
Make the menu more visible, faster and easier to navigate. Remove any misleading page links.
Products' cards
!
Some of the product titles and descriptions are clickable leading you to the hero section.
✓
Remove the clickable text to avoid user confusion.
Audit Product List
Audit Advantages
Selling points
!
The icons and the grey background does not emphasise enough the selling points of Freshko.
✓
Bring more attention to the information making it easy to be noticed by the user.
Low accessibility
!
The description in white color has low contrast with the bright yellow background.
✓
Make the text more readable improving the contrast ratio and its accessibility.
Audit Technology
Audit Additional Info
Broken Links
!
The user could hardly recognize the bolded text to be an active button.
✓
Remove the link and place it in the page dedicated specially for the technology process.
"404 error" Page
!
The user could hardly recognize the first link as an active button (it is only slightly bolded compared to the rest of the text). Both of these links lead to an empty page instead to the right one.
✓
Make the text links more noticeable with the corrected page linked.
Green Section Functionality
!
The green background is once used as a Title divider and once as an informational/CTA message. The contrast between the text and the background makes the words hard to read.
✓
Make the title more readable and the CTA message more noticeable.
Audit Where-to-Buy
Easy-to-miss information
!
Too much information that is important but easy to miss by the user.
✓
Make the information easier for the user to understand at a glance using icons/bullet points and cards.
Missing footer links
!
There are links of the different sections/pages of the website that could be added for better navigation.
✓
Add the pages so that the user could easily navigate the website once they reach the footer.
Audit Contact Footer
Contact Links
!
There are social media missing.
✓
Add links to the active Facebook, TikTok and Instagram pages of Freshko for increased credibility.

Wireframing the new flow

I sketched several directions for the hero and product menu, then committed to a full digital wireframe before adding any colour.

Hand-drawn pencil sketches
Pencil wireframes
Digital wireframe printouts

Fresh design system

Freshko Design System

The redesign - one decision at a time

Every change traces back to a finding. The menu became easy to scan; flags became labelled language abbreviations for colour-blind users; product photos were re-shot at higher quality; selling points and the technology process moved up and got room to breathe.

New Menu
✓
The menu is easier to find and faster to navigate without any unnecessary animations.
Noticeable selling points
✓
The main selling points and advantages of the products are presented right away.
Technology illustration
✓
The background is lighter color making it easier for the illustration to be read and understood.
Where to buy information
✓
Is it better structured and presented to the user.
Social Media links
✓
Added icons with links with the active social media profiles of the company.
Freshko Redesign Full Page
Hero Image
✓
Better hero image keeping the same natural feeling of the original one but with better quality.
Product menu
✓
The catalogue of products is presented through a menu making it more interactive for the user and showing the content the user is interested in only.
Additional Information
✓
The additional information regarding the production process is presented through slides making it more interactive and concise in size.
Contact Textfields
✓
A textfield requiring the names of the sender is added as well as placeholder texts.

Reflections

What this project taught me:

Separate assumptions from user needs

Early testing showed users approached the product differently than I expected - a reminder to let research lead, not personal bias.

Accessibility is a mindset, not a checklist

I learned to prioritise inclusive design before aesthetics - and let it shape the palette from the start.

Iterative design is crucial

Fast cycles of prototyping and testing surfaced insights faster than polishing a single solution ever would.

What I like in the design:

Clean visual hierarchy

The typographic scale and whitespace create a natural reading flow that guides the eye without competing elements.

Consistent card system

The repeating card pattern with uniform padding and structure creates visual rhythm and scannability.

Strong content strategy

Each takeaway is concise and actionable — titles hook attention and body text delivers real insight.

What I would improve:

Add more visual variety

The uniform card layout works well but introducing subtle variation in size or imagery could create more visual interest.

Strengthen the colour palette

A bolder accent colour or gradient touches could add energy and draw attention to key moments in the page.

Include more tangible evidence

Adding metrics, before/after screenshots, or user quotes would ground the takeaways in concrete results.

NEXT CASE STUDY

da.care

The key design decisions behind da.care's ecosystem AI products