User Interface Design — Responsive Website

for Children’s Urban Agriculture

Chefs (GC)is a non-profit organization that aims to educate children, families, and community members about healthy eating and healthy food systems. GC teaches kids about healthy food and healthy food systems by putting chef volunteers into elementary schools.

The Opportunity

Many kids are unaware of where their food comes from and how their food choices affect their health, their community, and the environment. The value of the website to its users is that more kids will receive hands-on education on healthy food and healthy food systems. The current website is quite old and outdated; it needs a fresh redesign and clean up of information architecture.

The current Growing Chefs website

Project Goals

The main project goals are to:

  • increase volunteer sign up
  • increase online donations, and
  • promote the Growing Chefs mission (why they do what they do, who they are, and how they do it)
  • The website will be built on Squarespace, so the design will be created with a responsive Squarespace template in mind.

Growing Chefs’ Core Goals as a organization, as listed on their current website, are:

  • Put chef volunteers into elementary schools to teach kids about growing and cooking their food.
  • Support and encourage the development and growth of urban agriculture.
  • Provide an avenue for chefs and growers to engage in the community and to support food sustainability.
  • Provide children with hands-on experience growing and cooking their own food.
  • Inspire children with the idea that they can grow their own food, even in the city

Target Audiences

  • Volunteers (chefs and individuals passionate about food)
  • Participating teachers
  • Participating students and their parents
  • Individuals passionate about supporting local food initiatives

Project duration: 3 weeks

Target Devices: Desktop and Mobile devices

The Team

For this project, I collaborated with my UI partner Victor and two UX designers who conducted the UX-related research, planning, paper prototyping, wire-framing and user testing. As UI designers, Victor and I were responsible for creating a visual identity that reflects Growing Chefs’ brand values and delivering a robust style guide to ensure consistency across all designs in the GC brand.

Research

Based on the research conducted by our UX team, we came up with 3 user personas (the volunteer, donor, and teacher) to show the target user’s different needs and frustrations.

Design Process

The “Why”

After a few meetings with our client, we summed up the why of their organization in one sentence:

“To incur positive changes with the food community by educating the next generation about food sustainability, health and values of local produce.”

We learned the following about their organization as well:

Vision
A world with healthy, sustainable food practices.

Mission
To teach healthy, sustainable food practices.

Mission Statement
Growing Chefs’ mission is to teach children, families, and the community about healthy food and healthy food systems.

Charitable Purpose
Growing Chefs’ mission is to educate children, families, and community members about healthy eating and healthy food systems by providing programs, seminars, and workshops

GC’s brand or core values listed on their website are:

  • “Sustainability. We are committed to championing sustainable food systems and food practices that benefit the health of our shared environment.
  • Positive Change. We are committed to realizing positive change within the food community, and to educating the greater community on the benefits of healthy, sustainable food systems.
  • Local Focus. We support and value local food practices, local farmers, and local food production.
  • Collaboration. We engage chef, educators, growers, children, community groups, and families to work together to support food sustainability.
  • Better Health. We encourage healther eating and healthier food practices.
  • Respect, Participatory Democracy, and Inclusion. We are committed to treating everyone with integrity, fairness, and honesty. We acknowledge the uniqueness of each individual, their skills, beliefs, opinions, and voice.
  • Trust. We aim to ensure honesty, transparency, responsibility, and accountability in all our work, and are committed to building an organizational culture based on these values.”

GC wants to create a sense of community, giving back, a shared passion for food, pro-activeness towards sustainability, caring and understanding for land and food systems, health, supporting the local, and experiencing the food in its authentic, natural, raw state. GC wants to create a compelling visual story through their website. We wanted to represent all this in GC’s identity as well. The visual identity that we envisioned for the app will have generous amount of white space, photographic heavy to tell a story, clear, compelling, and impactful. The overall website is designed to be clear and encourage users to volunteer and donate.

Squarespace Integration

The client showed us a few SquareSpace templates that they selected as potential candidates to host their website on. The responsive web/mobile template called Bedford as shown below is the one we took into consideration in our UI design. Our final prototype and brand style guide will be transferable to this template or similar ones when the project gets developed later on.

Gut Test: Design Layout

We curated a varied collection of web and app design layouts of around 20 images and conducted a gut test with the clients to understand what design aesthetic the clients envision their website to look like and what it should not look like and to help create the visual identity of the brand. Below are the design layouts that the client rated high on their list. The clients expressed that they prefer infographics, lots of photos, white space, clear bold fonts for the header, clear sections and blocks, and some delightful clean illustrations that is not too child-like but appropriate for adults as our audience are adults. The client emphasized using natural looking colours and colours that are appetizing / true to food.

The Mood

