MOTHER FOOL'S
Kendra Raczek, Jenna Mann, Junlin Ou, Siqi Zhou
04/29/2020
Website Redesign
01 INTRODUCTION
Mother Fool’s is a local independent coffee shop in Madison, Wisconsin. Located in the historic Willy Street neighborhood in Madison’s east side, it describes itself as a “funky cafe offering organic coffee, vegan soups & baked goods plus live music on weekends.” Mother Fool’s is an “alternative” space known for promoting local music, art, culture, and community. Mother Fool’s is a community center and neighborhood staple as much as it is a coffee shop.
Our goal for this project was not to reinvent the wheel, but mostly to adapt their existing web site and presence to be a bit more modern, polished, accessible, and representative of the space. Their old site works and contains relevant information, but we generally found it to be spread out and poorly organized. Our approach this semester was to rework existing components to look better and reflect the cozy, artistic atmosphere of a local coffee shop.
We wanted to appeal to their existing audience and potential new customers. Based on observations we made while visiting and reviewing Mother Fool’s presence on social media, we understood their target audience to have two primary categories. One, “alternative” or “hipster” college students looking for a quieter coffee shop slightly off the beaten path. Two, established adults, especially young professionals, who live in the neighborhood. Overall, we made an association between people who come to Mother Fool’s regularly and being politically- and environmentally-conscious.
​
​Because we wanted to appeal to both new and returning customers, we noted the importance of efficient and well designed “core” components to a coffee shop site and elements that represented the unique features of Mother Fool’s. This meant fine-tuning the menu and making hours and contact information accessible for newcomers (and returning customers), and also creating pages based on Mother Fool’s unique “services:” month-long art shows and weekend community events.
02 PERSONAS
Our team created two user personas representative of the main segments of Mother Fool's customer base, as noted above. Because the coffeehouse caters to a wide array of customers and their lifestyles, we focused on addressing their different goals in our website redesign.
03 INTERVIEW - OWNERS
While we had been planning on trying to talk to the owners in person, these plans were curtailed by COVID-19. Mother Fool’s actually had temporarily closed until further notice, as well. We tried reaching out via email but had not heard back.
Our goal for these interview questions was to further clarify the main mission of Mother Fool’s to hopefully strengthen our own mission statement for this project, and also to glean some guidance for our vision for the site. We are only customers and community members, so we are only seeing one side of Mother Fool’s. We hoped to be able to capture more of the intended ideals of Mother Fool’s from the people responsible for it, in case there were any sides that we as customers would not see quite as much.
Ideally, interviewing the owners would mimic how a real-world client/developer relationship would work. We would not be creating this website for the customers (though we’d be designing it with them in mind), but instead be working with the owners of Mother Fool’s as the primary stakeholders. Instead, we can only really use the existing website and social media presence to try and glean what they have previously prioritized.
Our initial questions were:
-
What would you say Mother Fool’s overall mission is?
-
What do you think is the purpose of an online presence for a coffee shop, especially one that is so involved in its local community?
-
Is there any part of Mother Fool’s that you wish got more attention from either the general (local) public, or loyal returning customers?
-
How much do you want to “rely on” having a digital presence?
-
Do you see any challenges with presenting a very local, communal atmosphere on a digital platform?
-
What are some specific things you think absolutely need to be on a coffee shop website?What about the site for Mother Fool’s specifically?
04 INTERVIEWS - USERS
We wanted some of our user testing to include reviews of other websites for comparable businesses, i.e. other coffee shops, because most coffee shops will have a lot of overlapping elements. Through this comparison, we wanted to test out some of the hypotheses from our personas when it came to what users want out of a coffee shop website. We found two users to show two different websites and watched them navigate the sites while asking a few standardized questions, and seeing where the conversation went beyond those.
​
The other coffee shop websites we chose were for Colectivo Coffee and Grace Coffee. Both are local coffee shops but with slightly different atmospheres both to each other and to Mother Fool’s. Below are the takeaways we gathered from our two interviews:
User 1: Nemo
Colectivo: Unlike Colectivo, Mother Fool’s doesn’t have to have a fancy website to attract customers. What they value the most is whether the customers feel welcomed in their physical coffee shop. They should have a website that matches their value and this website should be able to convey its welcoming atmosphere.
​
Grace: Information provided on Mother Fool’s should be concise, and it should be closely related to its concept or itself. The information should be useful to the customers or anyone who could see it. It would be better if key contents are emphasized or highlighted on the site, especially those pertain to their activities and items for sale.
User 2: Christina
Colectivo: From this interview, we learned that large distracting images should probably be avoided. Menus can be fragmented, ideally so all menu items of a certain category can be seen without a lot of scrolling, but it should be easy to navigate between each menu category.
​
Grace: Mother Fool’s should not have a minimalist, monochromatic website and its visual design should have more color, warmth, and humility like the shop itself. Simple categories or top-level menu items are good and too many options can be overwhelming. Simplicity was a main theme for this site, which is something that Mother Fool’s would benefit from.
05 CONTEXTUAL INQUIRY
Our CI participant is a 24 year old female software developer from the midwest. As a young person working in the field of front-end technology, she is considered an ‘expert’ internet user. She is very familiar with modern web design patterns, and adept in finding information on websites. For us, she provided a lens that assessed more of the interface design and navigation of Mother Fool’s. She used her laptop, sitting comfortably in her living room. Although we were only able to perform one in-person contextual inquiry because of social distancing, it would also be important for us to do the same analysis on an older participant who has more limited experience with technology, in order to understand how multiple types of users navigate Mother Fool’s website.
One of the major navigational issues Hanna discovered was the navbar drop downs. They are only visible through a mouse hover if you are already on the main page of the dop-down (aka you can only see the “Directions” drop-down menu option when you are on the “About” page already. This is a functional fault of the site’s navbar that hides information/options from the user. In addition, the 3 navbar sections that have drop-down options, only have one additional menu option that appears. This is a poor IA decision, because the design pattern of drop-down menus usually include multiple menu options that appear.
​
Later in the CI we discussed the Shop aspect of the website. Hanna thought that the initial presentation of products in the shop was poor. She acknowledged that most coffee shops have a store, so it makes sense that there would be one here, but, because Mother Fool’s only has three available products, it should be less of a focus and maybe take a lower place in the hierarchy of information. She also questioned the profit margin of the shop to understand how much the online store is benefiting the company. A major problem with the Shop system as well is that there is no cart button, which would usually be placed as a small icon in the top right corner. Instead, you can access your current cart only after adding something to it.
Initially we discussed why a user like Hanna would go on a local coffee shop website to do most importantly, and found that the most important things the Mother Fool’s website should have are:
-
Business hours
-
Check their menu
-
Check out what specialty coffee they have
-
Look at events schedule
Hanna couldn’t find the business hours on the website, possibly being replaced by a section that announces the shop’s closure due to the coronavirus.
​
Overall thoughts about the site:
-
Bad design (looks like 90s web design), does not look like a website for a coffee shop
-
Poor whitespace, margins, spacing, colors
-
No cohesive theme
-
The site has a basic layout, but it isn’t designed well
-
Logos, branding inconsistent
-
There needs to be more pathways to get to certain pages, which is a big user experience principle
-
Our interviewer even discovered a page that they didn’t know existed after doing the content inventory, which means that some pages require complex paths to access
-
Search is placed awkwardly on the bottom of the sidebar, when users expect it to be on the top of the page
06 CONTENT INVENTORY
We started our strategy research with a content inventory. Overall, the Mother Fool’s site did not have an overwhelming amount of content. We had roughly 100 items spread across all six existing pages, not counting very acute things like individual menu items. As previously mentioned, we kept most of the content but did pare down things we felt to be excessive or underutilized, like the store and art show archive. We also assessed general public opinion of Mother Fool's by looking at their reviews across social media platforms.
07 SITEMAP & WIREFRAMES
Our user research suggested that users wanted shallower navigation, and simpler categories that corresponded to services. Users had few, specific site items they all seemed to look for on coffee shop websites, so we opted to restrict the quantity of pages we had.
We made very few tweaks to the overall structure of the site, but we did remove some extraneous elements. Our primary changes to the site’s navigational structure in our prototype were the following:
-
Remove online store
-
Move the Mural page to a dropdown underneath Art
-
Simplify arts/events pages
08 HIGH-FIDELITY PROTOTYPE
As our team was physically apart due to the coronavirus, we created our final Mother Fool's prototype using Squarespace to create a simple interactive website. We made our information architecture and aesthetic design decisions as a culmination of our research process above. Because many users are on-the-go, we made sure to pay special attention to the mobile layout.
Home
Menu
Events
Current Art Show
Graffiti Mural Project
About
Contact
