merchant experience | Goldbelly
About Goldbelly
Goldbelly is on a mission to “Ship Food Love” to consumers across the US with a focus on delivering quality food experiences. They work with food merchants and restaurants to ship their products nationally and offer a marketplace for consumers to discover new food experiences. A customer can come to the Goldbelly marketplace and look for specific foods from Shake Shack hamburger kits to Lou Malnati’s pizza packs to chef meal kits. Customers can even subscribe to or gift a subscription to a monthly food themed box, where they receive a unique food experience each month.
To facilitate the mission of shipping food love, Goldbelly offers services to merchants to help them manage their day-to-day orders. Merchants who sell through the Goldbelly marketplace are provided access to a merchant platform. This platform enables them to manage their daily orders, get insight into their sales and product list, as well as manage customers and even place custom orders.
Project Overview
The focus of this project was to map out how merchants are using the platform and re-design the experience. This would allow the tech team to also update the technology stack to ensure the new version of the merchant platform was stable for future growth. The merchant platform was in need of a revamp as it was built on old technology and until this project did not have dedicated design, product, and engineering resources.
As part of the Goldbelly design team, I owned design for the merchant platform, other merchant tools, and all business operations tools. In this role I aligned our merchant and business tools with our updated branding and led the re-design of the merchant platform. I reported to the Chief Product Officer and presented design proposals to leadership and stakeholders throughout this project.
The problem
The initial merchant platform was originally created to manage orders placed through the Goldbelly marketplace. Over the course of time new features had been added on ad hoc and the ordering experience had evolved to be more complex, but the platform had not been reconsidered to incorporate these changes. In addition, as more merchants had joined the marketplace and onboarded to the merchant platform, it became clear the technology stack was not able to handle future growth. To tackle these issues, this project was meant to re-design the merchant experience and update the technology to enable a solid foundation for future growth.
Discovery
To kick off this initiative, the team visited merchants to observe how they interacted with the merchant platform on a daily basis. Through this we were able to observe how merchants faced challenges when finding the orders they needed to prepare for the day, being able to easily print packing and shipping labels, and how they troubleshot unclear packing lists during package preparation. As a team, we took these observations back and aligned on the following pain-points:
Merchants were not clear on what orders need to be printed for the day
Merchants were not able to use the packing lists effectively
Merchants were not able to see when orders had been updated and new shipping labels were needed
Since these were the main pain-points merchants were encountering, we decided it would be best to tackle these first with the re-design effort. We aligned with leadership on this approach as the initial release of a new platform had to support the core actions of allowing merchants to print shipping labels and pack orders.
Initial concepts
Taking the insights from the discovery work, I started crafting wireframes to explore how we can showcase important actions to merchant users. These concepts explored revamping the primary dashboard that served as the control center for merchants. They needed to be able to quickly navigate their order list, understand what orders needed to be packed for the day, and if there were any changes needed to existing orders that had already had shipping labels generated.
Exploration showing key actions merchants need to take up front when they login. Primary issues with this approach is what if they don’t take all of the necessary actions before closing the dialog box.
Introducing an actions bar to the primary dashboard. In this bar merchants would be able to see communications from Goldbelly as well as the primary packing actions they need to take for the day.
Re-designed printing experience proposal so merchants can see total number of shipping labels, how many batches they will need to print in, and be able to verify the labels are for the correct day.
Propose additional actions for merchants to take during the printing experience. Example actions are: print summary of all orders and print packing slips for previously printed shipping labels.
Updated dashboard
The order dashboard is the control center for merchants. It lets them see all of their orders, search orders, and is the primary way they track which orders they have printed shipping labels for packing. This is the core experience for merchants, so it is vital they understand what they need to do in this view.
Keeping the discovery insights in mind, I crafted a new dashboard experience that introduced an action bar to communicate the primary actions to users as well as updated the page hierarchy and added customizable filters to enhanced order search.
Demo of the updated printing experience from the action bar on the dashboard. It also showcases suggestions to merchants to print packing lists to enable more effective order preparation.
Streamlined packing
To enable efficient printing processes, I crafted a more transparent packing experience to enable merchants to ship packages to customers more effectively. This streamlined workflow allows users to target packages to pack in phases, generate comprehensive packing lists meant for packers, and build confidence in delivering products to customers.
establishing a design system
Early on in this project we knew we needed to establish a design system to make sure the platform would be easily built upon over time. I partnered with engineering to establish our first design system. I audited the existing platform and the designs to identify components and documenting out design specs for each one. The design system used atomic design principles so we started with the smallest atoms first then defined more complex components. We also brought a focus on accessibility to the design system by ensuring components followed accessibility guidelines and were built with the necessary affordances to be compliant with visual, screen reader, and keyboard accessible practices.
Example of the base elements of the design system.
Example of more complex components such as table row states, order statuses, and tagging.
Example of combining components to build navigational elements such as global search, page order, and navigating orders by day.
reception
The busiest time of the year was the end of the year holiday season. This is when sales on the marketplace increased thus resulting in much higher volumes of orders on the merchant platform and more daily usage. To ensure a stable and effective experience for merchant users we had to release ahead of this busy time of the year. We were able to rollout an advanced beta of the platform to test stability and ensure the platform would be ready for increased holiday traffic. This also allowed us to gather feedback from users on the improvements and how users were utilizing the action bar and guided print experiences through usage analytics.
Overall we received very positive feedback from merchant users who were excited to see the action bar and guided printing experiences for their shipping labels and packing lists. This allowed us to expand the beta with confidence and plan updates to additional parts of the platform using this new tech stack.
Evolving the end to end experience
In addition to revamping the dashboard and printing experiences in the merchant platform, I also identified opportunities to enhance the end-to-end experience for merchants. These enhancements also brought consistency to the overall merchant experience by bring it in line with the company brand.
Adapting the brand
As part of improving the merchant experience I saw an opportunity to define how the new brand direction, which featured a logo type, could be adapted for the merchant experience. By adding an icon that tapped into the mission of facilitating how our merchants “ship food love” I started a pattern for how the logo could be extensible to the other tools. I reviewed this adaptation of the brand with the marketing and product teams as well as the CPO and CEO and received approval for implementation.
Modernized Login
Login to the merchant platform was pretty bare bones and it was not clear it is a portal focused on merchant users. Updates to the login experience reflected the merchant focus of the platform while introducing a scalable pattern to adapt to various screen sizes that merchant customers may use. This new login design forms a re-usable pattern that can be extended to rest of the company tools.
Refining the look & feel
While refining the merchant experience, I identified other areas where we interface with merchants that could benefit from a consistent look, feel and tone. By consolidating how the company is communicating to merchants from the shipment platform to help and support and even email communications we build trust with our merchants that our tools are built with their use-cases in mind.
