Kroeger Inc.
B2B Ecommerce Portal
UX / UI / Strategy
My Role
I worked as a UX Designer and Technologist alongside my partner at Vessel to establish the requirements, design strategy with the overall goal of improving usability and aesthetics of the B2B framework.
Background
Kroeger Inc. is a Canadian importer, wholesaler and distributor of toys, games and gifts in business for over 45 years. Some of the brands they carry include Mattel, Rubik’s and Spinmaster. As a part of their focus on improving and evolving their business, and in order to better serve their B2B customers, they wanted a new web portal that could facilitate all their online ordering.
The key is to remove as much friction as possible from the purchase funnel to create a seamless ordering procedure for Kroeger’s customers saving headaches on both the purchasing side as well as easing the work done on the fulfillment side.
Process
We started with interviews and surveys of key stakeholders on the client side and potential users on the purchasing side to understand the nature of the business and establish the current flow of communication and goods from order to warehouse to fulfillment and billing. From this research I was able to form a good understanding of the various user groups, overall user flow and some of the nuances of this particular type of interaction.
Initial research was captured and distilled into usable insights focused on finding the common ground between the audience and the business’ goals for the website.
Site Architecture
Keeping the focus on the ordering process was key but also giving new users the opportunity to quickly learn the new system was flagged as important so the catalog and help links were put at the forefront.
The ability to drilling down to particular products, help topics or account administration would be given a secondary treatment.
Wireframes
Starting with some simple sketching sessions we landed on an overall layout that addressed our concerns of easy navigation and usability while hinting at a simplicity and minimalist UI. After sharing the sketches with the client and walking them through our thinking we felt confident that could jump straight into the next phase of design as our earlier research combined with walkthroughs in a group setting validated our work to present.
Collaborative wireframing sessions using Invision’s Freehand helped us to iterate page layouts quickly and remotely by using simple sketching tools to get our ideas onto a virtual whiteboard.
User Interface
A clean, minimalist, branded user interface would help to establish Kroeger as a leader in their industry standing out from their competition which were mostly using outdated design completely lacking in usability.
Responsive mobile design stacks elements and gives the homepage a clean, easy-to-follow narrative.
Result
A more modern, modular user interface that works well across multiple devices and speaks to the premium quality of the product. Subtle animations, intuitive navigation and premium images all help to position the company in the Tier A group of office furniture manufacturing. The improved organization and navigation help to reimagine the website as a powerful sales tool that can be used all the way down the sales funnel from reps to dealers and ultimately end users.
