Schwan’s Home Delivery, a well-established B2C distributor of luxury grocery items, lists a recipe section on their website. The original intention was to provide content that users could interact with and to take the relationship beyond merely the transactional.

However, as the Schwan’s site was upgraded and improved over the years, the recipe section often was ignored. The result is a confusing mixture of intention and execution with issues ranging from changing hierarchy to hidden functionality to not being able to navigate at all in mobile view.

Because the business once again wants to promote the recipe section, I was tasked with sorting out the mess and bringing it back into a consistent, usable, and accessible state.

As UX professionals will often tell you, a good user experience is intended to delight, whether that delight comes from something unexpected and fun, or from simply being able to complete your task easily and efficiently and with a minimum of stress.

In order to find the true depth of usability issues surrounding the recipe section, I set out to “play” with the site. I tried to approach it from different scenarios, as users looking for different types of things, including users with visual impairment. The result was a long list of technical and usability issues that made for an atrocious user experience, even for a user who isn’t also managing a disability.

Some examples:

In desktop, the recipe landing page (which is accessible from the top nav) features a clickable top banner for “Featured Recipes” with a 3-by-3 grid of recipe image tiles below. Not only are all of the individual recipe tiles not labeled with anything other than a generic “View Recipe” button, but on mobile the grid is reduced to a single stack of three tiles. What the user may only learn by accident (because the page provides no instruction) is that each of the three visible tiles is a carousel, and swiping will reveal the “missing” recipes.

There are actually two main recipe pages in the site structure: the recipe landing page (accessible, as mentioned previously, from the top nav) and the recipe main page, which is accessible via breadcrumbs at the top of the page. Unfortunately the breadcrumbs are displayed in a way that could lead a user to expect that they’re one page when they’re actually accessing the other.

Perhaps most offensive of them all is the complete lack of any recipe-centric navigation in mobile view at all. Desktop users will at least be able to jump between categories via a left-hand sidebar menu, but this all but disappears for mobile users.

These issues and inconsistencies were documented in my UX notes and user flows, and were prioritized in order of the most critical from an ADA-compliance perspective.

Using my user flows for reference, I decided to offer three options to the stakeholders.

Option 1 makes use of existing design patterns and functionality that can be easily modified. This is due to the web framework being a custom setup that requires hand-coding, rather than something like Bootstrap which is meant to be modular and upgradable with third-party plugins. With those limitations in mind I was able to design a flow and set of interactions that utilize our existing navigation and components to create a far more intuitive experience.

Option 2 takes the basics set out by Option 1 and adds reconfigured navigation as well as simplified breadcrumbs and small animated features like toast notifications, resulting in an experience that feels familiar and forward-thinking.

Option 3 provides a vision for the future of the recipe section and for the Schwan’s site as a whole. With a wholly-redesigned navigation system, mobile-specific interactions, opportunities for users to connect with the Schwan’s community, and integrations with third-party apps, this design solution brings the site to the standards that users have come to expect in 2023 and beyond.

We continue to fine-tune these designs in collaboration with our partners within Schwan’s, and hope to begin prototyping by mid-April 2023.

To be continued…