Holvoet Gebroeders

I had 3 weeks to design the look of the Website. I chose to adopt the double diamond method. This means that I first discover and define the problem we have to solve after I continuously develop, test, and iterate until we have a final product.

We conducted an in-depth competitive analysis to identify the best practices in data visualization and if there are any opportunities to improve. A visual competitive analysis is a process of comparing the visual elements of a website or design to those of its competitors. Here are some steps we used to conduct a visual competitive analysis:

• Identify competitors: Research and identify the main competitors in your industry or niche.
• Gather examples: Collect screenshots or examples of their websites, apps, and other design elements.
• Categorize: Organize the examples into categories, such as layout, typography, color scheme, imagery, and user interface elements.
• Compare: Analyze the examples and compare the visual elements of your competitors' designs to your own. Take note of similarities and differences, and identify any patterns or trends.
• Evaluate: Evaluate the effectiveness of the visual elements in each example, considering factors such as user experience, branding, and overall aesthetics.
• Create a report: Create a report that summarizes your findings and includes examples of visual elements that you would like to incorporate into your own design.
• Design: use the information gathered to improve your design and stand out from the competition.

It's also good to remember that it's not only about copying the competitors but it's about understanding the industry's trends and user's needs and preferences to create something that stands out and offer a better experience.

Define

Using the data we’d collected from our research, I began synthesizing it all into design principles that I had to follow in order to create the best look and experience for the users.

‍

Visual exploration

I crafted 3 different mood boards that helped me get the feel of how the interface should look. Creating this quick moodboards I was able to have a collection of visual elements, such as images, colors, and typography, that are used to communicate the design direction for a website project. They can be used to convey the overall aesthetic, tone, and style of the website to clients or team members. To create a moodboard, you can gather inspiration from a variety of sources, such as other websites, design blogs, and social media. You can also use design tools, such as Adobe XD, Canva, or Sketch, to create a digital moodboard. It's a good practice to include a brief explanation or notes about the elements included in the moodboard and how they align with the project goals.

Iterations

Based on the recommendations we got from our users, we include changes to the layout, design, functionality, and content of a website. It is a common practice in web development as it allows for a website to evolve and adapt to the changing needs of users and business goals. The number of iterations can vary depending on the complexity of the website and the resources available for development.

Micro-interactions

Wow, fancy

Micro-interactions are a really good way to make the platform more dynamic and engaging. I decided to explore some micro-interaction we could implement to make the website more interactive.

‍

‍

Prototyping testing

A few more changes

After putting everything together I was able to create a prototype to test and have the client provide us with feedback.

‍

‍

Final Design

‍

‍

Desktop

‍

‍

‍

Mobile

‍