The Daily Table
Website Redesign
The Daily Table is a not-for-profit, community and sponsor driven grocery store with two locations in the Metro Boston area founded by Doug Rauch, former president of Trader Joe’s, whose goal is to:
“… offer an upbeat, clean and friendly retail store environment that is open to everyone in the community. We can offer these daily values by working with a large network of growers, supermarkets, manufacturers, and other suppliers who donate their excess, healthy food to us, or provide us with special buying opportunities. In this way, we are able to keep prices affordable for all our customers. Our meals are priced to compete with fast food options, making it easier for families to eat healthier within their means. And all the food in our store is informed by guidelines set for us by a leading group of nutrition experts, which makes it easy for our customers to make great food choices.”
It’s a great concept. It offers a way for lower income individuals and families to eat well, and to give them that bright sense of dignity so often overlooked in its’ importance to overall well-being. My challenge is to re-purpose the existing website into something the community can be proud of, and that will help DT to expand to more communities around Boston and beyond.
Current
Proposed
Main
Some of the information in the current navigation is also important enough to place in the homepage body. To eliminate the E-mail CTA/Membership redundancy, we’re going to combine them; when a user signs up for the e-mail list, they will also be signing up for membership as the information required for both is similar.There are still going to be some redundancies, however we’re going to place them a bit more strategically. The E-mail/Membership CTA will be on the Get Involved page as well as located within the homepage. Cooking Classes will also be on the Get Involved (community) page, but to highlight it’s importance it will be located in a section of the home page with a short summary and abbreviated list of current classes with a CTA to find out more about the program. We’re going to put the E-mail CTA and Cooking Classes in a sticky div that will remain in place as the user scrolls down the page. The page will include general information about Daily Table along with current news items pertaining to DT’s activities. Awareness, Educate, …
Donate
Speaking of strategically placing items, we’re going to assign meaning to the individual donations CTAs. People are much more likely to provide a financial contribution if they are able to associate that contribution with something meaningful. To help them create a meaningful relationship worthy of donation, rather than presenting them with the option to contribute initially with a single “Donate Now” CTA in the navigation, we’ll place multiple Donation CTAs throughout the page after they have formed a connection to the organization through learning about it. In the body of the home page we’ll located it after the DT summary and news, on the Get Involved page we’ll include it as an option after other methods of involvement, on the About Us page after we’ve told them the DT story, and in the footer for users who’ve gone there looking for ways to reach out to the organization. All of the Donation CTAs will lead to a page that,along with the current multiple tiers of donation, will provide social proof from previous donors and possibly a small coupon to alleviate the need for some form of reciprocation. We will absolutely not be using any form of dark UX patterns to coerce users into donating their financial or material resources to the organization.
Footer
Much of the information currently located within the primary navigation could be more appropriately stored in the footer section of the website.Contact/Location information, as well as information about partners/suppliers/funders, career opportunities including jobs/internships/volunteering, and social media links are all items people tend to look for in the footer section of web pages. The information is tertiary to our primary goals, and any user whose goal it is to seek that information will likely scroll straight to the bottom of the page for it.
Navigation Redundancies
The current DT navigation contains 8 buttons (missed the “Donate” CTA in the first image below) with a total of 22 possible options. The human brain is only capable of storing about 7 things in working memory, so having a site navigation with three times that causes cognitive strain that will likely result in the user abandoning the experience fairly quickly. Moreover, the current system doesn’t inform the user of where they are within the website;unless you remember exactly how you navigated to a page on the site there is no indication of how you got there or where you are in relation to other areas.There are a few ways in which we can reduce the users’ cognitive strain while using the website via chunking the information for them, as well as helping the user’s locational awareness.
Revised Navigation
We’ve already established that the three primary goals of the website are Awareness, Education, and Funding. The 3 navigation items (excluding Home) will sort much of the information that had been on separate pages into those categories. We can also completely get rid of the FAQ page by categorizing the information found in the current FAQ and distributing it to the 3 primary categories. The “About Us” category, for example, brings the user to a page that combines the story and mission statement, Our Team, and both “The Store” and “Organization and Financial Model” from the FAQ section
Main
Some of the information in the current navigation is also important enough to place in the homepage body. To eliminate the E-mail CTA/Membership redundancy, we’re going to combine them; when a user signs up for the e-mail list, they will also be signing up for membership as the information required for both is similar.There are still going to be some redundancies, however we’re going to place them a bit more strategically. The E-mail/Membership CTA will be on the Get Involved page as well as located within the homepage. Cooking Classes will also be on the Get Involved (community) page, but to highlight it’s importance it will be located in a section of the home page with a short summary and abbreviated list of current classes with a CTA to find out more about the program. We’re going to put the E-mail CTA and Cooking Classes in a sticky div that will remain in place as the user scrolls down the page. The page will include general information about Daily Table along with current news items pertaining to DT’s activities.
Awareness, Educate, …
Donate
Speaking of strategically placing items, we’re going to assign meaning to the individual donations CTAs. People are much more likely to provide a financial contribution if they are able to associate that contribution with something meaningful. To help them create a meaningful relationship worthy of donation, rather than presenting them with the option to contribute initially with a single “Donate Now” CTA in the navigation, we’ll place multiple Donation CTAs throughout the page after they have formed a connection to the organization through learning about it. In the body of the home page we’ll located it after the DT summary and news, on the Get Involved page we’ll include it as an option after other methods of involvement, on the About Us page after we’ve told them the DT story, and in the footer for users who’ve gone there looking for ways to reach out to the organization. All of the Donation CTAs will lead to a page that, along with the current multiple tiers of donation, will provide social proof from previous donors and possibly a small coupon to alleviate the need for some form of reciprocation. We will absolutely not be using any form of dark UX patterns to coerce users into donating their financial or material resources to the organization.
Footer
Much of the information currently located within the primary navigation could be more appropriately stored in the footer section of the website.Contact/Location information, as well as information about partners/suppliers/funders, career opportunities including jobs/internships/volunteering, and social media links are all items people tend to look for in the footer section of web pages. The information is tertiary to our primary goals, and any user whose goal it is to seek that information will likely scroll straight to the bottom of the page for it.
Having considerably slimmed down the site navigation by reducing redundancies, grouping similar items, and focusing on the primary goals of the website, we can begin skeletoning out a site map, fleshing out content within the map nodes, and finally dolling it up with the DT styles.
I referred to my Post-It reorganization as well as the current site’s pages content hierarchy to inform the structure of the site map. There were a few things that surprised me, not the least of which being that simplifying the UI will make it considerably more suitable for creating responsiveness for mobile screens, which the current site is lacking. I also noticed that the Donation form on the current donation page is overflowing its container, but we’ll address that later during wireframing. For now, it should be more obvious that the new site architecture lends itself better to directing users toward the three primary goals, located dead center. I didn’t even plan that. The overall improved effectiveness of more strategically placed Donate CTAs should also appear more evident, however we won’t know if this improves the quantity and quality (dollar amount) of donations until implemented.
A couple items that’ll require further stakeholder consideration involve the placement of “Supply Food” on the “Get Involved” page - if suppliers are entirely larger contributors it may not belong there - and whether or not they’d like the current partners/funders/suppliers to be displayed more prominently. As a personal aside, I see them as being like movie credits - the users who will be looking for that information will be doing so in the footer.
Pending stakeholder approval on the site architecture, we’re going to expedite the design process via beginning work on wireframes to better understand the content hierarchy within the pages. First, some general heuristics:
• The user is not a computer, we are.
• Scrolling, so long as the user is aware of where they are, is preferential to clicking, which can cause them to lose track of where they are.
• Community, community, community.
• We are not coercing the user, nor using any information they provide for nefarious purposes.
That’s a healthy start!
The new version of the homepage will be utilizing a whole pile of cognitive psychology to engage users and to help them quickly understand what DT is all about. The users’ eyes will likely quickly scan the 4 item navigation bar, easily storing the concise, simple information in working memory while they move to the hero image. Along with the Daily Table name (and possibly organization logo) there will be a 1 sentence summary succinctly summarizing what DT is, and the image itself will be a high quality photo displaying the inside of the store. Why? Humans search any pictures they see in a UI for information and meaning for rapid translation in their associative memory; a picture of the store front, or of customers with a blurred background will not say: “This is a grocery store; you get groceries here.” A picture of food displays in a grocery store, however, will.
Scrolling down the page, users will start to develop a more robust understanding of what DT is and begin to make decisions about whether or not they want to associate themselves with it. From the late FAQ page we’ll include the information about the DT Model and “Why Do We Need Daily Table”, and we’ll use more imagery and newsworthy items/articles/etc in the left two thirds, while the right third will contain information about upcoming cooking classes, events, membership, and ways to contribute. Being somewhat smaller and with less vibrance, they may very well ignore it initially, but as they scroll this section will remain in place once it hits the top of the page, drawing the user’s attentional resources away from the imagery to the interactionable elements. I’m slightly concerned with how this will scale down to smaller viewport sizes, but placing elements to fit snugly in a 3 column CSS grid should mitigate most issues. The right-most section containing the information and CTAs for Cooking Classes, Membership, etc., will likely be ‘flipped’ to cover the viewport’s width at the next breakpoint to fit in somewhere toward the bottom. For now, it’s more important to continue placing content in the structure of the site.
There are a few notable items that came to light here.
• One challenge in particular will be combining Membership and E-Mail Sign-Up - as it turns out, the reason Membership is separate and requires users to physically visit the location is that DT needs to validate that members live and/or work locally for some portion of their not-for-profit status to remain intact. Could this be accomplished by using location services to ensure a user is nearby?
• I also noticed that the process of Cooking Class discovery and signing up for classes could be improved. Currently, the class calendar by Tockify brings the user to a separate Google form page to register for their selected class. An embedded form (as is the case for Volunteering and Internships) with some information regarding the number of other participants would: 1) prevent the user from having to open a new tab, a particular annoyance on mobile, and 2) aid the user’s decision to register by letting them know they won’t need to risk being the only one to show up.
• Since the FAQ page has been completely done away with, the information found there has to be placed contextually. This also gave me the idea to make some of the information a bit more robust, including placing images representative of the Partners/Funders/Suppliers, for example, along with the information about them.
Two things we’ll have to put aside for the time being are the SNAP Challenge being a PDF document, likely so user’s can print and affix to their fridge at home, and the Recipes page which is currently Not Found.
Normally at this stage I would begin creating a lo-fi prototype in XD using these painfully rough sketches, but having reduced the sheer number of pages within the site, as well as needing to adequately demonstrate the functionality of the sticky sidebar on the home page to stakeholders, I’ve moved straight to building the home page in Webflow for staging. It will also not be necessary to generate separate sets of screens to display how everything will look on mobile devices - that can be achieved fairly easily by rearranging grid elements for different breakpoints - and we can transition more quickly into adding animations (if required) that will actually work on the finished product.
While we’re updating the experience of the website, it seemed like an opportune time to update the DT logo as well, just not too much. The objective is to raise the modernity bar while maintaining the original logo’s familiarity so as not to alienate long standing customers.
OG
Font
v1.2
Final
Let's go live.
Creating a live page to more succinctly and quickly exhibit the results of the research and design decisions that’ve gone in to the new structure and layout of The Daily Table website was more work than expected - particularly making it responsive to be effective on mobile devices - however, I stand by the idea as it will cut down on development resources. Breakdown of decisions below.
Or have a look at the live page here.
As planned, we used an image of a grocery store interior for the hero image, kept the short DT summary, and added the information regarding there being two locations. From there, information about the DT model and purpose fall immediately into view, followed by summaries of other important attributes to inspire the viewer to become more involved with the organization. The sticky sidebar begins with redundant, but more granular information about the Cooking Classes, followed by the membership sign up CTA (along with the TXT for of connecting with DT) and finally the call to donate. You will notice that this section ceases to scroll up shortly after the Donate Now CTA - also a strikingly different color from anything else on the screen - appears. The point of this is to draw the viewer’s attention to the donate CTA without being too overwhelming; while the purple hue stands out in contrast to other items within the field of view, it also stands out in your field of vision physically via being more readily perceived by the conical photoreceptors outside your primary range of focus. This is how we draw in peoples’ attentional resources while also managing to avoid using actual dark UX patterns.
Toward the bottom, to the left of the Donate CTA, the SNAP Challenge offers a free, printable PDF of said SNAP Challenge for users to take something tangible away from the experience. While the DT site doesn’t currently go much farther with the Challenge than that, it would be interesting to see a participation page in which people share meals they’ve created using the guidelines presented within the PDF.
The footer includes contact/location/hours of operation information for both DT locations (information that is on separate pages on the current site) as well as the links deemed to be tertiary to the primary goals of the website and its users. Overall it has a more professional aesthetic.
Reflection
I’ve decided to cap this study off at one week as I think I’ve accomplished solving the initial challenge. Were I to pursue expounding upon the solution to build out the rest of the site, I would begin by re-iterating using website analytics, as well as creating empathy maps for DT’s customers to investigate my hypotheses regarding their goals in using the website. I suspect accessing the e-mail list for the purpose of sending out SurveyMonkey links would not be the most effective means of gathering information from DT’s customers, so I would likely have physical survey cards available at DT locations’ checkout lanes to either be filled out and returned in-store, or with a link to an online version of the same survey. Going further, I’d need to perform A/B testing of different versions of the site (perhaps more Webflow prototypes) to track user behavior - does the ‘sticky sidebar’ affect customer interaction, or is it just confusing to them? Is dispersing the FAQ information to appropriate sections of the site a sensible way to chunk information, or will users be looking for a specific “FAQ” page? For stakeholders, is the new design a touch too sophisticated; would they rather keep the more old-fashioned aesthetic?
For now, while the layout could use some tweaking, the home page appears to appease (impossible to know without user testing) the 3 main goals we established earlier: Awareness, Education, and Funding. The page first provides Awareness via explicitly informing the viewer of its identity, it Educates the viewer on the importance of DT - as well as prominently displaying actual educational experiences - and politely nudges the user to Donate to the cause after they’ve developed a connection to it. Furthermore, information that is not directly connected to the goals of the user is placed within the footer, a more likely place for those who are looking for it to be searching for that specific information.
UPDATE.
The Daily Table has updated their website since the completion of this project. You can check it out here.
New skin, same bones.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
