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.
My primary initial objective is to understand the purpose(s) of any site, app, or product that I’m evaluating. If the purpose is obvious I can move on to accentuating said purpose to better suit those who’re seeking it, and generally making the experience of the purpose more enjoyable. The purpose of the DT website took some digging.
According to my totally legible notes, the three primary goals of the website are:
• Awareness: This includes the Identity, or the DT Story, as well as its role within the Community. “Community” will be a recurring theme here.
• Education: Not just about how the organization operates, but the “FreeCooking Classes” which bring members of the community together to literally be educated on how to better feed themselves.
• Funding: DT relies heavily on both Material (food/supplies) andFinancial donations to keep things running. This is important, but it should be tertiary to what DT is and who DT serves. Currently, the “DONATE NOW” button is in a fixed position in the right side of the header on every page.
Currently there are 7 items in the navigation menu (not including the “DONATE NOW” button)and many of them have drop-down menus to single pages with one or two paragraphs. Even as an advanced UI user I’m finding it difficult to map the information virtually in order to juggle and comprehend it all in working memory. It doesn’t help that the navigation menu itself provides very little feedback in terms of letting me know where I am within the system. By the time I’ve read about the “SNAP Challenge” for example, I’ve already forgotten which menu item I’d selected to get there. Because many of the pages within the site consist of a small amount of content, they could be easily grouped and placed on single pages to reduce the site of that mental map. Additionally, the drop-down menu for the “GET INVOLVED” nav link consists entirely of information that should be placed in the footer, which currently only contains the address, copyright info, and social links.
Customers
• Prospective Customers: People who’ve heard about DT and want to know what it’s about.
• Current Customers: People who’ve been to the store and want to gain more information about the organization. What are their motives? Coupons? Cooking classes?
Personnel
• People looking for employment information.
• People looking to volunteer.
• Current employees (unlikely.)
Donors
• Suppliers looking to make Material donations.
• Financial supporters: Large/corporate & individual
Customers
• Prospective: What is DT? Location/hours? What’s their story/mission? What can I buy there?
• Current: Events, deals/coupons, cooking classes, community.
Personnel
• Looking for work: Application? Email link? Open positions?
• Looking to volunteer: Application? Email link? Open spots? What’s involved with volunteering at a grocery store anyway?
Donors
• Financial: Who is already involved with financial support? Who do I get in touch with for larger contributions?
• For smaller contributions, DT’s “DONATE NOW” page includes monetary tiers -$25/$50/$75/$100/$Other. There is some generic information regarding donations helping propagate DT’s mission, but the page leaves plenty to be desired in terms of motivational signifiers to assuage any risk aversion prospective small donors may have. Social Proof could be implemented here, along with more information about what the money goes to. For larger contributions: There is a page listing Partners, as well as a separate page for Funders. I have no idea what any of that means, but neither page contains anything in the way of methods for corporate contact to become a Partner or Donor. In the meantime, the contact e-mail address is probably good enough for larger contributors.
Development of Community
For whatever reason, E-mail List and Membership are entirely separate things. When “E-mail List” - located front and center on the Home page (this is one of many redundancies I’ll get to later) - is clicked, a fresh new tab opens with a short description of what they’ll be emailing you about and a short form to fill out prior to the Sign Up confirmation initiation. Membership, however, is located worlds away tucked under the “GET INVOLVED” nav item, and it involves providing personal information when you physically go into the store. The page also doesn’t describe any tangible benefits to membership. As with the Donations page, this could benefit from more information, social proof, and further risk aversion.
Financial / Material Support
That glaring, obnoxious, candy-orange “DONATE NOW” button permanently embedded in the navigation bar would be more persuasive elsewhere. Again, donations are tertiary to DT Awareness (story) and Education (community) in terms of marrying the website goals with the user needs. People will not donate to something if they don’t know what it is, and they will donate more if they feel like they are a part of the community.
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.
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.
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.
OG
Font
v1.2
Final
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.
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.
The Daily Table has updated their website since the completion of this project. You can check it out here.
New skin, same bones.
For this case study, we’re looking at 3 parts of the Citizens Bank mobile app that I suspect can be improved. First, the navigation can be streamlined to improve usability, making the application easier to understand as a whole. Second, account management can become more intuitive, reducing load time while using some of the currently empty space within the UI. Third, reducing redundancies in sorting through transactions by date.
Slider navigation unnecessary. Many items can be chunked to reduce scanning effort. Four is optimal in this situation.
1) Accounts, Transfers, Pay Bills, Mobile Deposit, Zelle, Manage Debit Cards.
2) Messages/Alerts
3) Contact, Help, Locations
4) Settings, Log Off
The primary goal of most Citizens Bank app users is to quickly check the current state of their funds. CB does have an optional Quick Balance feature that allows users to somewhat less securely either long-press on the app icon or enable a widget to view their balance(s).
For a user to check the same information, along with additional information regarding their account status, it should be as simple as it is to check the widget/icon long-press, with just the added security of the app verifying their identity.
Here, we will use the screen space potential to simply and intuitively provide users with more detailed information.
In recent years screens have gotten bigger, but it could be argued that cellular connectivity hasn’t improved significantly. We can again take advantage of the ample screen real estate here to reduce multi-screen redundancies that use both valuable bandwidth and the attentional resources of the user.
The Citizen’s Bank ‘Home’ screen is effectively simply the Accounts overview.
The list of accounts has been replaced with Account Cards that indicate the account type, available balance, and recent information about the account, such as pending charges, recent deposits, and available credit for credit cards.
Below the accounts section are grouped payment options, Zelle and Bill Pay. These cards will expand with more information about the services, whereas in the original slider menu each option opened a completely new screen.
Navigation has been simplified to 4 options: An ‘i’ icon for banking info/help/locations (recognition of this icon as providing these user needs subject to testing,) the Citizen’s Bank icon for Accounts Home, a message bubbles icon for bank contact, and a user/gear icon for user profile and account settings. Notifications bell icon has been moved to the top right, indicating contrast between notifications and messages.
Tapping on a particular Account Card expands the card to reveal transactions and options for account management.
Icons for Mobile Deposit and Calendar for filtering transactions, along with an option to download recent transaction history are in upper-right corner of the Account card.
Transactions are grouped more closely, however use of space and typography maintains scannability.
In the original menu, a “Manage Debit Cards” option brought the user to a separate page that gave them the option of deactivating their card. This features is integrated within the Account card at the bottom, and toggling it to deactivate a card will trigger a prompt asking users to confirm the action.
Rather than using multiple screens for filtering transactions by date, the function is display-none within the account transactions expanded view. Tapping on the calendar icon reveals the calendar, providing users with the ability to create a time frame for transactions to view. In order to give users space for trial and error, curated time frames will populate within the transactions area automatically, however, the calendar will remain in place until the Filter button is tapped, at which point it will slide up giving users a more robust view of their chosen transaction history.
Given the sheer amount of information being conveyed on a single screen, this may not be reasonable for smaller phones (dimensions used were that of an iPhone XS Max) or phones with lower resolutions. Viewport alternatives will need to be considered.
There are a number of troublesome areas within this application that can be improved upon, but the focus of this micro-study is going to be on hero content, content layout, and information architecture - specifically with regards to the Topics section.
Upon opening the application, the user is greeted with a full-screen image of socially relevant national news. This is a problem; while the top story is of significant importance, it is not of singular importance to the application, and should not overwhelm the overarching initial goal of introducing the user to the application. If what the user sees appears to be all there is, they will have difficulty in orientating themself and develop a subtle feeling of confusion. To prevent this, providing a hierarchy of information will better inform the user of what the NPR app is, as well as where they are within the environment, without having to develop experiential knowledge.
Here, as is the case in other sections of the application in which a number of news elements are listed, a hierarchy guiding users through the myriad information is lacking. Two or three of the articles can be categorized by importance (perhaps by what is trending, or by user tastes) and included within the Hero section as secondary, tertiary, and quaternary elements. Scrolling down, additional content within the Home screen can be better grouped for recognition by combining images and titles, as opposed to having them separated horizontally, wherein the relationship between title and image isn’t as strong.
Herein lies an apropos example of Responsive design being used when Adaptive design would better serve the user’s goals. Given the viewport sizes of most current tablets, listing topic categories this way is unnecessary and induces additional cognitive strain re Hick’s Law; with so many options, and so little contrast, users are more likely to abandon this screen entirely. Categories should be easily identifiable with obvious differentiation. More importantly, the screen has much room for aesthetic improvement.
Further, the nav bar appears to be taken directly from the mobile application, and could be expanded for tablet viewports.
To aid user recognition of the NPR tablet application, the size of the lead story’s image has been reduced to enable placement of the article title, as well as an article summary to the right of the image. Below this are categories (pulled from the sub-categories within the Topics page) that are chosen by the user during the initial application setup. This allows the user to more easily sort through the myriad content by offering better visual categorization, and to personalize the experience to more swiftly reach their goal of obtaining the news that is important to them. Articles within each category section can be sorted through by sliding them left or right, or tap on “More…” to see all of them on a separate screen.The navigation bar now remains in a fixed position on the left. Navigation icons, Settings/Profile icons, and Search are grouped separately within the bar.
Leaving the application architecture largely undisturbed, there are 4 groups to consider: Popular, News, Arts & Life, and Music. As ‘Popular’ does not have sub-categories, the 6 most recent articles will be pulled from the CMS to populate the tiles. News, Arts & Life, and Music each have 9, 7, and 5 sub-categories. Each category has a grid of tiles for sub-categories, and each sub-category tile will pull an image from the most recent article in its respective directory. Using cards/tiles seemed appropriate given aesthetic of the NPR logo image. The navigation bar simply remains left-aligned at 100vh, with navigation items nested in a centered div element.
The navigation bar should most likely be repositioned to the bottom of the viewport upon rotating the tablet, however Search, Settings, and Profile icons wouldn’t necessarily make sense to have in that location.
Ultimately, when it comes to procuring and developing good habits that stick, the most difficult part of the process is consistency and accountability. It's all too easy to begin one day, skip a couple days (or weeks), and allow the promise of progress to fade within memory.
It's ok. You're human. It happens. 😉
Taking into account the idea that your physical and mental well-being are your greatest assets, why not monitor them as you would any other asset - be it savings, credit, crypto, or your hilarious stock market antics?
Control isn't a motivational poster, it's metrics & trends to help you stay in...
“Sysco is the world’s global foodservice leader. Our robust international network supports customers in 90 different countries around the world.”
Sysco has a vast array of websites and applications - both mobile and web based - through which its customers can procure products and track orders for their businesses, which are primarily in the food service sector. The two that are the focus of this study are Esysco - or My Sysco Order - and Sysco Shop, the latter being an attempt to streamline and improve the usability of the former. While there are some obvious improvements, including modernizing the interface to be more aesthetically pleasing, there are a number of items the design team did not take into consideration. Let's dig in.
A survey of 38 food service professionals who utilize Sysco’s online ordering system indicated that over 90% use eSysco more than other options. The relevancy to this study is that it will be necessary to maintain recognition/familiarity in pursuing a better design solution. Below we'll compare Sysco Shop to eSysco to see what changes were made, and whether or not they work for actual users of the platform. Areas of interest are color coded with critiques below.
The list area in Sysco Shop is improved dramatically, reducing the number of columns from 14 to 6, consolidating information - such as by grouping UPC#, Pack/Size, and Brand with Product Name - thereby reducing possible cognitive overload. Possible elements to improve are the size of the product image, aiding in recognition, and enhancing the affordances of interaction with the product links, in particular that further product information can be discovered by clicking on the image or product name.
The extreme consolidation of information in Sysco Shop has created a steep learnability curve for seasoned users, particularly those who aren’t as tech-centric. The vertical ellipsis, for example, do not adequately represent the formerly obvious features it hides. Furthermore, the vertical stack of filtering options in the eSysco UI is not accurately represented by the filter icon to the right of the list search bar in the Shop UI, and much as it helpful to maintain the visibility of the information within the shopping cart for quick scanning, it would be more helpful to the user to have the filtering options visible while they are attempting to locate an item.
Site navigation in Sysco Shop has been converted to a slide menu that may not be obvious to conditioned eSysco users, particularly given the lack of information provided by the “Go To” button activating the menu. “Products” has been changed to “Discover,” which may be more apropos, but the purpose is not immediately apparent. “Order Guide” has been sensibly lumped in with “Lists” as users frequently find the separation confusing; the Order Guide is itself a list.
A common issue within the system involves awareness of state; whether or not a user is working within an active order. If a user has logged out before submitting an active order, they will need to re-open the order upon logging back in. If the user is not aware of this, they may assume their work is lost and begin a new order, rather than going to the Orders section to re-open the order they were working on. The Shop design appears to solve this issue by storing the active order in the form of a shopping cart. However, instead of hiding the cart in a dropdown menu, it can be displayed persistently in a fixed position on the right to provide external cognition for users, many of whom will be placing orders with greater than 70 items.
Both solutions to the product information box design have their advantages and disadvantages. The product image in the eSysco box does not enlarge, and it’s difficult to tell that it’s a slider with multiple images. The product image in the Shop box does enlarge, but the affordance is not clear, and clicking on the image opens yet another lightbox for the image itself. Both provide pricing information and a way to add the product to an order directly from the box, neither of which users said they find helpful. Apart from viewing a product image, users primarily use this feature to 1) procure nutritional information, and 2) view purchase history. Some also suggested the portion cost calculator is helpful, which, along with purchase history, is missing from the Shop design solution.
In both examples, however, a lightbox of any variety is completely unnecessary, both for users who only require a glance at more granular (“Is this gluten free?”) information, and for developers who, as will be shown, only need use Display: None and Display: Grid.
Before unleashing the UX Kraken, we'll require some guidance from Sysco's branding guidelines. Interesting to note that the 'y' within the logo design is used for margin spacing, and while sticking primarily to Sysco's "Sysco Colors" we'll use the secondary swatch to draw attention to specific areas of interest.
Navigation
• Many survey respondents expressed the need for accountability when placing orders - some opting to order by e-mail or telephone for that purpose. Account information is provided here, along with the account representative’s information. The ‘I’ icon yields more information about the user’s account, Preferences enables modifications (such as user’s e-mail address) of account information, Notification bell icon yields Company System Message information previously displayed on a separate page while logging in to the platform.
• Nav links still include Lists, Orders, and “Products” or “Discover” has been changed to “Catalog.” Deliveries has been added to quickly check status of orders out for delivery.
• Help and Support have been added to bottom.
Active Order / Cart
• Static, always visible Active Order acts as external cognition for users, enabling them to quickly scan items they have already selected. Prior user solutions included searching in lists to see whether or not they had selected an item. Sorting option helps to facilitate this. Additional search functionality within section seemed unnecessary.
• Added ability to easily switch between active orders. Users have set delivery dates and can now work on multiple orders for multiple dates in one window.
Main
• Sorting options have been packed into a simple, unambiguous drop down menu.
• Switching between lists, similar to the Shop solution, is also achieved via a drop down.
• Grouping items is now activated via a toggle - there have only ever been two options, so another drop down seemed unnecessary.
• Product images are larger for scannability, product names have simply been underlined to indicate interactability.
• Rather than using a light box for additional product information, clicking on the product reveals further information about the product, including Nutritional Info, and more granular details about ordering History.
It’s complicated. Integrating the vast amount of information within the platform’s CMS with this solution would prove challenging and time/money consuming. Without a more comprehensive understanding of the back-end, there may also be a number of flaws in the capabilities of this solution - whether or not it’s actually possible to switch between Active Orders, for example. Furthermore, this would not easily translate to a mobile version; in spite of most users not using mobile ordering solutions, stakeholders may still want them.
The original challenge with Jive was to create an application that would solve the problem of not only tracking down farmers markets, but to enable users to view in real time what is available at any participating market and “pre-order” items, thus enabling remote discoverability of the market and dissolving the risk aversion that would usually push them toward visiting a familiar chain grocery store. Jive is also meant to foster a better relationship between farmer and consumer via hosting a social platform that would allow communication between them - sharing stories, recipes, and feedback - beyond the usual short-form discourse you’ll find happening during transactional periods at the markets themselves.
The process for this was fairly straightforward: Research what is currently available, understand the demographic trends, curate a handful of surveys to gain more specific understandings of what prospective users might be looking for in a product such as Jive, develop personas based on survey and interview results, use the personas to create journey maps that would then inform information architecture for the application, use the IA to develop a prototype for usability testing, iterate for least amount of cognitive friction, and then finalize the ‘look & feel’ of a finished product.
• Limited functionality
• Outdated design elements
• Market information unsubstantial
• Shopping functions kinda useless
• Nothing you can’t already do with Yelp & Google Maps
The map utility offered by MassGrown has much of the functionality we’re looking for, including filters for market type, list & map view, and information about individual locations accessible via pop-up element. Our challenge for this particular portion of Jive will be transforming this into a format that is conducive to use by the average human’s fat fingers.
Planting the seeds of a design solution, I conducted surveys using both Google Forms and SurveyMonkey, distributed through various social media platforms. I wanted to know, first and foremost, why folks do or don't visit local farmer's markets. Most people seem to understand the benefits of shopping locally - particularly in terms of consumables - so why do some avoid it while others are fervent supporters? Moreover, what would it take to convert the former to the latter?
Meet Lucy and Maggie. To better understand the motivations and environments of potential Jive users, both as market customers and participating vendors, amalgamations of both types were developed to keep pain points and potential opportunities in mind in all facets of the design process. It was important to become familiar with the tools they currently use as well as their perspectives on the experience of farmer's market participation.
The ideal customer journey never really falls below the level of Confident; the mental model of visiting a market contains elements that are never not going to get in the way of Delight - such as parking in unfamiliar territory - but we can take measures to mitigate those aspects of the journey that cause general cognitive strife. For example, traveling to the market may be a pain, but we can inform the user when they’re close, and provide socially generated tips for parking in the area - perhaps given by the Market Organizer. Or Jason Mamoa. We’ll see.
The onboarding process, indicated in orange or coral or whatever that is, is fairly standard, allowing new users to sign up for the service with or without entering billing information prior to checking out the experience. From there, we’ve settled on five important aspects of the application for navigation: a user’s profile, their connections within the Jive environment, the ever-so-important map, notifications (we’ll be getting rid of this one later) and shopping cart/basket, which we’ll call “Cart” but will look like a basket for recognition and associative memory.
The hairy part - where this strays from the standard path - comes in where we go from the simple act of locating a farmers market to then seeing the market page/profile, followed by looking at individual vendors at the market, and finally accessing said individual vendors’ page wherein users can find out more about the farm/vendor (assuaging the “know where my food comes from” value) as well as to select items from the vendor’s store to pick up on arrival. We’ll need, first and foremost, to ensure that it’s abundantly clear to the user that the vendors and the market itself are not the same.
Toward the end of the ordering process, users will once again have the option of inputting payment information or they may choose to pay at pickup. Risk averted.
1.
After our introductory slides users will immediately be able to accomplish their primary goal of finding nearby markets. While the final introductory slide will prime them to accept location services, they will have the option to disallow and input a location anonymously. Notice that, should they opt out of auto-location, the input field for location is well within their thumb's range of motion. This is accomplished by propping it up with an automatically populated faux-farm prior to any locational information being provided.
2.
Once location information is collected, the closest market is highlighted both within a slide menu and via a text bubble above the location on the map. Tapping "More Info" within the bubble or on the list item will bring the user to the market's page for more information.
Initially the way back to the search input field was to simply tap on the portion of the search bar that was viewable, however it proved too narrow for fat fingers. A down arrow at the top of the slider was introduced to expand the field of interaction.
3.
The market page slides up over 80% of the screen. The purpose of this is to provide the prospective market goers with the important information they need, with an easy method of swiping it away should the particular market not possess the assets they're looking for. The information consists of whether or not the market is currently open, a summary, calendar, icons depicting services/amenities, directions, and most importantly for Jive, a link to the list of participating vendors.
4.
70% of survey respondents said they would be more likely to visit a farmers market instead of a grocery store if they had a better idea of what they would find there ahead of time.
The farm page is where prospective customers can learn what to expect from specific vendors within the market, eliminating the risk of not finding anything they'd like to purchase that normally drives them to chain stores.
The design of the page is similar to that of other social media profile pages, drawing the user in to connect on a more personal level.
5.
The farm's store itself provides a sense of familiarity with similar e-shopping platforms, including the ability to filter items displayed by category, list view, and thumbnail images of the items for scannability. Default images will be auto-generated by the application if not provided by the farm. The shopping basket resides within a bottom slider to ease the user's working memory load without going to a separate screen. This also distinguishes the process of checking the basket from checking out.
6.
The basket persists to individual item pages, always keeping the user secure in being able to see what they've already selected.
7.
If you're interested, the clickable prototype is available right over here.
The basket itself is fairly straightforward, including the ability to increase the quantity of selected items, remove items, as well as 2 methods for proceeding; an underlined 'Checkout' link beneath the basket in the upper right-hand corner, and a larger 'Checkout' button at the bottom. The purpose of there being 2 checkout links is to ensure the user has the ability to proceed regardless of the length of the list of selected items - more items in the basket will push the button down and out of view.
8.
The checkout area first reminds the user of the total, then provides two methods of transaction: Pay Now, which will either automatically charge the user's already established Jive account or prompt them to sign up, and Pay at Pick-Up, which enables the user to pay the vendor directly . The latter will also prompt users to create a Jive account before reserving the selected items for pick-up. Of course, we will give the user the option to reconsider with a 'Back to Basket' option.
9.
To confirm the user's actions and reinforce Jive's branding they will be rewarded with a short animation along with a note that their order is being sent to the vendor and they will be e-mailed when confirmed by the vendor.
The user's next goal of physically arriving at the market is accomplished immediately with a button leading them to the Google Maps Directions API.
Jive’s ultimately less about making the sometimes tedious task of locating a market more efficient, and more about providing a lively, care-free, community based experience. Styling is at once modern and classic, using vibrant colors and sharp geometry with user generated Instagram-like filtered images of their personal experience. When using the JIVE Market app, users should feel like they’re dressing up to go swing-dancing with the other cool kids who’re down with the Jive.
Is the typeface JIVE’s logo is derived from, and can be used sparsely pending team approval. An example would be using it in the context of an advertising campaign, but it cannot be implemented for headings or body text.
Designers are encouraged to be playful within the JIVE environment - after all, we are quite literally looking to keep things fresh. Pun very intended.
• Fresh / Classic
• Clean / Rustic
• Vibrant / Tasteful
• Jazzy / Calm
• Luscious / Healthful
• Robust / Delicate
Apart from the typeface from which the JIVE logo is heartily modified the JIVE environment utilizes Proxima Nova (think Spotify) for header elements, and Raleway for blocks of text. Font weights for headers are always either Black, Bold, or Medium, whereas text blocks are always Regular. Ok, usually.
PARAGRAPH
Raleway
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Having opted to leave location services off, the user's location is determined once they've entered their zip code and displays nearby markets. After tapping Search the keyboard is replace with a scrollable list in addition to the map view. From there, tapping on an option within the list expands for more info that will can either quickly provide directions, or take you to the market's page. At the market's page, users can view pertinent information and explore participating vendors. Tapping on any participating vendor card brings the user to the vendor's page, where they can get more information, connect, or access their Store to reserve items or purchase for pickup.
Probably something to do with the features and functionality of Jive's social area. Currently this site is a hot mess so I'll come back to it. 😬
Let's get trendy. Let's get dark & glassy.
I started this project with the notion of creating functional layering, in particular having products added to the cart readily available simply by sliding the cart up to quickly view, then slide back down to continue shopping. Handily, 'glassmorphism' became a thing and this seemed an ideal application.
Coming straight outta Goal #1, the user's mission is to select items for purchase and continue through checking out and being directed toward the market where they'll complete the transaction.
As much fun as the world of Jive has been to be in, I ultimately don’t have the time or the resources available to legitimately pursue the project as robustly as it deserves. It would require a deeper dive into the world of the vendor; understanding their contexts of use - perhaps with a ride-along on a market day - and what actual problems, if any, they might have with the process of selling at a market. It would also require a better understanding of the archetypical market organizer, what drives them to create value within their community, and what tools and resources are most valuable to them. Furthermore, to bring it all together - to have three sides to the platform (Uber has two, Passenger and Driver, and that certainly took more than one fledgling designer) would be a monumental undertaking. I won’t delve into the realm of ubiquitous UX possibilities (“HEY ALEXA, WHAT’S THE JIVE TODAY!?”) for the sake of outro brevity, but it’s there. Of course it is.
The value of this project to me, the aforementioned fledgling designer, was essentially applying knowledge of interaction design psychology to something tangible, virtually. In user research you’re not just sneakily asking prospective users what their needs are, you’re looking at what they’re currently doing and noticing the pain points and cognitive distress that they aren’t, and then you remove those pain points and create cognitive ease as best you can. Sometimes it’s visual, sometimes it’s a sort of one-sided form of social cognition, wherein you and the user are both solving the problem together - they’re just not as aware of their role as you are. When Lucy (alright, her real name was Sarah) told me that in her farmers market days there was scant time for updating a virtual marketplace between packing up the truck and setting up at the market, I became a type of external cognition for her to possibly solve (Default options) that problem; input data, solve for UX.
Through farmers market infrastructure research, and a particularly informative interview with a woman who grew up farming and participating in markets in Vermont, it became evident that a successful implementation of this system would require three facets: Customer, Vendor, & Organizer.
As a Vendor I want to:
• Sell my goods.
• Connect with customers.
• Share my story.
• Register with new markets.
As a Customer I want to:
• Find a market.
• Get general information about market and participating vendors.
• View available items for purchase before venturing to market.
• Reserve items ahead of time.
As an Organizer I want to:
• Garner community support.
• Connect with municipalities regarding prospective market space.
• Be engaged with vendors and market customers.
While debating whether or not to include this first-ever design project from my trainwreck of an experience with Bloc.io, I thought it might be fun to take all (well, some) of the pieces and bring it into present-day.
From the "design brief":
Create a SaaS web application that allows people to collect information and store it in a single place. A user of said application should be able to create simple documents, store images, links to websites, and collaborate with others. With so many options for content curation, storage and collaboration on the market today it seems like everyone’s got a favorite app for this or that, but not this and that. Some applications are great for bookmarking content to check out later, but terrible for making a simple grocery list. Some applications are fantastic for grocery lists, but fall short when it comes to saving that recipe from that site you’ll need to reference later on when you’re turning groceries into dinner. Furthermore, what if it’s a dinner party and you need to share the fare planning with some friends? CRATE needs to be a product that would do all the things without being cumbersome or too complicated for the average target user to even bother with.
I'll be using the original color swatch and typefaces, as well as incorporating the elements of functionality our "client" wanted, as redundant as many of them may be now. Let's just pretend some asshole from 2016 time-traveled to now and immediately asked for all this. I'll also be focusing on a mobile version, just completely blowing our time-traveler's mind all the way up.
Well, the bones are here.
I included a sweet mockup (when the hell are we getting a new MBP design?), color palette/typography rules, 3 iterations of the desktop homepage, a modicum of evidence that I actually asked some people what they'd want in a product like this, 4 persona cards based on said research, and probably 3% of the original logo explorations.
[A few years later...}
Since the dawn of civilization, humans have relentlessly sought after the most efficient way to organize their stuff, from precious sticks 'n rocks to hilarious memes.
Crate stores images, links/articles, documents, and has note-taking functionality. Personally, I use separate apps for all of these actions: Pocket for links, Apple Photos for images, Acrobat for documents, Apple Notes for.. notes. The challenge with Crate is to keep these all cozied up in a single app and not have it be a total clusterfuck.
Part of pulling this off requires leveraging users' recognition and ditching the bespoke icons incorporated in v.1.0, replacing them with more conservative cognitive cues.
Upper-Right: Right around where you'd expect there to be a content filter. Default filters by Recent, hence the clock icon, with a toggle for filtering by calendar date, hence the calendar icon. Below these timely options in the menu are filters for links, images, and notes. 60px to the left is the faithful Search bar. People like that.
I also included the ability to pin content in the home/Recent section - I like the idea of being able to pin items anywhere in the content flow, as opposed to the top, but this may be technically taxing.
Bottom-Center: Expounding upon the original "Quick Note" idea, this pop-menu enables the user to Quick Note, as well as Quick Link & Quick Image.
Bottom-Left: Transitions Crate into a carbon-copy of Trello and/or MS Teams.
Well this is a bit of a clusterfuck, isn't it. There's a fine line between having all the elements handy and cognitive overload I think we've crossed here.
Fortunately, I just happened to recall spending some time studying dashboard design, data visualization, and probably some gestalt related bullshit. So let's try this again:
The golden ratio is a helluva drug.
What is the intention of a Note? Well, it's a form of external cognition enabling us to focus our attention elsewhere secure in the knowledge that there's a placeholder for information we'll need to retrieve later on. Enter dashboard, center stage. I'll break this down further below.
Just below the dashboard are the user's contacts - call it a throwback to MySpace's Top 5 or 8 or whatever it was; basically the folks this user interacts with the most often, with the ability to add more. Full spread of contacts is located in the section for collaboration accessed via the crates icon, bottom nav left.
Directly under contacts are recently saved images, followed by recently saved links which are 1.65x larger for link titles/summaries etc. A right-swipe enables users to view all saved images/links.
Primary state dash content is filtered by hour, day, and month. These are placed dead-center, providing the user with enough thumb-space to swipe the dash card to the left to display the notes function, which enables the user to view their notes or create a new note.
Notes appear chronologically based on most recently updated. Each note card includes a title that pops up when tapped to acknowledge that it's been tapped, as well as prevent accidentally opening a note while swiping through them. A second tap opens the note full-screen.
The same two-tap functionality applies to chronologically sorted content as well; the first tap selects the day/hour, second tap opens a more granular, editable view of the day full screen. This area is populated via linking items such as notes to specific calendar days.
The calendar expands vertically to accommodate months with 6 rows of days. As with displaying content by hour or day, tapping on a specific day on the calendar will select the day, a second tap will open said day full screen.
As mentioned above, notes appear chronologically based on most recently updated via tapping the note icon, or open a fresh new note via tapping on the create-note icon.
Functionality of notes themselves takes some elements from iOS, with an addition of a + Calendar icon used to assign the note to a specific calendar day. Voice dictation also seemed like a good idea. I am an Apple consumer whore.
Keeping it glassy.
You know what's totally crazy? The part where sizing cards using the Fibonacci Sequence works out to them fitting perfectly in iPhone's so-called 'safe zone' with 20px margins. Just bonkers.
The color scheme was tricky to maintain from the original concept. Some modifications were required, such as bringing up the hue to work for current trends, as well as play nice with the background-blur involved with glassmorphism.
Rather than throwing 'Team Crates' into the home screen mix, it seemed more apropos to maintain a semblance of independence via using the top portion as a planner/calendar, followed by valued contacts for quick info/messaging, then photo access and saved links toward the bottom with larger cards to provide room for link info. Team Crates are instead accessed independently via the linked-box icon in the left side of the bottom nav. We're also missing documents here - PDFs and whatnot. These could potentially be added below the links slider, however I think it'd be best to gauge user interest in the functionality prior to implementing - I'd suspect the larger audience prefers desktop applications for this.
While recent items such as images, links, and valued contacts are all here in the bottom of the Crate, the dashboard brings everything together chronologically. If this was a literal wooden crate full of stuff, the dashboard would be the way to locate any given item within said literal wooden crate. Any item can be assigned to a calendar day so it's there when you need it to be - screen grabs of images of the hotel you'll be staying at in Maui or airport terminal info, for example, can be thrown into the Today View of the day you'll be arriving.
But how fucking boring is that.
I've always been crazy about aesthetically cool things that actually function to solve some sort of problem, and do so in a way that may not be all that common. It's a bit of a balance; go too far off the reservation and learnability scales beyond usability, stick with standard solutions and, well, you just aren't getting anyone's attentional resources that way, are ya.
Take this website as an example. Nav? Nah. Template? Hell nah. Archetypical portfolio with 6+ pages of content to get lost in? How about no. All the projects are right here - right now - hidden from view, lying in wait for the trigger that'll display their flexboxes. Is this crazy? Perhaps, but you were warned about that in the first paragraph.
Anyway, poke around, have a laugh, have a cry - have a time. If it isn't painfully obvious how to get in touch one of us is clearly doing something wrong.