How Your Dairy is Made

A website design and development project.

Figure 1: The Landing Page to our website.

Description

IAT 235 is a second-year program that introduces the theory and practice of designing visual representations of information. The final assignment is an educational website with the purpose to be informative, visually pleasing, easy to navigate, and responsive on large screens.

My teammate and I chose the topic of the current dairy industry and the exploitation of cows. However, part of the challenge was to keep everything i nformative and unbiased as opposed to attacking the industry. View the site here.

Audience

The audience our site aims to attract are ordinary people who don’t need to learn how to read scholarly articles, while still being concerned about where their food comes from. Below is a persona that I created to help the team understand what we wanted to achieve:

Figure 2: The Persona I created.

To achieve this, the site had to be easy to navigate, well organized, and void of complicated wording and graphs. This ensures that the site is easy to understand for everyone, which helps in keeping the interest and attention of our users.

Art Direction

Unlike most educational sites that are filled with paragraphs and paragraphs of dull information, my teammate and I had to strategize a way to keep the site interesting while being able to educate the user. To achieve this, we had to find a visual style that was unique. One of the biggest inspirations of the site’s visual design is here. My teammate and I took inspiration from the site's mix of real photographs and flat graphics. Some examples of these are shown below.

Figure 3: Inspiration we took for our art direction.

At first, we chose a monochromatic colour scheme. However, we realized we needed to add a brighter and distinct colour to use to emphasize things:

Figure 4: Our colour pallete.

Information Design

The biggest challenge of the site was designing an infographic that represented the process of the dairy industry both accurately and in a way that is visually pleasing. Our first attempt was to display a simple cycle. However, we underestimated the complexity of the process and failed to make sense with the initial graph.

Figure 5: The first iteration of our cycle.


We realized we had to completely abandon the old design and rethink the process. Previously, we were limited by the idea of the graph has to be a cycle. Coming up with a new infographic that was both accurate, visually pleasing, and easy to follow was extremely challenging. First, we abandoned the old design completely. After doing more depth research on the system of the dairy industry and looking at how other designers represented complicated systems with infographics, we were able to come up with a new dynamic infographic.

Figure 6: The inspiration we took for our final cycle design.

My teammate and I were extremely happy with the final product, we thought it was accurate and the biggest improvement from the old iteration. We decided that the best way to represent the information was to split the graph into two with male and female. Unlike the old iteration, the new one had time stamps and showed both male and female sides. We were even able to include the old repeating cycle.

Figure 7: Our final cycle design.

Reflection

This project was my first experience with developing and designing a website. I learned how to use tools and technologies such as HTML, CSS, JavaScript, and Axure, as well as new skills such as information design. If I could do anything differently, it would definitely be to consider the responsivity of the site, so as to implement a mobile version as well.

Reflecting back, we relied a lot on using images to create the intended layout and visuals. However, this cause the loading speed of the site to become extremely slow. After this experience, I've learned to rely more on code instead of images.

Figure 8: Our webpage containing our cycle design.