The What and the Why?
Clover Food Lab is a Boston-based fast food chain with a focus on regionally-sourced, vegetarian food. I’ve been going to Clover for years, in large part due to their flexible menu. I decided to do a redesign of their website when I realized it has many issues. I wanted a chance to work within the confines of an existing company.
The main issues I found with the current website were:
Information Architecture is too shallow
The hierarchy isn’t ideal - and doesn’t account for user’s primary needs
Many visual aspects could be improved - typography, color schemes, spacing and general organization could all use improvements
My first step was to conduct a heuristic evaluation of the current site to pinpoint issues that could be addressed.
My second step was to do some competitive analysis of the IA’s and hierarchies of other similar food-chain’s websites.
For this analysis, I came up with a formula to give a score to each element based on frequency used and where in the hierarchy it existed.
The formula is:
x = 1 - (average of hierarchy numbers/10)
y = frequency times x
After completing the analysis, I made a content inventory of the current site. Creating the IA was interesting because the current website has a lot of unique material - and a number of menu items linked to the same pages (giving me an opportunity to reduce redundancy).
With an improved IA, it would be much more obvious what visual assets I needed to create.
This was the point at which I ran my card sorting to see how an average user might expect to see these items organized.
I reached out to the Boston community using various social media to get participants who have been to Clover. Because of the unique nature of the business, knowing a little bit about it would help make more informed decisions for the card sorting.
I used the dendrograms and similarity matrix to inform my Information Architecture.
After an intensive IA creation process, I began on my sketches.
Sketching was a great chance for me to see how I could include all of the main menu items on the home page without an overly large menu. I eventually used a Z-shaped hierarchy to highlight ordering online, which is the most important function for the business. Although I personally didn’t want to include the blog on the landing page, it is obviously very important to Clover Food Lab, so at the end of the Z-shape, I placed a Blog feed that is adjustable.
While sketching I realized that splitting the screen into thirds allowed me to make the second level of the IA shallower. These thirds will be separately scrollable (or static). This will enhance the user experience, especially in the case of the menu, where the filters will be adjustable and visible at all times while the menu can be scrolled through.
After finishing my sketches, and picking the ideas I though worked best, I put together some wireframes.
After putting together some wireframes, I began working on my style guide and UI kit.
I drew a lot of inspiration from the architectural choices surrounding the interior spaces of Clover Food Labs. It is minimal and clean with a lot of wood and stainless steel. This minimalist aesthetic inspired my iconography which involves larger-than-usual icons that are detailed, yet minimalist, using only white strokes of all the same width. The line-work of the icons adds something that feels custom while also allowing for an easy transition to mobile. This same minimalism can be seen in the “Classes” list, which inspired many other designs, such as the menu.
I was excited to find that most of my concepts worked, however, fitting a full calendar and a class list side-by-side wasn’t reasonable, so in my final designs, you can see how that screen had to be readjusted.
Based on Clover’s current website, it is apparent that their blog is an important part of their business. So I included an adjustable blog element. This keeps the blog easily accessible on all pages but doesn’t take away from a more functional hierarchy otherwise.
The farmshares page follows a traditional bootstrap grid - providing a predictably beautiful layout that’s known for its successful responsiveness. Knowing how many users would access this website using a mobile phone, responsive design was an important factor.
When working on the initial structure of the website, I realized that some menu items could be a little “deeper” in the site. To accomplish this, the secondary header seen on the right was added to certain pages to allow for more options. In this case “Food Development” was added under “Events & Classes,” whereas “Careers” was added under “About Us.”
This was an important part of making the IA shallower while honoring the card-sorting results.
Dietary restrictions drive a lot of Clover’s traffic. So I designed the menu in a way that keeps filters visible at all times.
The draggable blog element can be seen on the right, along with the functionality of the search. Although adding your address may be easier for some, if you already know where you are - clicking might be easier! This addresses both the local user and the tourist.
On mobile, allowing access to your location would make this step even quicker!
After completing my designs, I put together a Prototype using InVision and CraftManager through Sketch.
Unfortunately it is not currently possible to embed a full desktop prototype from InVision, but click here to check it out!
After finishing my prototype I have a number of next steps!
Working on this redesign has been both informative and exciting. I’ve explored what works (and doesn’t) deeply, and had a chance to use UX techniques in a different manner than when creating from the ground up. I have a number of next steps:
First of all, reach out to Clover and see if they are interested in working with me to make this a reality!
Regardless of Clover’s response - I plan on building out a few more pages (Food Development and Careers)