Based on the above “why”, we worked on creating different art directions which we think would best fit the Growing Chefs’ brand and to give the client a few options pick from. We explored 2 different art directions as a result. The first moodboard I created below shown below conveys a fun yet professional mood. It is modernistic, with bright yet slightly muted colours. The teal is the primary colour and represents the more professional side of the brand next to the orange and yellow colours that are more fun. Besides the teal, the orange and yellow were chosen carefully as the more appetizing colours. The iconography has thin clean lines, and all are unfilled instead of solid fills to maintain as much white space as possible. A mix of rounded and rectangular edged buttons are used to convey both a friendly and professional mood. Fonts are sans serif for clear legibility and a clean style.

First Art Direction and Style Tile: Fun yet Professional

The second moodboard my partner Victor created below conveys a mood that is warm, vibrant, natural and true to colours of food. There is a rustic feel to the mood with the brown tones and wooden textures. The shapes and movement are organic. The brown colour complemented by freshness of the pepper red and leafy green palette shows the food cycle from growth to compost.

Art Direction Iterations

The client liked vibrant photos of the vegetables, volunteers and people in both moodboards and wanted a combination of both. However, we needed to go back to the drawing board and come up with new colours as we learned in the client meeting that we did not quite hit the mark for the colour palette. We needed to find a better colour combination that would best represent the look and feel of Growing Chefs as a whole. The iconography and UI elements from the first art direction had been agreed on but the client also wanted to see more options of typography for the header.

Colour palette options given to the client.

We explored different colour palette combinations and showed our client 8 palettes to choose from. In the end, they chose option B to be the best one. Palette B’s colours was inspired by and drawn from one of the brochures and marketing materials the client has provided as. The only thing about palette B was that they still did not agree that the olive green shade was appropriate. We finally came up with the green shown in the finalized chosen colour palette at the bottom right of the image above.

Typography options given to the client.

In addition, we sent the client 4 different types of fonts to use for the header and body text. League Spartan Bold and Open Sans were chosen by the client for the header and body text respectively. These fonts we selected for our client were chosen for their legibility and simplicity and we also took into consideration how these fonts will work with and on photographs.

Finalized Moodboard and Art Direction

Below is the final moodboard that has a combination of images from both moodboards so it has the best of both worlds.

Visual Language

To represent community, warmth, freshness, sustainability and fun, we opted for a range of vibrant colours. We chose gentle bright shades of orange, green, red, and greys to showcase GC’s core values. The colours are positive, not too sharp, but vibrant, soothing, appetizing, natural and organic as well. Movement is simple, straightforward, easy to use, intuitive, and the website should read like a story.

Typography

When coming up with the typography, we really wanted to keep it clean, simple, and easy to read. We chose League Spartan Bold as the header because it worked well against a photo backdrop while maintaining its legibility. For our body text we agreed on Open Sans. This typeface pairs perfectly with League Spartan and keeps all the copy clean and easy to read. Green and orange are the primary colours used for the headers and a dark heather grey are for body text and light grey is for placeholder text and footnotes. These grey shades work better and match the rest of the colour palette than having a pure black colour as black is too stark and strong. Our type choice is san serif, easy on the eyes, soothing to read with thin elegant lines, nothing too flowery and fancy.

Logo

The logo had to be kept in its original form so these are the variations we used below, some with text and without text and some with the original colours and an all white version as this works best against photographs. The bottom left logo in white without text is used in the prototype as the home button against photographic hero banners. The original logo with colour should be used whenever possible; otherwise, the white version should be used.

Iconography

We wanted our icons to look fun, informative, and simple. The icons were also used to create infographics to showcase data in a quick comprehensive manner. We chose round edges to create an organic feel. And kept with our colour theme. To keep the website light and not too heavy, we decided on a consistent icon style with thin outlines and none with filled in shapes. Icons were sourced from the Noun Project with some edits.

UI Elements

One of the challenges we faced was presenting a lot of text and numbers in the mid fidelity wireframes from our UX team in a more interesting and comprehensive way. We created illustrations as part of our delightful user design and these hand drawn illustrations are clean but also add a more organic natural feel to the overall website.

Custom illustrations created on Adobe Illustrator

Style Guide

Last but not least, we created a style guide that would act as a UI library to ensure consistency across all designs and applications of the GC brand. Ideally, every possible element needed for the app is present in the style or brand guide so passing this on to another designer should be a seamless process.

Wireframes

UX — Mid Fidelity Wireframes

WEB medium fidelity wireframes
MOBILE medium fidelity wireframes

UI — Hi Fidelity Wireframes

WEB high fidelity wireframes
MOBILE high fidelity wireframes

Prototypes

Please click the link below to view the WEB Invision Prototype:

Please click the link below to view the MOBILE Invision Prototype:

Thank you for reading!



Source link https://blog..io/growing-chefs-9d66f93b368f?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here