← Return

University District Food Bank

Spring 2022 • HCDE 508 (Visual Communication) • 10 weeks

#School #Design #Prototyping #Figma

Description

Through this studio course, I revisited fundamentals of visual design & composition and learned how to apply these principles when analyzing and improving an assigned brand identity. My "client" was the University District Food Bank, a food bank in Seattle that offers information on its mission and services on its website. I was tasked with redesigning its main webpage as well as exploring other venues of promotional design it could occupy, such as a mobile page and flyers or posters. This work was done primarily in Figma, and the course structure showed me the importance of regular studio critique and iterative feedback.

Responsibilities

▶ Research the UDFB website and philosophy to identify areas of improvement in design identity while maintaining the brand's core values

▶ Create a moodboard and iteratively redesign the main brand through visual principles like balance, scale, contrast, color, etc.

▶ Prototype the landing page and any alternate promotional materials in Figma

▶ Deliver a final brand book that delineates and summarizes my research and design processes altogether

1. The original design

Screenshot displaying the current University District Food Bank website, which is fairly minimalist with a red apple logo and red font accents

2. My research direction

The current UDFB website is generally clean and visually consistent, as it mostly applies a font palette of black/grey/red with grey dividers on a white background, and the red apple logo helps tie into its visual system and promote cohesion. The image carousel at the top of the page that directs the user to its main services is also helpful. However, I think that if I were to frequent this page as a customer I would prefer not having to constantly scroll past its large "mission statement" and "about" text blocks to get to the rest of the page.

Also considering that the UDFB page is not about creating a sustained digital experience (e.g. the website itself is not the product) and is more about guiding people with some sort of physical need or interest, actions on the website are therefore assumed to translate to a physical action (finding information about food bank hours, filling out a sign-up survey in order to volunteer, submitting an application for home deliveries, etc.). With this in mind, its design should maximize efficiency of navigation and immediacy of information. There is no point in keeping someone on the website longer than they want to be knowing the website itself isn’t a social environment, but rather a vehicle to connect its users to the appropriate form, resource, guide, et cetera. As it stands right now, the website certainly offers a lot of information, though while researching I found that one area of improvement would be getting to pertinent facts with more ease.

In the end, my directives included:

  • Increase font size and restructure paragraph composition for general readability
  • Introduce a stronger, more cohesive color palette; do not mix important links with other accent colors and clearly delineate clickable links
  • Strengthen hirearchy of information by introducing proper headers and spacing, collapsing verbose information and/or dividing sections when appropriate
With this research done, I was then able to cycle through a few design goals and discern a desired tone with my moodboard, which informed my logo design, grid composition, type hierarchy, and all in all the overall prototyping experience. More details and explanations can be found in the brand book below!

Screenshot of previous color iterations, from primary colors to a monotone green to a lighter pastel palette

Some early color prototypes

3. Final brand book

Title page of University District Food Bank Brand Book image carousel Page 2: About the food bank, whose mission is to build a hunger-free Northeast Seattle by providing its neighbors with reliable access ot healthy food and life-changing resources Page 3: Design goals, which are Familial, Warm, and Inviting, supplemented with a moodboard comprised of images of fresh produce and colorful patterns to support these goals Page 4: My logo design, which is my own version of the original apple logo with the letters UDFB superimposed on top of it Page 5: Grid specifications, with the web grid being comprised of 13 columns with 20px rows and the mobile grid 8 columns with 20px rows Page 6: Additional details, featuring four produce illustrations (apple, orange, peach, tomato) I created to add dynamic decorative elements to the landing page Page 7: Colors, a cheerful palette mainly comprised of blue and red but also accented with warm orange, yellow, and pink Page 8: Type hierarchy, featuring a mix of stylistic variety with two sans-serifs Epilogue and Karla Page 9: Type application, with a screenshot of one element of the web design that shows both fonts in action Page 10: Imagery, the brand should keep straightforward and simple imagery to emphasize its position as a public service centered around the community, though light red and blue colorful overlays can be used toward visual enhancement Page 11: System application, a screenshot of what the main page looks like on web Page 12: System application, a continuation of my full prototype, with a section on What we do, About us, History, and Announcements Page 13: System application, the same principle but shown in a more compact mobile version Page 14: System application, a poster using similar design with information on the food bank and the slogan Visit. Volunteer. Donate. Page 15: Ending page that says Thank you!