Brandwise Redesign: Top Navigation
One of the first hurdles we crossed in redesigning the Brandwise product suite was how the top navigation would work. We knew for sure that we had to account for people that work for multiple businesses as that is not uncommon in the wholesale industry. But beyond that, we needed to create a top navigation that would be useful.
We looked at two patterns when ideating how it would work
- Users have to return to the Brandwise dashboard to switch between brandwise produts
- Users could switch directly between Brandwise products
We pursued the second option as it isn't unusual for users to use multiple products in a single session.
This broke our top navigation into three sections.
- The far right section is which business the user is currently doing work for
- The middle section are the pieces of Brandwise that every company has access to (Help and Passport)
- The far left section is every product that a company has a contract to use
Brandwise Redesign: Page Layout
After settling in on a top navigation, we needed to come up with a consistent page layout to use for the individual products. We played around with several different layouts but settled on a tabbed page with the tabs being how we end up organizing the products when applicable.
To see it all come together, view the second image.
Transit: The Early Stages
Brandwise works with ~500,000 suppliers, all of which have their Enterprise Resource Planning (ERP) systems set up differently. Branwise needs a way for suppliers to get their product files into Brandwise in a format they can consume (e.g. where one supplier puts "SKUNumber", another supplier may put "SKU", and Brandwise is looing for the field "ProductSKU".)
After many rounds of iteration and quick-and-dirty user testing with our support staff, we started to come to a workable solution illustrated below. Unfortunately, Brandwise is a small company and would not allocate the time or resources to proper user testing for this project. I have successfully conveyed the importance of such ventures on subsequent projects and regularly engage in proper user testing.
Transit: File Preparation
The first step of file preparation is getting the users file into Transit. We do this with a simple uploader.
The second step is teaching transit how their files are set up by specifying which delimiter their ERP uses as well as if the first row of the file contains column headers or not.For a GIF of this process please click here
As previously discussed, all our our 500,000 suppliers have ERPs that are set up differently. There is minimal standardization of terminology in the industry. In an effort to combat this confusion, we've attached tooltips that define what our properties mean.
Additionally we have made tooltips that show the user the first few rows of their own data to remind them what they are mapping.
Transit: Activity Hubs
After highlighting the disconnect between our marketing and our implementation with my coworkers and superiors, the direction of Transit has changed dramatically as a result of my work. Currently, only product file uploads have been develop, moving forward the following changes will be implemented.
- Transit is a tool for suppliers, agencies, and retailers, all with different tool sets
- Transit will handle images, promotions, price lists, and other conditions that our B2B platform needs to handle
- Transit will be a tool to put data into Brandwise, get data out of, and view what data exists
This direction opens up the possibility of an unlimited number of types of data that can be handled by Transit moving forward. I am currently working on developing UI's for future activity hubs for Price Lists, Promotions, and more that may look something like the images to the right.
I would cherish the opportunity to discuss them with you further.