While I was working at Coalition Technologies, our President Jordan Brannon was contacted by a representative from BigCommerce to assist with a project for Spiceology, given Coalition’s expertise with that eCommerce platform. He looped me in as a Digital Strategist from the onset to see how we could help and we set up a call with BigCommerce and Spiceology from there.
Spiceology was on the Shopify platform at the time, but they wanted to transition to a headless BigCommerce website, with WordPress on the front-end. This would grant them more flexibility to design a story-driven User Experience, while still having the advantages of BigCommerce powering the commerce engine on the backend.
Previously, Spiceology had put more emphasis as a business on their B2B efforts, but due to COVID-19, they wanted to grow their B2C presence to get their delicious spices in the hands of grillmasters at home. At this stage, Spiceology had already undergone some User Research interviews and created wireframes, which I reviewed with our Development Team to ensure feasibility and put together a project estimate and scope of work. I also worked with their team to discuss current third party integrations, data migration, and other desired functionality with the new site design.
From User Research with Pro Chefs, we learned that it was very important for chefs to be able to get to the blends, spices, and herbs they want quickly, as they typically are very knowledgeable about what they are looking for in a particular recipe. The challenge with this, as is typically the case with eCommerce websites, is that Spiceology has a fairly complex information architecture with many levels of categories and subcategories.
On desktop, the design pattern solution that Spiceology chose to implement was a mega menu which allows the user to quickly find their desired Collection, with a helpful product image to guide them.
Translating that to the mobile experience, Spiceology utilizes a sequential menu, which features a right-chevron arrow on the top three categories that opens up to the Collection options on the following screen. While the user must use the “Back” arrow in the top left to revisit the main menu options, this is a much cleaner approach than an accordion menu which would necessitate a lot of scrolling and appear very messy.
Now that I have more UX/UI experience under my belt, I wanted to challenge myself with a redesign of an existing Spiceology page, with their brand style in mind. They have a lot of delicious recipes on their website featuring their spices, and so I decided to try my hand with an alternative design to the recipe page on mobile!
Example of Current Mobile Design: https://spiceology.com/recipes/new-orleans-bbq-shrimp/
The first step for me was to study the existing design, the design patterns I wanted to carry over, and the existing branding and style in place. The first thing that stuck out to me, at least on my Galaxy S7, was the custom orange URL address bar at the top. I replicated that, as well as the Top Callout Header with free shipping incentive and the main header navigation with hamburger, search, account, and shopping bag icons. In addition to determining the appropriate hex for the orange, I also used the inspect tool to find out the font, which is Archivo Narrow.
Beneath that is where the design starts to vary. A lot has been said about the importance of quality food photography for brands such as Spiceology, and the imagery on this page is certainly tantalizing. The issue I have, however, as a consumer of their products, is that you do not see the imagery above the fold upon page load on the mobile design. Instead you get a black rectangle with the tile, the influencer who created the recipe, estimated cook time and difficulty.
For my design, I featured the main image prominently, using a linear gradient with darker emphasis at the top so that the text is clearly legible. I also included arrows on either side of the image so that the user can easily scroll through the image carousel, with the circular carousel-indicators at the bottom of the image so that the user knows how many images they can view.
Beneath that I reintroduce the black rectangle, but with slightly rounded corners at the top for a tab-like feel, with the difficulty and time text all on the horizontal plane rather than stacked to reduce space. This allows me to still feature the instagram avatar and information, now centered on the page.
Finally, I wanted to highlight the Spiceology spices and seasonings more prominently on the page, and included an option for the user to favorite them so that they can be easily found and purchased after viewing the rest of the ingredients and instructions.
