×

Shell | Customer Chemical Portal

Project Kick Off: Settting the Stage

Introduction

Leading User Interface design development of responsive Salesforce-based e-commerce Shell Customer Chemical Portal for the purpose of ensuring existing clients about the continuation and improvement of quality of the service and product and further expanding clients database. Responsible for creating the structure of the website, defining how users interact with the product and application of existing pattern Shell styling library.

My work was based on previous research done by the Shell research team. They conducted user surveys, competitor analysis and existing content audits prior to my arrival. My job was to rely on the findings and continue the visual side of the project.

www.chemicals-customer-portal.shell.com (login required)

Disclaimer: This case study is for the purpose of the portfolio presentation. Some data or events may not be entirely accurate.

Mission

The original portal was outdated and the feedback the Shell research team received was not very positive, hence the decision to totally revamp the website.

  • Creating meaningful relationships between customers and product
  • Improving interface design to make it easier for a customer to purchase chemical products
  • Create purposeful navigation without broken links and make sure that important information about chemical use and transport is easily accessible
  • Applying existing branding guidelines throughout the site to reflect the quality and high standard of Shell

Shell Customer Chemmical Portal old wesbite
Shell Customer Chemmical Portal previous version of the website

Who are the users

Business users are non-technical users in the IT sense who access business accounts that are considered privileged as part of their daily responsibilities. Their day to day job is to ensure the continuation of existing interaction within their organisation and part of that includes often visiting Shell Chemical Portal.

Lean Canvas

Based on limited data about users I felt it would be the best to get all stakeholders, including researchers, into a workshop extract as much as possible information on a lean canvas. The important thing to note is that the canvas is based on assumptions from all people who created it so I had to regularly revisit and update the canvas based on new upcoming information about users and business.

Shell Customer Chemical Portal Lean Canvas
Shell Customer Chemical Portal Lean Canvas

Affinity Mapping

I used existing content audit data in excel and wrote all of it on sticky notes. With a help of colleagues and lean canvas we were able to map the site.

Brainstorming the map of the portal
Brainstorming the map of the portal
Activity: mapping the portal
Activity: mapping the portal

Final map

After the meeting, I have created the full map of the website which was signed off before I started working on the user journey.

Affinity portal mapping created in Miro
Affinity portal mapping created in Miro

Categorising user journey

Before the user journey was created it was important to understand what part of the portal have priority, what was used the most by the customer and what Shell would like to put forward as important, such as information about chemicals.

Categorising user journey
Categorising user journey

User journey

Finally, after few days the customer journey was created. My team had several meetings until the user and business needs were met.

User journey
User journey

Wireframing

It was a time to zoom into the journey and start working on wireframes. I first designed some rough sketches of the portal.

Wireframing, rough pencil sketches
Wireframing, rough pencil sketches

After the basic pencil wireframes were approved the higher fidelity wireframes were created. As we were analysing the layout further changes were done before the stakeholders were satisfied with the layout. Of course, it would be very beneficial to test the designs at this stage but time constraints were an issue for the Shell team and I accepted that some decision about the layout was decided by the major stakeholders. After all, they knew the business well and some parts of the portal, as mentioned earlier, such as chemical information and transport were given priority due to the nature of material.

Home page
Home page
Place a new order page
Place a new order page
Enter order details page
Enter order details page
Order report page
Order report page

Visual design and application of branding

These visual designs are made by strictly following Shell branding guidelines. After the designs were approved, I lead a team of India based developers for a further two months to make sure that portal development was following approved designs.

Wireframing, rough pencil sketches
Wireframing, rough pencil sketches
Login page
Login page
Order management page
Order management page
Home page
Home page
Order history page
Order history page
New order page
New order page
User management page
User management page

Final words

The site was fully developed and the launch was few months after I completed my assignment. Few things I wish I could have:

  • User testing - I feel that is important to test the product before launch. The Shell internal team decided that the portal was good enough to go live. It seems to me that they were right. The portal is still operating successfully.
  • We could use the exiting Shell pattern library, but the Salesforce developers could not apply to the portal. If they could find the solution, the portal would take less time to develop.

The portal on a mobile screen
The portal on a mobile screen