30% Increased Efficiency Through a Transformed Delivery Experience
Mobile App
Oil & Gas
6 months
Real-world projectWho’s Shell Global?Shell Global is an international energy company with expertise in the exploration, production, refining and marketing of oil and natural gas, and the manufacturing and marketing of chemicals.
BackgroundProject Overview
In the competitive energy and petrochemical sector, Shell faces significant challenges. The industry is marked by complex supply chains and a heavy reliance on paper-based processes, leading to inefficiencies in invoicing and delivery confirmations. These challenges not only slow down operations but also impact customer satisfaction, making it imperative for Shell to innovate.The ProblemShell recognized significant inefficiencies within their invoicing and billing processes, particularly in the interactions with distributors. The existing reliance on paper-based delivery documents led to numerous challenges, including:
Invoicing is slow, causing cash flow delays.
Frequent disputes are time-consuming to resolve.
Manual processes create bottlenecks and delays.The Solution
To address these challenges, the Shell business team decided to pursue a digital transformation initiative aimed at simplifying the billing process. Their approach focused on developing a MVP mobile application that would replace traditional paper documentation with a more efficient electronic solution.
The assumptions were:
The assumptions were:
Capturing customer signatures digital, will make it faster for drivers to confirm deliveries on their phones instead of using paper.
Going paperless will help reduce mistakes in delivery records and speed up billing.
Having a mobile app will make it easier for more drivers and admins to want to use it, and improve the customer experience.Project Team• Product Owner
• Project Manger
• Service Designer/User Research
• Lead Business Analyst
• Lead iOS Developer
• iOS Engineer
• Full Stack Developer
• Project Manger
• Service Designer/User Research
• Lead Business Analyst
• Lead iOS Developer
• iOS Engineer
• Full Stack Developer
My RoleMy role as the Senior UI/UX Designer, I was responsible for user research, wireframing, high-fidelity design, prototyping, and user testing. I collaborated closely with a team of developers and stakeholders to ensure the design aligned with business goals.
Tools Used• Sketch
• Photoshop CC
• InVision
• Zeplin
• Jira
• Photoshop CC
• InVision
• Zeplin
• Jira
My Design Process
Define
Discovery
Ideation
Design
Test
Delivery
Define
Unearthing Insights and Aligning GoalsIn the initial phase, I focused on understanding the existing delivery confirmation process and identifying key pain points and user needs.
This involved:
Stakeholder Interviews:• Conducted comprehensive interviews with key stakeholders to gather insights on current practices and challenges.
Requirements Gathering:• I reviewed previous research and current requirements to form a comprehensive picture of the project scope.
Goals and Accomplishments:• I established a clear understanding of the existing delivery confirmation process and its limitations.
• I aligned project goals with stakeholder expectations and user needs.
• I aligned project goals with stakeholder expectations and user needs.
Discovery
Research and Analysis
Personas
With an initial understanding of the project scope, I started doing exploratory research with reviewing existing project documented, research findings and the product backlogs.
Next, I created user personas to capture insights of the needs and pain points of the key users I synthesized, so that the design decisions my team and I would make as I move forward were user-centered and aligned with actual user needs.
Next, I created user personas to capture insights of the needs and pain points of the key users I synthesized, so that the design decisions my team and I would make as I move forward were user-centered and aligned with actual user needs.
Users we focused on
Admin User• Name: Sarah Thompson
• Age: 35
• Role: Administrator
• Experience: 10 years in logistics management
• Technical Proficiency: High
• Age: 35
• Role: Administrator
• Experience: 10 years in logistics management
• Technical Proficiency: High
Users we focused on
Driver User• Name: John Miller
• Age: 28
• Role: Delivery Driver
• Experience: 5 years in delivery services
• Technical Proficiency: Moderate
• Age: 28
• Role: Delivery Driver
• Experience: 5 years in delivery services
• Technical Proficiency: Moderate
Distributor Customer
• Name: Emily Johnson
• Age: 42
• Role: Distributor Customer
• Experience: 15 years in supply chain management
• Technical Proficiency: Low
• Age: 42
• Role: Distributor Customer
• Experience: 15 years in supply chain management
• Technical Proficiency: Low
Business Analyst
• Name: Kevin Spoonemore
• Age: 38
• Role: Business Analyst
• Experience: 8 years in data analysis
• Technical Proficiency: High
• Age: 38
• Role: Business Analyst
• Experience: 8 years in data analysis
• Technical Proficiency: High
IT Support Staff
• Name: Lisa Hernandez
• Age: 30
• Role: IT Support Specialist
• Experience: 6 years in IT support
• Technical Proficiency: High
• Age: 30
• Role: IT Support Specialist
• Experience: 6 years in IT support
• Technical Proficiency: High
Moodboard
I developed a collections of moodboards as a strategic tool to visually communicate the design direction and aesthetic vision for the application. The moodboards was an essential deliverable that not only guided the visual design but also fostered collaboration and alignment among stakeholders.
Ideation
Ideation and ConceptualizationThis phase focused on generating ideas and conceptualizing the design of the Shell Delivery Mobile application.
Goals and Accomplishments:• Generated innovative solutions that addressed key user pain points
• Created initial design concepts that laid the foundation for more detailed design work
• Created initial design concepts that laid the foundation for more detailed design work
Outcomes:• A set of concept sketches representing the initial vision for the application
• User flows mapping out the application's structure
• Initial wireframes outlining the basic layout and functionality
• User flows mapping out the application's structure
• Initial wireframes outlining the basic layout and functionality
Early Sketches & Mid-fidelity Wireframes Ideations
Driver User Flow
Admin User Flow
Driver User FlowThis flow outlines the steps a driver takes to confirm deliveries using the app.
Design
Design and Prototyping
In this critical phase, I transformed my concepts into high-fidelity designs and interactive prototypes. This phase was essential in bringing the vision to life and setting the stage for user testing and validation.
Hi-fidelity Mockup Prototype
Goals and Accomplishments:• Created high-fidelity mockups and interactive prototypes using tools like Sketch and Zeplin.
• Ensured consistency across both iOS and Android platforms.
• Ensured consistency across both iOS and Android platforms.
Outcomes:• Produced a set of high-fidelity mockups showcasing the application's visual design.
• Developed design specifications for development handoff.
• Developed design specifications for development handoff.
Delivery
Delivery and ImplementationIn the final phase, I worked closely with the development team to bring our vision to life. I established a clear version control process and created necessary assets for app store submissions. The culmination of our efforts was the successful launch of the Shell Delivery Mobile app.
Goals and Accomplishments:• Successfully launched the Shell Delivery Mobile app with Sign on Glass technology.
• Created an electronic Proof of Delivery system in real-time for customers in Shell Market Hub.
• Created an electronic Proof of Delivery system in real-time for customers in Shell Market Hub.
Outcomes:• Delivered a fully functional mobile app that increased efficiencies for both Shell and its customers.
• Eliminated handwriting and key punch errors in the delivery documentation process.
• Accelerated the billing process, allowing distributors to receive commissions faster.
• Eliminated handwriting and key punch errors in the delivery documentation process.
• Accelerated the billing process, allowing distributors to receive commissions faster.
Testing
Beta Testing and IterationDuring the beta testing phase, I entered the testing phase. I released the prototype into beta testing, gathering real-world feedback that proved invaluable in refining the design. This iterative process allowed us to make necessary adjustments based on user feedback and stakeholder input.
Focus Areas of the Beta Testing:• Usability: How easy and intuitive the app was to navigate.
• Functionality: The effectiveness of core features, such as delivery confirmation and electronic signature capture.
• Performance: The app's speed and responsiveness during use.
• Visual Design: User impressions of the app's aesthetics, including color schemes and typography.
• Functionality: The effectiveness of core features, such as delivery confirmation and electronic signature capture.
• Performance: The app's speed and responsiveness during use.
• Visual Design: User impressions of the app's aesthetics, including color schemes and typography.
20
Participants
6 Key Learning identified1. Functionality Validation:Core functionalities, such as electronic signature capture and delivery confirmation, were validated, with users finding these features effective.
2. Performance Feedback:Users noted that the app generally performed well but experienced occasional lags during peak usage times, highlighting areas for performance optimization.
3. Visual Design Adjustments:Feedback on visual design resulted in specific adjustments to color schemes and typography, improving readability and aesthetic appeal.
4. Improved User Experience:The beta testing phase highlighted areas for improvement in the app's usability.
5. Feature Requests:Users expressed interest in additional features, such as enhanced tracking capabilities and more detailed reporting options, which were valuable for future iterations.
6. Overall Satisfaction:Many users reported a positive experience with the app, appreciating the transition from a paper-based system to a digital solution, while emphasizing the need for ongoing support and training.
Main FeaturesHigh-fidelity UI Designs
Driver side of the Mobile AppHere are the final High-fidelity UI designs for the key features steps of the Driver side of the mobile application.
List of Open DeliveriesDrivers can view all open deliveries for the day which allowed them to manage their routes effectively to ensure timely deliveries
Order Summary of a CompanyDriver were able to view all the products and quantities included in order for each delivery.
Archived DeliveriesDrivers are able to check the status of past confirmed deliveries and review electronic Proof of Deliveries (ePODs). This feature enables drivers to access historical delivery data for reference and auditing purposes.
Edit ProductQuickly change any quantity differences in the delivery order with ease.
Add Receipt to an OrderEasily add receipts to their delivery orders.
Delivery ConfirmationConfirm deliveries and capture signatures with “sign-ob-glass” technology.
Admin Side of the Mobile AppHere are the final High-fidelity UI designs for the key features steps of the administrator side of the mobile application.
Driver ListWill be able to access a list of all drivers associated with the Admin account.
Add DriverCan quickly add new drivers to their system by filling out the required information.
Resend RequestEasily resend account activation requests to drivers who have not yet completed their enrollment.
ConclusionLessons Learned
• Importance of Collaboration: I found that regular standups, sprint reviews, and close collaboration with developers and stakeholders were crucial for the project's success.• Flexibility in Process: I learned the importance of adapting our process to accommodate new requirements, such as the User Access Management (UAM) feature.
• Attention to Detail: I realized the importance of thorough quality checks, ensuring consistent application of color and text styles across all screens.Conclusion: A New Era in Delivery ConfirmationThe Shell Delivery Mobile project not only achieved its goal of enhancing the delivery confirmation process but also set a new standard in integrating user-centered design into operational applications. My journey from conception to implementation was a testament to the power of collaborative innovation and strategic execution in creating solutions that make a significant impact on business efficiency and user satisfaction.
Next Steps:Looking ahead, the focus will be on continuous improvement and leveraging user feedback to enhance the app further.
