WEB DESIGN / VISUAL DESIGN

BerrySoup

Context

BerrySoup is a personal non-profit project I took on, providing free to download desktop and mobile wallpaper versions of my digital art. This project started out as a hobby and something to stimulate creativity, but now it's a project I hold close to my heart.

  • UI Design, Front-end, Visual identity

  • Non-profit, public

  • HTML, CSS, Javascript, Figma, Procreate

  • 2022-2024

Results

Demo /

Above is a quick demo of the 2025 re-designed BerrySoup account which features all the wallpaper art and visuals that I’ve created.

password: berrysoup

Re-design process

The images above show the previous and original design of BerrySoup’s website back in 2022.

The main problems found in this version from user feedback would be:

  • No zoom in feature

  • difficult to find and click the download button

  • Wallpapers could be streamlined

  • Overall design and style is lacking, doesn’t display BerrySoup’s personality through the website properly

Problem /

Made a user flow diagram and sketches to organize my ideas /

To have a better guide on how to start and what exactly I wanted to work on, I started out with a couple sketches and a rough user flow diagram.

I started to draft ideas for the re-design /

With the feedback provided, I made a quick wireframe to visualize an apparoch to solving these usability issues. This would include the zoom-in feature, clearer download buttons, and matching that BerrySoup style and design within the site.

Ran into some unexpected challenges and changes /

While putting together the website and the intial design I had in mind, there were alot of shortcomings I didnt realize and limitations within the web builder I had decided to use.

Some mentions:

  • The zoom-in feature didnt exactly work the way I planned since squarespace had a similar feature avaliable. Because of this, the plan shifted as I no longer needed an icon as previously mapped out.

  • I opted for a download button rather than icon due to issues within the web builder

  • Added a new light yellow colour to the palette as an accent colour for CTA’s

  • Re-organized the homepage since it felt way too cluttered once I actually started to implement it

  • Reduced the amount of CTA’s on the homepage

  • Removed the mustard yellow colour, felt out of place in the palette

Reflecting on the final iteration, I would say it 100% reflects the brand concept now compared to before. The previous usability issues have now been resolved, while the overall user experience had been drastically improved from the original version in 2022.

I’d say that my main key takeaways from this re-design project would be:

  • Design Is Never Truly Final.

    One of the biggest lessons I learned is to never assume that your high-fidelity wireframe draft is 100% complete. Unexpected challenges will always arise, and being adaptable and ready to solve problems on the go is crucial.

  • Design Is Full of Choices.

    There are often many valid ways to approach a design, which can make it difficult to decide which direction to take.

    What helped me was focusing on three key factors:

    • Cross-platform consistency

    • Intuitiveness of the user experience

    • Contribution to or potential harm to the overall structure of the product

  • Design with Purpose

    It's essential to always keep in mind who and what you're designing for. Your design decisions should align with the brand identity and the visual concept of the client, organization, or project. Staying true to that vision ensures a cohesive and meaningful user experience.

Final iteration /