In the summer of 2019, I joined LinkedIn’s Customer Experience Design (CXD) team as a user experience design intern. Of the two projects I worked on, one was expanding Solution Builder, LinkedIn’s in-house quoting, ordering, and billing platform (like an online shopping cart operated by sales representatives) so that it could be used to sell LinkedIn Talent Hub, a subscription-based Application Tracking System (ATS) for recruiters. Because Talent Hub used a special pricing scheme, I designed and added new features to the existing Solution Builder workflow to allow sales representatives to configure Talent Hub and give customers promotional discounts in a more streamline fashion. All the solutions I designed for this project were shipped.

UX Design Intern
May - Aug 2019
Sketch, Figma, InVision

Because of Talent Hub’s special pricing scheme, adding it to a quote requires two pieces of information: the number of employees that need access to the product, which is manually entered by the sales representatives, and the amount the customer has spent on other LinkedIn Talent Solution products, which is calculated automatically in the backend. We needed a way to collect and display this information to keep the sale representatives informed. Moreover, because Talent Hub is a new product in the ATS market, LinkedIn is promoting it by making the first year free for a deal lasting three years of more (e.g. 100% off for Year 1, 0% off for Year 2 and 3). This posed challenges to the existing Solution Builder flow because it only supported an one-time discount applied to the entirety of the quote term (e.g. 10% off for whole 3 years).

To tackle the problems and issues stated, I followed LinkedIn UED’s “double diamond” design process. In the discovery phase, I examined and analyzed Solution Builder’s current workflow to understand the status quo and determine where new designs were needed. I also worked with Solution Builder’s product manager to define user stories and scenarios to guide my designs.

Due to the nature of this project, there were many cross-functional stakeholders (e.g. the Talent Hub product team, the sales representatives, the pricing team) whose requirements I needed to fulfill. Therefore, in the design phase, I created several different solutions to address the various issues and requirements. I then iterated on each of my solutions multiple times and created interactive prototypes in order to test my solutions with end users. I further improved my design based on feedback gathered from user testing sessions. More on this in the next section.

The develop and deploy phases were handled by the software engineers mainly, but I also worked closely with them to finalize and hand off my designs. Minor adjustments were made to my design during these phases, for we needed to allocate engineering resources most efficiently to launch the product before schedule deadlines.

In order to test, evaluate, and consolidate my designs, I scheduled one-hour user testing sessions with two sales representatives at LinkedIn who were familiar with the Talent Hub product. Below are feedback and reactions to different solutions I created.

Means to add Talent Hub product to a quote: Modal vs. No Modal
The first step of selling Talent Hub through Solution Builder was adding it to a new quote. Because sales representative would enter the number of employees that needed access (i.e. the number of licenses) manually, one way to let them do so was popping up a configuration modal, which was also similar to how other products worked in Solution Builder. Another way to do so was adding the product directly to a quote, and entering the number of employees by changing the “quantity” field. Users showed no strong preferences in the testing sessions, but the Talent Hub product team wanted the quantity to be fixed to 1 to give the customers a notion that they are buying one access to a product instead of buying one product multiple times.

Means to explaining pricing calculation: In Modal vs. Tooltip
To keep sales representatives well-informed throughout the quoting experience, we needed a design to explain how the pricing of Talent Hub was calculated based on the information entered. One solution was to display how much a customer had spent on other LinkedIn products alongside with the number of employees in the configuration modal. The other solution was to pop up a tooltip displaying this information when users hover over the “net price” field. Users in general preferred the tooltip method, for the pricing information could not be easily accessed once the configuration modal was closed. However, they also pointed out that the tooltip was hard to discover, as there was no sign showing that the “net price” field is hoverable.

Means to editing multi-interval term
In order to allow sales representatives to give different discounts for different time intervals within a quote term (e.g. 100% off for Year 1, 0% off for Year 2 and 3), a design is needed to configure and split the quote term into smaller intervals. This could be achieved in two ways: in-place or through a modal. In-place editing was more intuitive to users but were limited in functionality due to the tight layout of the UI. Modal editing took extra on-boarding effort, but were more extensible and offered more powerful functionalities. Extensibility is an important factor for this feature because the same design would be applied to other products sold through Solution Builder.

Building upon the existing Solution Builder flow, I designed a new quoting, ordering, and billing flow for Talent Hub. Below are the main screens of the newly designed flow, guided by LinkedIn’s design system, Art Deco.

Click here to interact with the prototype.