I created three different versions of website designs for a company that creates custom-made beer, chocolate, milk tanks, and much more. To redesign the website.

The purpose of the project was to completely redesign the structural and visual appearance of the website. The client wanted me to start from scratch and come up with a completely new concept for the website design.

The client wished to focus primarily on the UI part, not so much on research. So, I was a bit limited on the research part, but I managed to conduct some competitor analyses and received some initial input from the client regarding their vision. As the project progressed, the client had their very specific vision for the visual aspects they wanted.

My responsibility was to gather the necessary information from the client so that the design would align with the client's vision. This proved to be the major challenge.

I went through a number of steps in order to achieve the three different designs:

1.) Competitor analysis.

2.) Creative sessions, diverging and converging.

3.) Creating a bundle of sketches to discuss with the client what kind of ideas are the best.

4.) Creating wireframes to put the structure in place.

5.) After that, I created three visually different designs with different color schemes to show the client what kind of different visual options there are and whether they will accept it.

The project lasted for a couple of months.

The first thing to do was to map out the sitemap and make any necessary changes.

On the right side, you can see the end result of the creative session. The concept on the right side is presented in an oversized, concise, and compact way to convey the important parts of the new design and what should be changed.

After my client and I had established the concept and approved it, I started to create different sketches in order to make the ideas visual. For that, I used a program called Figjam where I created the initial visual ideas. After that, my client and I critiqued the sketches, and I made the necessary changes.

The wireframes that were created were made directly after sketching. The purpose of the wireframes was to show and place the elements correctly so that the structure of the elements, the overall hierarchy, and the patterns used on the website could be established as part of the process. The pattern that was mainly used on the website was a Z-pattern.

As the last big step in the project, I created a style guide and the prototype. The prototype was made in order to give an understanding of how the newly redesigned website will look. In the end, I created three different versions of visual styles in the project and also developed three different color scheme variations.