top of page

A Rapid Redesign of the Bruery Website


The Monotonous E-commerce Websites

Wix-like Tools are helping as well as Harming
the Small and Medium-sized Businesses

The Bruery's official website looks very much alike to all its competitors, and vice versa.

Although template-based visual web development tools like Wix can quickly and conveniently produce attractive websites, these sites often look very similar and can't stand out from the crowd.


Small and medium-sized enterprises should still consider hiring dedicated designers to create a unique visual system, enhancing the company's visual recognition. Intensive use of illustrations is a viable approach, and with the rise of AI, this process has become extremely cost-effective.


Looking for Affordable Methods to Make a Website More Recognizable

I tried something new in this case.


First of all, is the "desktop websites mobile-applicationized", which means applying mobile app thinking to desktop websites. This includes minimizing screen scrolling, trying to fit a whole category within a single screen, using individual cards instead of arrays to display products, and pairing rich content with a simple UI, etc. I hope this approach can make it easier and quicker for customers to understand the products of small and medium-sized enterprises, leaving a lasting impression.


In addition, I also used an illustration generated by AI. This makes the website so much eye-catching. And AI image generator like MidJourney really helps to significantly reduce the cost of getting an illustration.

Lastly, and most painfully, was the attempt to use a lot of animations to make the website look more appealing. However, this pushed the limits of Figma. Although Figma can handle very complex individual animation scenes, it lacks dedicated animation creation tools, which means it's not suitable for extensive, non-linear animations throughout the entire user flow process.

Time to learn something new.


Copyrights of all photos and videos in the prototype belong to the Bruery. They are just for practice, not for business purposes. Will be removed if required.

截屏2023-10-03 下午5.48.10.png
截屏2023-10-03 下午5.48.12.png
截屏2023-10-03 下午5.48.15.png
截屏2023-10-03 下午5.48.17.png
截屏2023-10-03 下午5.48.20.png


Final Prototype

bottom of page