Home
Work
About
FAQ
Contact
The fastest way to reach out is via this form, which goes directly to my inbox. If you'd prefer, there are other methods linked below - for example, if you'd like to include screen shots of something you need fixed, using your email client may be preferable. Keep in mind that I'm not on the clock until we've agreed on the work to be done.
Depends entirely on the scope of what you need done. A basic landing page, from design to developing into a live site, may only take a couple weeks. More pages and more capabilities of the site will take longer. A to-go sandwich is cheaper and faster than a multi-course sit-down.
This depends on the scope of the project. After the initial work is done, there may be hosting and maintenance costs that could be a factor. For example, I pay $20/mo. to host this website.
A detailed breakdown of pricing for Hourly, A La Carte services or flat monthly rates can be viewed in this Google Sheet.
If requested, I can set up Google Analytics for your site and show you how to use the dashboard.
Third party integration with Doordash, Uber Eats, Toast, or GrubHub are certainly options.
Paypal, Stripe, USDT
Google My Business integration and SEO optimization. Once an account is established Google works its AI magic to find potential customers for you.
Absolutely not, but given my 20+ years of experience in the industry it's an ideal niche.
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 so as not to alienate long standing customers.
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.
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.
For this project I began with a full analysis of the site's hierarchy, from most important to least, and shuffled them around in a way that both made more sense to both potential and current users. I then broke down the current ordering process and developed a quicker, more efficient order flow.
• An improved landing page.
• New login process that incorporates new account setup.
• Redesigned Home Page that facilitates customer and business goals.
• Improved order flow .
• General graphic enhancements.
This will break down the goals of Existing Customers, Potential Customers, and Sid Wainer from most to least importance.
1) Place an order.
• Product info/pricing
• Selecting delivery date
• Reviewing cart/total
• Order confirmation
2) Product discovery, catalogue
• Product image/description
• Price
• Nutritionals
• Availability
3) Account access
4) Contact/customer service
5) Market Report
6) About/Company info/values/history etc.
1) Learn about company.
• Product selection/info/pricing
• Location/availability
• "How can Sid help my business?"
2) Account Setup/Contact Rep.
3) Access to online ordering
4) Assurance of responsive customer service
5) Socials/community validation
6) Market Report
1) Facilitate customer online ordering process, increase avg. order size.
2) Acquire new online customers
• For new accounts
• For existing customers new to web ordering.
3) Informing new/existing customers of current promotional materials, new products and services.
4) Newsletter / mailing list signup
5) Highlight connections with local and regional producers.
Static Menu
• My Account
- Account Inquiry
- Order Inquiry
- Order Guide
- Change Password
- Logout
• Who We Are
- Our Story
- Food Safety
- Sid Factor
- Specialty Brands
- Videos
- Green Practices
- Culinary Excellence
• Browse Products
- All Categories
(Lists all categories for search)
• Market Report
(PDF updated weekly)
• Catalogs
- Specialty programs - multiple PDFs
• Become A Customer
(Redundant if logged in)
• Our Farm Partners
(Interactive map + farm info)
• Sid Wainer Classic Recipes
(Recipe e-books page)
Ordering Elements
• Select Ship Date
• Search
• Shopping Cart
Landing Page
• Become A Customer
- Existing Account
- New Account
• Login/Logout
• Who We Are
- Our Story
- Videos
- Partners
- Culinary Excellence
- The Sid Factor
- Food Safety
Body
• Spotlight
• New Items
• Market Prices
• Market Report
• Retail Catalog
• Partners
Top Nav
• Trending In Specialty
• Login/Logout
Top Nav
• Search Bar
• Notifications
• Account
• Start Order
Navigation Bar
• About
• Partners
• Catalogs
• Browse
• New Items
• Spotlight
• Market Report
Footer
• Logo
• Socials
• Mailing List
• Help Center
- Contact Page
- Phone
• Become A Customer
• Set Up
• Online Ordering
• Careers
• Privacy Policy
• Terms & Conditions
• Trending In Specialty
• Market Report
Footer
• Logo
• Socials
• Careers
• Privacy Policy
• Terms / Conditions
• Phone
• Hours
• Contact
• Address
• Newsletter Signup
• HACCP
User’s attention is immediately drawn to hero image, which also serves as link to Specialty Items page. Methods for either logging in or account setup are not readily apparent. Nothing immediately stands out to lead the user in any particular direction; nearly everything appears to have equal value.
A weird, disorienting tangent leading the user away from any specific goals. The purpose appears to be to entice the user with random smattering of available products, but doesn’t actually say that. User will either:
• Click browser Back button to re-orient.
• Click “View Item In Account,” leading them to the Login page.
• Click “View Item In Showcase,” bringing them to a product detail page, containing a “Login To Purchase” button.
• Click “Search” to look for a specific item. Upon doing so, the only ability to refine a search is by Category.
Continuing the trend of “everything is mildly important here,” there is a significant amount of information not relevant to the task of either logging in or setting up online ordering, presumably for an existing account. For potential new customers, the “Become A Customer” button in the static menu (sharing equal importance with “Market Report,” “Our Farm Partners,” and “Sid Wainer Classic Recipes” is the only option, and brings the user to a page with additional company information and a Google Form application.
Somewhere between clicking “Login” and the logged in state, an alert modal from 1997 appears with information regarding upcoming holiday delivery schedule changes. This pauses page load and happens at every login.
Now that the user is finally logged in, the user’s attention is incapable of being anywhere other than the Hot Deals image. Moving forward with the goal of placing an order has become a game of Where’s Waldo, in which Waldo is the unclickable “Select Ship Date” element in the top left corner.
Interacting with the 'Select Ship Date' element involves hovering and waiting for 2 seconds for a drop-down calendar to appear. At this point, the static menu is becoming even less relevant.
The user has the option of starting an order via the Search bar, which hasn’t moved since initially arriving at the home page. After searching for and selecting an item to order, the user received a slap on the wrist for not having selected a delivery date. It’s fine, they begrudgingly did it for you, but don’t let it happen again.
After learning how to use the Calendar (which, again, you do not click on; nothing happens when you have the audacity to click on it) and selecting a delivery date, a “Standard Order Guide” appears as default. Selecting the drop-down here (by clicking on it - you can click on this one!) gives you the option of filtering by “Order History,” at which point a second drop down (also clickable!) eventually presents itself with options for a date range of said history.
Apart from selecting either “Standard Order Guide” or “Order History,” Categories is the only option. Users can also use the static Search field, however upon doing so it’s not clear that you’re searching within the aforementioned parameters; it’s just miles away from where the user’s attention is, separated by the increasingly valueless static menu.
In terms of how items are sorted, there doesn’t appear to be any rhyme or reason involved, nor options for user manipulation. Moreover, a default list format which eventually loads more products as the user scrolls, without providing the option to limit the number of items per page. The processing for this provided enough time for full-page screen shots.
Given the overall sluggishness of the website, scrolling through a near-infinite list of products and selecting items to purchase is the quickest way through the process, supposing you don’t scroll past them. The process involves: selecting quantity (default 1), selecting either a case or piece (depending on product) and clicking the shopping cart item. If the user changes their mind about the item they have to proceed to cart. Performing a search/further filtering after selecting an item will remove the green checkmark, and users will need to visit their cart to confirm prior selection.
The sole way to begin the checkout process is to click on the minuscule shopping cart icon (at least it includes the total!) in the static menu; there is no option to view the cart either where users would normally look (top right) or at the bottom of the page care of the infinite product list issue. The active link area for the cart icon is also ridiculously small.
The static menu is still here for some reason. Beyond that the major issue is the placement and lack of distinction between “Checkout” and “Continue Shopping.” Given both, users’ procedural memory will impel them to click on the latter when they want the former.
The static menu is still here for some reason. Beyond that, Shipping/Billing address info take up a significant amount of space and aren’t editable. Users are able to add their own PO#, however one is provided upon placing the order. The “Save For Later” and “Place Order” buttons, arguably the most important items on this page, are nearly lost in the footer.
My God we did it. Two things:
• The section confirming the order, while in the center of the page, is overwhelmed by the persistent static menu and the footer; the order number text is the same size as the text in said footer, including the “Sign Up” CTA.
• The date in the unclickable calendar drop-down element hasn’t reset, and won’t until the user logs out/in.
The new home page for existing / signed-in users coordinates customer and business goals, not only making it easier for customers to find their way around, but to do so in a way that introduces them to Sid's promotional materials and new products without being obnoxious about it. There are a number of ways for a user to initiate a new order, but most importantly the ambiguous calendar element has been replaced with a "Start Order" button on the top right. This is where the shopping card / order total elements will be once an order is initiated.
The realm of decentralized finance is a vast inevitability, however bridging the gap between the common understanding of legacy systems and that inevitability is exceedingly difficult for the average person.
Olla seeks to make entrance to and participation in cryptocurrency markets and decentralized finance easier to grasp through familiar UX while maintaining the innovative new features of the decentralized future.
• Project Management: Initiation, Planning, Execution
• User / Market Research
• Graphic / UI Design
• Prototyping / Usability Testing*
* This is an ongoing project.
The chart below organizes tasks within 4 phases. As a team of one, it seemed to make the most sense to weight each task by estimated hours to complete, and assign a value of $42 to each hour to establish an estimated cost of service. The gantt section visually demonstrates work progress, and includes a 5th section to log time above estimates for each task.
To present a business case for the product, the slides cover general information about the cryptocurrency markets, user adoption, as well as take a look a some of the other options currently available.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
For the most part, raw data was unavailable and the survey I created didn't get enough responses to be significant. However, after sorting through the reports I was able to gather a decent amount of relevant data. Feel free to skip over the slides below for conclusions.
The plan for the Olla Wallet design encompasses a 3-phase rollout, with the most vital features to be in phase 1, followed by integration of features for slightly more experienced users, and finally features for the more advanced. According to the research, the highest priority use case for crypto is simply holding on to them as a mid-long term investment, followed by earning interest on the assets, making transfers to their other wallets (exchanges, presumably), making transfers/payments to others, and keeping their funds/assets private.
Current Users: Appear to be confident in their ability to use wallets, however have a number of complaints regarding the UX, including system visibility issues such as status of transactions, transparency of associated fees, and anxiety regarding accurately entering recipient addresses, for which most of them simply copy/paste. Overall, it seems in many cases as though in the conversation between the user and the application, the user is getting the silent treatment. Probably moreso than in any other space, the user experience here requires extreme security, and that requires communication.
Crypto Curious: Interestingly, while the age range of current users tends to fall between 25-40, and the sexes involved tend to be disproportionately male, those thinking about getting involved cover a wider range of demographics. A recognizable onboarding process will be necessary to get them through the initial gulf of understanding. Visual cues resembling financial applications they already know will be crucial, with guided tutorials required when additional features are added.
Tier 2:
• Earn/staking
• NFT storage
• DCA/recurring buy
Fiat onramp: KYC
To accommodate users who are relatively new to the space, as well as current users who are somewhat or very experienced, I developed at 3-tier feature set for Olla which progressively rolls out more features. While this helps onboard all types of user, this also facilitates an agile development process; with tier 1 as MVP released, work can begin on the implementation of tier 2 features.
Tier 3:
• dApp support/browser
• DEX/Swap
• Buy/Sell triggers
Tier 1: MVP
• Send/Receive/View Transactions
• View assets/portfolio chart/ ind. asset charts
• Buy/Sell - exchange API
• Support: FAQ, chat
• User Info/settings/2fa
• Key backup/restore
Using what we've learned about our potential users, I came up with a theme that (theoretically) finds a happy medium between what more experienced users have come to expect, and what newer users expect coming from more traditional finance applications. Accessibility-wise, it's difficult to avoid using red/green in applications that track asset value, so shapes/sparklines are used wherever possible. The dark theme is a blue gradient with off-white text/icons for those with astigmatism. Moreover, using golden ratio calculations to determine layout and typography helps to differentiate between feature sections.
Extrapolating from an initial home screen wireframe, I worked out as much of the system's architecture/actions as possible without the input of an actual developer. Beginning with the onboarding process (which is shorter in that it requires less screens, but will require more educational material than standard setup processes) I integrated all 3 tiers within the diagram. Tier 1 in blue, 2 in green, 3 in orange. Keeping in mind where these features will be will be important while fleshing out the MVP.
If you're having a hard time viewing all the nooks 'n crannies of this, you can zoom in on it here.
As you may surmise from the flow chart above, creating screens for testing could take a while, potentially a long while. If you're interested in learning more about this project, or just want to chat about life, feel free to reach out any time.
“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.
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.
• 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.
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.
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.
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.
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. 😬
A dark theme using 'glassmorphism' would likely not be accepted by most users, but seemed an idea worth exploring nonetheless.
Products added to the cart are readily available simply by sliding the cart up to quickly view, then slide back down to continue shopping. User selects items for purchase, continues 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.
• UX/UI overhaul for existing websites/mobile apps.
• Design of single/multiple page websites/mobile apps
• Webflow development w/ client edit capability
• SEO optimization
• Bespoke company logo
• Typography for screens & print
• Color schemes/graphics
• Style guides for promotional materials, websites, menus
• Purchasing/inventory
• Usage/Demand planning
• Customer appreciation
• Marketing analytics
• Excel/Power BI/Tableau
Data Viz Work
Tapas & cocktails in the front, Poe-inspired speakeasy in the back. The client wanted a design system that would tie the 2 together, though not in any obvious way, more of a IYKYK. Deliverables included logos/branding for both, menus, and custom loyalty cards for those deemed worthy of Casa's dark secret club.
A local favorite, DK needed a fresh new look to draw additional business for catering sales. Deliverables included a redesigned logo for website/peripherals, color scheme to compete with area rivals, and website to display their menu items with an emphasis on their catering capabilities.
Landing page redesign + revamp of purchasing process.
Redesign blending effective elements of E-Sysco and Sysco Market.
Branding update + landing page revamp.
Think Amazon + Instagram for farmers markets.
First we’ll go over the scope of work needed - what your business goals are and what a website will need to do to align with them.
Once we’ve determined the project’s scope, we’ll work on capital allocation. Scope can always be scaled up or down to work with your budget.
Using Google Sheets, all aspects of the project are kept in order, tracked, and updated in real time and so there are no mystery charges. If it’s agreed upon that more or less work is required, it’s as simple as adding or deleting a row.
You know customer experience is paramount, and this begins well before they enter your establishment.
They’ll more than likely formulate their first impressions by seeing your name/logo in a Google search, and once they’ve clicked “View Website” you’ve got about 3 seconds to draw them in.
Doing this will take more than some savory shots of chef’s plates. It’ll require all the pieces to fit:
• Research - know who they are and what they’re looking for.
• Interaction - your digital handshake.
• Aesthetics - how something tastes doesn't matter if it doesn't look great as well.
• Modern - some classics never die, but no one wants a digital Salisbury steak.
• Organized - they don’t want their apps, main, and dessert all at once.
• Identity - don't be a stranger, show them who you are.
Among the many perks of using Webflow for development on web and mobile, once my work is done you'll have the ability to edit content on your fancy new site without having to write a single line of code. The video explains how this works, but the jist of it is that you'll be able to log in to your site to perform basic tasks such as uploading a new photo or changing/adding menu items. You won't have to pay me dime for that. Webflow also has a Client Billing service that, if you choose, makes it easy to pay for website hosting and maintenance.
The fastest way to reach out is via this form, which goes directly to my inbox. If you'd prefer, there are other methods linked below - for example, if you'd like to include screen shots of something you need fixed, using your email client may be preferable. Keep in mind that I'm not on the clock until we've agreed on the work to be done.
Years ago while working as a line cook at a cafe in Cambridge, I witnessed the owner bring in someone who'd never set foot in a kitchen to do their website, as I'm sure is usually the case. I got the impression he was taking advantage of them, but didn't know how to articulate that at the time. Now I do; now I can be the website guy who's stepped foot in plenty of kitchens, who understands your challenges and goals, and who legitimately wants to help your business thrive.