Hitachi Energy

Designing a B2B E-commerce experience.


Hitachi Energy.


6 months


2021 - 2022

My Role:

Working with 2 additional designers, I led the end-to-end design process for defining new features and the design system. 


PowerShop ABB is a division within Hitachi Energy that manufactures industrial energy equipment, with an e-commerce platform available to customers who fit specific business criteria.

The biggest unaddressed customer issue for the platform was a confusing quotation process (a negotiation phase between a customer and Hitachi). Customers were expected to search for products on their website, but continue negotiation off the platform.

This resulted in a lack of 

  • customer confidence due to an incoherent process.

  • quantitative data for Hitachi on the progress and performance of deals.

In addition to redesigning the website, I crafted new experiences for the quotation process, expanding the digital footprint of the platform.


Key Stakeholders.

I began the process by educating myself on the Configuration, Pricing, and Quotation (CPQ) process while leading stakeholder meetings with business partners in Germany, India, Thailand, and Australia. 

To help me and my team to understand, I created a format for evaluating the customer journey.


Units for evaluating the customer journey.


Synthesized Customer Journey Map.

Defining Spaces.

I began by compartmentalizing activities into digital spaces. This helped me manage design tasks over the duration of this project.

Rough diagramming also helped me make stark distinctions between spaces and flows, which 

helped me accurately communicate design tasks to our product team.


User Flow with spaces.

Laying the foundations for the platform's quotation process.

The quotation process typically involves the customer requesting adjustments in the order details, which may include discounts, time of delivery, etc. 

The roadmap only included a 'Quote' button, with a text box allowing a customer to describe what they needed. 


Flowchart of the quotation process.

By trying to understand the quotation process from a human-centered perspective, I learned that the features on the roadmap could only address a small portion of the journey. 

The user was expected to trigger the quotation process on the platform, but continue the process off the platform.

Typically I would have proposed a pathway for introducing the missing features in the future, however in this case a partial solution had the possibility to cause more confusion than not having these features. 

I rushed to develop an alternative by translating human interactions to system inputs. However, this had its limitations.


Breakdown of the conversations involved in quotations.

The biggest challenge was bringing the engineering team on board.

Having a structured form of capturing data was promising, but ambiguity around the final UI solution kept a lot of team members from considering it seriously.

I prototyped a few rough concepts to help my team visualize the possibilities.

Rough prototypes to help visualize the quotation process.

The prototypes, while unfinished, sparked a serious debate among the team. The new features would delay shipment, but after seeing an alternative, it was hard for the team to go back to the original idea.

This led to long discussions involving the senior leadership of the business and product teams.

With the new findings, the leadership decided to delay shipment if it allowed customers to have a more streamlined quotation process.

The business also had the added benefit of capturing more structured information on what customers are looking for. 


Updated quotation flow.

My next step was finding a seamless way to integrate the new ideas into the user flow. 

The key to a seamless flow was to design a product tile within carts flexible enough to host complex information and interactions.


Product tile component in different situations.

Unlike the ideation concepts, the updated product tile allowed users to interact and review their content with fewer clicks, and without the need to open/close panels.

After a few rounds of iteration and testing, we were able to deliver a seamless flow for quotation and negotiation. Positive feedback from participants was able to encourage the engineering team, but we also had to strip down features like 'Batch Actions' and 'Product recommendations' from phase one to avoid further delays. 

User Flow for an Itemized quotation Process.


Building a flexible quotation tool from the ground up was a substantial creative and technical undertaking.

The team has seen buyers favorably adapt to the new process along with positive user feedback.

With the platform's digital footprint expanded deeper into the customer journey, the business team has also seen more transparency in the success and failure of deals.

Expanding the platform's digital footprint deeper into the customer journey has, 

  1. given the business team more transparency into the success and failure of deals.

  2. opened the product team to new avenues for design.