OneMarket B2B Portal

The OneMaket B2B portal is a single location to manage all of your OneMarket services.
I was tasked with creating the OneMarket B2B portal.  The team consisted of a Lead Designer (myself), a product manager and a lead engineer.  The Objective was straightforward; create a single location to manage all of OneMarket's services for Brands, Venues, and Retailers.  Looking down the pipeline it was obvious that the number of products and types of products were going to grow rapidly. The B2B portal needed to scale quickly and allow product owners to easily integrate into the the system as new products were added and existing products grew with features.

User Goals

Looking at our existing products it was apparent they had clear task patterns. The next step was to bucket task patterns into high-level user goals for the portal.

Portal Access

After assessing the user goals it was time to map out who would be accessing the portal and what they would have access to.  It was also important to note who would be viewing the portal, whether they would be an internal user or an external user.

Page Templates

Now that the portal access had been mapped, it was time to design some templates that would allow our existing products to integrate easily.  Upon further examination of our products, we realized the need for three template types for all our products to integrate and maintain a consistent navigation.

Design Ownership

In order to maintain a consistent experience, it was important to decide who would own what. It wasn’t feasible for the B2B team to manage and design every product in the portal, so the team had to draw a line about what they would maintain and what product owners would be responsible for. We decided the header, footer, and all navigation would be maintained by the B2B team. Product owners would be able to decide which navigation template they wanted to use and they would be responsible for the content section.  The product owners could then leverage the component library maintained B2B team to design their product.

Designing The Template

It was now time to bring the templates to life.  We adhered to the initial design hierarchy we outlined in our templates but iterated on countless visual designs informed by the OneMarket Style guide finally arriving at one that all stakeholders agreed on.

Building The Component Library

After agreeing on a visual design for the templates we went to work on the components that could be found throughout our suite of products.

Putting It All Together

Finally, it was time to build out some products.  We built some new products and skinned some existing products. The overall feedback was extremely good. Product owners and designers felt they could design and iterate on products quickly and easily while maintaining a consistent user experience.