Group 3.png

Foo-dente

foo-dente


Timeframe

Mar - Jun 2017

INFO 330 Class Project

UX / Information Architecture

Role

UX/UI Design

 

Tools

Sketch/Figma

Omnigraffle

 
Group 2 (3).png

about foo-dente

A class project for INFO 330 (UX/IA) where we built the information architecture and user experience for Foodie Fanatic, a website built around all things food.

The course was taught by professor Mike Doane (LinkedIn), a long running professional in the UX/IA industry.

Here is my team's vision for the future of Foodie Fanatic, or as we chose to call it, Foo-dente

 
 
 

00Problem Statement

Foodie Fanatic, a hypothetical company with a website in dire need of revamping, has come to us for help. They are looking for a top-down revamp of their current website. No design guidelines or brand style guides to follow, just a clean slate and a budget. With that, our team gathered and began.

 

 
 
 
 
 
 

01Project Plan

We pitched the following 5-step project plan that outlines our planned process. With ever great deliverable comes a great plan behind it, one that formulates the backbone of the entire project.

 

 
 
 
 
 
 

It starts with the customers, here at Foodie Fanatic, where the main goal is not for them to experience food for the sake of it, but for the love of it.

We want to realize this goal by giving our users a pantry full of ingredients that will enable them to be the best culinary artists we know they can be, as well as explore the world’s culinary greatness.

02Vision Statement

 
 
 

03Mission Strategy

Foodie Fanatic’s business strategy is focused on monetizing site traffic through (1) direct advertising, (2) advertising articles, and (3) affiliate marketing fees.

The beauty in our business strategy, like most media companies, is that Foodie Fanatic has a built-in value generation cycle.

 
 
 
 

03SWOT Analysis

After performing a SWOT analysis of the old Foodie Fanatic site, we found it was:

  • Cumbersome and difficult to navigate

  • Content is “hidden” and not linked to relevant content

  • Poor organization and understanding of site

  • Lack of guest interaction

  • No motivation to purchase from Foodie Fanatic vs competitors

 

 
 
 
 
 
 

04Competitive Analysis

Research began with finding competitors that might already fill this need, or close to it. While some solutions to the issue do exist, the information they provide are limited, covering only areas that are highly populated. Our solution looks to have data from all parts of the world, which is where the crowdsourcing of data comes into play.

 

 
 
 
 
 
 

05User Personas

Our process started with formulating four personas to help guide the content of the site. We chose to create four personas because of how that made for a good balance between designing for most demographics.

 

 
 
 
 
 
 

06Site Map

Our version of the site map for Foodie Fanatic only has 4 tabs, to maintain simplicity and ease of navigation across the site. Each is grouped based on a variety of things we found during our research stages.

 

 
 
 
 
 
 

07Wireframes

Using the above sitemap, the low-fi phase of the process began. Sketches and wireframes were created that reflected the research we did above.

 

 
 
 
 
 
 

08Design Language

Before beginning work on our final mockups, we came together to discuss the exact mood and style our designs would evoke. To keep to the theme of food, we wanted to strive for an artisan-esque tone, something that our moods and style emulate.

 

 
 

Foodie Fanatic -> Foo-dente

 
 
 
 
 

08Hi-Fi Screens

Using everything we learned about the vision behind Foodie Fanatic, we began work on the final mockups of our vision of Foodie Fanatic.

First, we decided to scrap the name of "Foodie Fanatic", and went with something that matched the mood of our design language better in "Foo-dente". "Foodie Fanatic" left connotations of frantic-ness and haste, things that are direct antonyms for the mood we wanted to portray.

 

 
 

 

Landing Page

(Click image to enlarge)

 

As far as visual design language goes, we wanted to keep things as minimal and clean as can be, with the use of a lot of typographic elements. Our playful serif font choice affords for this heavy use of typography by being both legible and elegant at the same time.

 

We chose to keep the amount of information on the landing page to a minimum, striving for a simple aesthetic over cognitive overload. Trending Pieces and Popular Recipes are safe bets for any food-related website, ours being no exception.

 

 
 
 
 
 
 
 
 

 

 

Mobile Interface

 

Mobile compatibility is a key feature that we needed to include based on our user personas. Though Heather, our busy mom, might not use the mobile app as much as the desktop interface, Kyle, our social millennial, would most definitely use it. Being a millennial, Kyle is always on the move, without time to spend on a desktop browsing Foo-dente.

 

Widespread usability for everyone is stated in first and foremost in our vision statement, so designing for all of our users is essential.

 
 
 
 
 

09Reflection

The beauty of this class project was that it didn't feel like a class project at all. Every team looked at Foodie Fanatic as an actual, real company looking to us to better design their website. 

One key takeaway was that I realized just how important the "low-fidelity" parts of the design process are. A great user experience is not only about the visual aesthetics, but much more than that. I've come to appreciate Information Architecture as a field, and thank Mr. Doane for showing me how important it is. It was the first time I've really tackled a UX/IA project, which was definitely something new and interesting. I am excited to continue to expand my design repertoire with projects similar to this one.