Shell: Customer Chemical Portal
Redesigned Salesforce e-commerce portal to grow B2B clients by 25 percent (1 600 to over 2 000) in three months
Disclaimer: This case study serves as a portfolio presentation and may contain some inaccuracies in data or events.
Who
Shell’s Chemicals division and its existing B2B customers relied on the Customer Chemical Portal. These users ranged from procurement teams at manufacturing firms to lab managers at research facilities who needed quick, reliable access to product details and past orders.
What
The portal forced users to hunt through PDF files for critical specs and order history rather than showing key data on screen. They could not download reports or trace shipments in-app, and the site layout often broke on tablets and phones. Slow internal response times made simple tasks—like reordering common chemicals—feel cumbersome and time-consuming.
Why
Corporate buyers expect a smooth, one-stop ordering experience. Friction in locating information, placing repeat orders, and accessing reports undermined user confidence and risked losing loyal customers. Streamlining these flows was vital to keep existing clients engaged and to fuel Shell’s growth in the competitive B2B chemicals market.
My Role & Scope
I joined on the fourth design iteration as UX lead and visual designer. My focus and responsibilities were:
- Information architectureI defined the site structure and mapped how users would move through key tasks.
- Interaction designI sketched wireframes and built Axure prototypes to show screen layouts and flows.
- Visual designI applied Shell’s branding to UI components for a clear, consistent look.
- Usability testingI ran trunk-test sessions to gauge ease and speed, then refined designs based on real user feedback.
- Team collaborationI managed a team of India-based front-end developers remotely, offering guidance on HTML/CSS and responsive behavior.
- TimelineThe design phase took three months, followed by a guided launch and a three-month monitoring period to track adoption and metrics.
Key Metrics & Outcomes
- B2B client base grew from 1 600 to over 2 000 (+25 %) in three months
- Repeat orders rose by 18 % in the first month
- Order flow steps fell from eight to five, cutting average reorder time by roughly 30 %
- Mobile sessions climbed from 2 percent to 30 percent, a substantial rise that enabled whole new user segment
- Faster ordering kept existing clients engaged
- Higher repeat rate boosted revenue predictability
- Mobile-friendly design opened a new device-based audience
- Improved portal trust helped win new corporate accounts
Thought Process and Design Philosophy
I focus on real user needs by testing early and often. I gather feedback, use simple prototypes, and iterate quickly so each change drives real improvement. I balance speed with clarity, relying on user data to guide design decisions and keep interfaces predictable and easy to use.
Process Breakdown
Understanding the problem
Lean canvas
We started with a lean canvas to capture the portal’s core value, user groups, key problems, and success measures on a single page. This exercise helped us list our biggest assumptions—such as which features drive order frequency—and decide how to test them fast.
Why? The lean canvas focused the team on clear goals and risks before we dove into detailed design.
Portal mapping
Next, we sketched every page of the portal on sticky notes and grouped related screens together. This map showed how users moved from the dashboard through product details to ordering, and it exposed dead ends and loops in navigation.
Why? Seeing the full site structure at once made it easy to spot where users might get lost or hit unnecessary screens.
Personas
Using user segments from Shell’s marketing team, we built three personas: a procurement manager, a lab supervisor, and a supply chain coordinator. Each profile detailed their background, goals, and common frustrations with ordering.
Why? Personas gave us concrete characters to design for, so every decision could be checked against a real user type rather than abstract data.
User journeys
With those personas in hand, we mapped each one’s end-to-end path, from login to order confirmation. We marked steps where they hunted for PDF specs or lost track of past orders.
Why? Journey maps pinpointed exact pain points in the flow, so we knew which areas to fix first.
Ideation & Strategy
Feature Prioritization
We started by charting every portal function on a usage matrix, plotting how often each feature was used against how many unique users accessed it. This “feature prioritization” made clear which tasks—like quick reorder, order history, and product specs—drove the most value, and which screens saw little traffic.
Why? Quantifying feature use let us focus our design time on the high-impact areas that real users relied on, rather than guessing which functions mattered most.
User Flow Mapping
We laid out end-to-end flows for the top tasks (reorder, view history, check specs) as simple diagrams showing each screen and decision point. This ensured we understood the full journey—from landing page to confirmation—before designing any layouts.
Why? Detailing each step uncovered hidden branches (like error states or alternate paths) so our wireframes would cover every scenario and avoid mid-project surprises.
Navigation Map
Next, we translated our prioritized features into a navigation map. We organized main and secondary menus to surface top tasks immediately—placing reorder, history, and specs links in primary navigation—and tucked low-use features into a secondary section. This blueprint showed exactly how users would move between key screens.
Why? A clear navigation map ensured that our redesign guided users directly to their most common tasks, reducing clicks and eliminating buried options.
Pencil Wireframing
With navigation in place, we sketched rough layouts on paper. Each pencil wireframe explored different ways to present the dashboard, product pages, and order flow—trying grid versus list views, varying panel placements, and testing where to show recent orders.
Why? Quick paper sketches let us test multiple layout ideas at near-zero cost, so we could spot promising directions before committing to digital work.
Digital Wireframing
We then recreated the approved sketches in a digital wireframing tool. Here we refined spacing, labeled fields consistently, and ensured the flow matched our navigation map. These mid-fidelity wireframes let stakeholders click through a realistic order path without visual styling distractions.
Why? Digital wireframes balanced fidelity and speed, giving us a clickable prototype to validate flow and content hierarchy before moving into visual design.
Visual UI Design
Finally, we applied Shell’s brand system—colors, typography, and icons—to the wireframes. We polished button styles, form fields, and layout details. The result was a cohesive UI mockup that matched Shell’s look and felt intuitive on desktop, tablet, and phone.
Why? Bringing in the brand at this stage ensured consistency with Shell’s guidelines while letting us fine-tune visual details once the structure and flow were proven solid.
Execution
I built an interactive Axure prototype from the digital wireframes so stakeholders and users could click through real screens. We applied Shell’s brand colors, typography, and icons to show the final look and feel. I then worked with remote developers to turn the prototype into responsive HTML and CSS, checking desktop, tablet, and phone views at each breakpoint.
Why? Prototyping early caught issues before code. Branding in the prototype gave everyone a clear vision. Building in code and testing breakpoints ensured the design held up on all devices.
Iteration & Outcome
We tested the branded prototype with target users to uncover small wording or placement issues. Those tweaks went straight into the code and were retested until the flow felt smooth. After launch, we watched key metrics. Cutting the order steps from eight to five and raising mobile sessions from two to thirty percent showed our work made ordering faster and more reliable.
Why? User tests made small but vital fixes. Tracking metrics confirmed our changes truly improved the experience and helped drive a 25 percent increase in B2B clients.
Lessons Learned
I learned that grounding decisions in real usage data keeps the team focused on what matters. Charting feature use early on let us avoid redesigning low-value screens.
I also saw how quick, low-fidelity sketches unlock better ideas than jumping straight into high-fi mockups. Testing layouts on paper saved hours in Axure and code.
Idealy, I would bring developers into the ideation phase sooner. Their input on technical constraints and opportunities would help refine wireframes and speed up hand-off.
I’d also run basic mobile tests even before visual design. Catching layout issues on small screens earlier would shave off another round of tweaks post-launch.
Final Takeaways
This redesign shows how focusing on real user data and quick iterations can unlock big gains. By spotting high-value features early, mapping every step, and testing paper sketches first, we cut order time by 30 percent, grew clients by 25 percent, and boosted mobile use from 2 percent to 30 percent.
If your team needs to improve a portal or streamline a complex flow, let’s connect and see how we can make your users’ lives easier.