Mar - Jun 2017
INFO 330 Class Project
UX / Information Architecture
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
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.
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.
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.
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
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.
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.
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.
Using the above sitemap, the low-fi phase of the process began. Sketches and wireframes were created that reflected the research we did above.
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
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.
(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 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.
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.