Core Brands B2B Portal
As the sole UX/UI designer, I helped create the B2B Portal that transformed Core Brands' into an e-commerce company. Core Brands manufactures Smart Connected Home hardware, speakers, and A/V hardware. Its biggest customer segment is Custom Installation companies. The collected brands (ELAN, SpeakerCraft, Furman) have been in business for decades, and the ordering process was strictly offline.
Until the B2B Dealer Portal launched, orders were placed by email, phone, or fax. Which were then processed by hand.
I was the sole designer for the new B2B e-commerce portal, involved from ideation and user research, through the successful launch. I designed many of the feature additions to the live system, and surveyed our Beta customers on their specific experiences with the Portal.
This was a large-scale, strategic project. Every aspect of the company was touched by the Portal creation process, as it forced the automation of ERP processes, the collection, archiving, and presentation of assets (images, manuals) for every product we sell.
We built on the MVP Beta release, adding new features and fixes regularly. We launched with a solid foundation, continuing to add features and bug-fixes in bi-weekly sprints. We added a Compare function, Replacement Item cross-selling tools, added Gefen as a brand, and third-party products pretty seamlessly. I set up the Netsuite hooks to talk to International customers differently from Pro Audio customers.
B2B Portal Case Study
Core Brands is a Smart Connected Home, A/V equipment, and speaker manufacturer, including ELAN, Furman, Panamax, SpeakerCraft, Niles, and Sunfire brands. The biggest customer segment is "Custom Installers," who put home control systems and home theaters into new construction and retrofits. None of the brands involved had ever had an e-commerce ordering system, relying on phone orders.
User Research. The Portal team talked to our dealers and sales team to understand the existing system, and how an e-commerce system could meet their specific needs. Installers want to know spec details, like "speaker cutout size," since they may cut the holes in a new construction months before installing the speakers. We extended the Netsuite Item Master to include all related product specs, and and "other specs" format we could put the outliers in. Some dealers also wanted their installers to have Portal access for manuals, and to sell through to their cusomers, but did not want their installers to place orders or see their wholesale price. I created a "View Only" design to address this, showing MSRP, and hiding Account info and purchasing options.
Specs. I provided detailed feedback on the Business Requirements document, which was a collaborative Jama product definition document. My mockups were used to illustrate features and concepts.
Development. We worked with Netsuite's SCA team in Uruguay to build our requirements on top of the Suite Commerce Advanced platform. Initial development went very quickly, but slowed down due to developer reassignments after the initial cut of the site was working. We responded by being very selective about giving the dev team "bite size" tasks to finish in short sprints. Every week or two weeks, I would move a feature request (or set of requests) to the top of our shared list, update the short requirement description and mockup, and we would discuss them in the weekly sprint meeting with the Uruguay team. This created a release rhythm with good momentum.
Customer Cleanup. I worked with the web developer and project lead, doing the UX and UI, to make a self-service "account scrubber" tool that let each customer "verify" (clean) their Contacts and Addresses, and tell us who should get access to the Portal. Changes were reviewed and uploaded to Netsuite, which automatically sent out a "Welcome" email I wrote with that customer's new Portal login.
Live Beta. Our Beta customers placed real orders with real money, and we reviewed each order before it shipped. By the time we launched, we'd already processed a million dollars through the Portal, and customers were calling us to get added to "The Beta." Dealers using the Beta Portal showed an increase in order frequency and size, compared both to their previous behavior and to similar-sized customers.
Beta Satisfaction Survey. I learned to write customer surveys on this project. On Monday I got Survey Monkey access, and by Wednesday afternoon was getting responses to the largest customer-facing survey Core Brands had done to that date. Response was positive, and the one guy who hated it thought "there was too much internet."
Launch. We launched at CEDIA 2015, and the main focus of our booth was the Portal. I was on the floor of the trade show, showing what the advantages were to shopping online, and giving people access. With the high traffic in the booth, it became easier to direct new customers to the "Become a Customer" form on the Portal login page, than to give their contact info to a Sales person.
Growth. Customer uptake was steady, with the Portal becoming the biggest ordering mechanism for our biggest customer segment, the Custom Installer. To expand beyond our main customer segment, the Uruguay team added a "Primary Channel" suffix to the homepage divs, and I set up custom elements that let us talk to Distributors and Pro Audio dealers differently than the Custom Installers.
Core Brands needed to replace the existing "look at a price list, call in your order" system, with a more robust self-service e-commerce model still supported our dealer programs. Minimally, customers needed to be able to see what was in stock, how much it cost, and when it would arrive. Best case, the system would suggest similar products and have complete specs for each item.
Sole UX Designer, user and competitive research, UX/UI, and visual design. I created production tools, worked with internal and external developers to get features into the system, and actively tapped Product Managers and sales people for their needs and feedback.
I met with the project lead to talk conceptually about what we wanted, assessing similar solutions, and talking through our customers' needs. I sat with our CSRs as they processed orders, transcribing SKU numbers from emails into Netsuite. We looked at current e-commerce platforms for ideas on how to best present our products and programs to our CI Dealers.
I created clean mockups of our ideas to test the interactions, and used them in the Specs document to get the Capital Expenditure approval and bids on the project. We chose Netsuite itself to build our custom SCA solution, and pushed hard with them to get a usable Beta in three months. We let about 100 customers place real orders through it. I wrote a customer usage and satisfaction survey that was analyzed and presented to senior management.
The Portal launch was the main focus of our booth at CEDIA 2015, and helped generate our biggest sales week of the year. Customers place more orders, and larger orders, through the Portal than they did ordering over the phone. 65% of the CI dealers use the Portal exclusively, and that number goes up every quarter.
These are a few of the custom layouts and feature designs I did for this project. I designed the layout for virtually every functional page, including three kinds of search results, the responsive phone and tablet layouts, and custom areas inside the "My Account" section.
The Marketing Department creates the visuals for each section of the homepage, using the rules I documented for the responsive sizes. The overall design was meant to showcase the brand graphics, so the site itself is very clean, with red accents and green action buttons.
Every element below the Menu can be customized by visitor type, so Distributors will see different promotions than Direct Dealers.
Categorization cuts across brands, so a SpeakerCraft dealer looking in "Subwoofers" might see that they should become authorized to sell Sunfire, so they could offer their customers a better selection.
I worked on the visual part of adding the "Outlet" section, as a way to put all our closeouts and clearance items in one findable place, to appeal to a particular kind of dealer.
Because e-commerce websites are a common framework, most of our research was on how our existing business systems could be automated in order to support the Dealer Portal, and self-service online ordering. I met with groups of our internal customer-facing stakeholders from each department (Sales, Product Management, Accounting, Marketing, Customer Service, and Tech Support), to document their current processes and to identify their needs and perspectives relating to the online ordering process we were designing. We had follow up meetings to show progress, and to keep each team in the loop about aspects that would affect their work and relation to the customer.
Since we had a small team, and were moving quickly, we used real customers to stand for each class and size of dealer. For example, "E_____ S_____ needs to control which employees see prices, so we need to make sure the 'view only' feature works well for them." To empathize with particular attitudes, rather than feature needs, we used informal 'proto-personas,' like "Gus," our imaginary tech-averse installer who preferred printed price lists, and called in orders from the front seat of his truck.
Portal Beta Customer Survey
A few weeks into the Portal Beta, I wrote and sent a 20 question survey to the Beta customers, asking about their ordering habits and Portal usability. About half of the 120 users took the time to respond. No responses were required, and every question had an optional Comment box. I tweaked the stock SurveyMonkey graph colors and styles for clarity, and we used them for internal presentations.
Key Insights - Satisfaction
92% of beta respondents had a neutral ("Meets My Needs") to positive view of the Portal. The single "Not Impressed" respondent literally wanted a simple list of products and quantity boxes, like a pricelist. He is represented by the red "pimento" in the olive graph.
Almost all the respondents would recommend the Portal to their colleagues, and one said, "This is literally the best thing Core Brands has ever done."
Key Insights - Finding Products
Only 17% of people used the "Narrow By" filters as one of their methods to find products, but the people who used them found them "extremely nice to have." Search and Brand were over 65%, with Category used by 53%. We walked through each method of finding products, and saw that the topmost "Narrow By" options were redundant, if you'd started a search from Brand or Category. We removed those redundancies, so the first thing people would see were actionable filters. This was an incremental polishing, not earth-shaking
Choosing Beta customers. The project lead analyzed our customers' activity, and we identified a set of ~100 mid-sized domestic dealers ordering twice a week or more to invite to become real customers of the Beta Portal. I wrote outgoing emails to invite them to participate in the Portal Beta test, starting with "verifying" their account data. Our internal Netsuite lead showed me how to set up the emails in Netsuite's CRM tool, and we batch sent them to our list.
We couldn't just give people logins and run wild, because the system needed to know which contact email should have an account, what the Primary Shipping Address was, etc. This inflection point in the company history was also an obvious opportunity to clean up all the Netsuite customer data, remove duplicate entries, and opt our customers into different kinds of email communications.
Customer Account Cleanup ("AVT Tool"). I worked with our internal front end developer to design an online tool that shows each customer the account info we have on their business: Contacts, Addresses, dba Name, etc.
Some customers had HUNDREDS of addresses in our system, one for every address or job site we'd ever shipped to on their behalf.
The main issue with the Contacts associated with customer accounts was duplication, with the same email address appearing as different "Contacts," but there were also Contacts for ex-employees, and Contacts with emails like "firstname.lastname@example.org," which may have come from our CSRs logging phone calls to an account, without getting personal identifying information.
The new tool identified Primary Shipping, Primary Contact, and business roles like "Purchasing," "Sales," or "Owner." We required at least one role to get Billing and Shipping emails, and allowed customers to opt different Contacts out of specific kinds of marketing emails.
We made the tool as simple and user-friendly as possible, given the complexity of the bad data. In a few cases we had to do the cleanup for someone over the phone, but having the Sales Manager use the tool was far easier than making the changes directly in Netsuite.
Round 1. Simple "New Customer" Form
Since the B2B Portal required a login, we needed to sort out the kinds of people who visited without a login. End-users needed to be sent to dealers, our existing customers needed a way to request Portal access, and we wanted to capture contact info from dealers who were not our customers.
I designed a simple lead form, which was designed to capture a lot of leads. User-centered, it was easy to fill out, but covered both company info, and the name and title of the person filling out the form. We could cross-reference the company web address and phone to see if they were in our system already, and the sales guys could do a little research before calling them.
Sales asked for more questions to be added: business size, yearly revenue, projected spend, competing lines carried, and so forth. From the Sales perspective, this would weed out bad leads. From a user-centered perspective, it could also weed out good leads who felt the questions were invasive, or time consuming.
Round 2. Automated Pre-Qualification
Sales did not have the time and resources to check the eligibility for the number of leads generated by the simple "cast a wide net" form. We had promised new leads that Sales would call "in the next day or two," but were delivering "sometime next week, or maybe never."
The director of New Business wanted to automate the new customer process, from prequalification to initial access. His team gave me a first pass at the questions they needed asked, including about 100 "categories of products sold." Their plan was to allow qualified new customers into the Portal at an arbitrary wholesale price Level, track their purchases over 60 days, then set them up with the appropriate access, or remove Portal access privileges.
I pared down the questions, and make a logical prototype in Invision, with different "traps," to disqualify leads based on their answers. For example, someone who only did a few jobs per year would get an early result with a list of our Distributors close to them.
Working on the logic flow, several friction points became apparent in the original plan: if the new customer didn't buy enough merchandise in 60 days to keep their Portal access, some actual employee would need to shut them off. Customers buying a lot of merchandise would need their price level changed, and Accounting would have to issue credit memos toward their past orders to account for the change.
Round 3. My super-simple solution.
Why not just let the new customers buy at MSRP? This would incentivize new customers to place a large opening order to get their wholesale pricing. We wouldn't need to track customers to remove access after 60 days, and we could make the sign-up form simpler, pushing the most detailed questions to a follow-up engagement.
The director of New Business stopped, cocked his head, and said, "That's really elegant. That's an elegant solution." My boss was also happy, because allowing MSRP customers on the Portal would let us recapture $1M of sales to the Gefen brand's "walk up" customers, who couldn't buy direct after the merger (we had planned a new Gefen-only e-commerce site). We could also sell Sunfire subwoofers and Furman audiophile gear direct to consumers, which he had wanted to do for a long time.