View Retailer PrototypeWork Overview
For my entire time working as a UI/UX Designer at Veriday I worked on the Parkland client project.
What is Parkland Fuel Corporation?
Parkland Fuel Corporation is North America’s largest supplier and marketer of fuel and petroleum products. In simple terms, their primary responsibility is handling oil distribution from oil refineries to gas stations all across North America, conducting their business through three channels: Retail, Commercial and Wholesale. They have various gas station subsidiaries including Chevron, Esso, Ultramar, Husky, Pioneer, and Fas Gas (all part of this project).
Parkland business can be broken down into these categories:
Project Breakdown
All Parkland stakeholders from the above supply chain operate on a day to day basis using Parkland’s Web Portal. The Web Portal brings together all business operations & information in one unified place. It is where stakeholders (Retailers, Territory/Regional Managers, Marketing, etc.) go to either produce, or consume relevant information (ex. planogram information, marketing promotions, oil delivery dates, store layout changes, etc.)
Parkland was experiencing many problems with their Web Portal, issues regarding fragmented, inefficient, disorderly communication, and ineffective and inefficient methods of delivering and consuming data. Our job at Veriday was to uncover all problems with the existing Web Portal, and re-design a new Web Portal that would solve Parkland’s internal problems and create a much better user experience.
As a team we operated using Agile Development.
Research
Overview
We began the project, myself and my design partner Nehal Kapadia by:
• listening to 40+ interview recordings
• 5+ interviews conducted ourselves
All interviews were with Parkland stakeholders who use the Web Portal. They gave us incredible insights into what their day to day looks like, jobs to be done, goals and motivations, what they value, what they use the portal for, what changes to the portal they would like to have, and what issues they were currently experiencing with the existing portal. From these insights we were able to flesh out the problem statements of our users.
High Level Problem Statements
1. Real Time Communication Barrier — Communicating the right information to the intended audience in a timely manner was full of friction points and is unidirectional, causing loss of productivity and increase in administrative overhead.
2. Data Analysis — Piecing together data from different sources was slowing down the decision making process based on this data, causing the loss of competitive edge.
All Research Methods Used
• Interviews
• Surveys
• Contextual Inquiry
• Focus Groups
• Market Research
Planning
Overview
Below are all the different primary users on the Parkland Web Portal. We built User Personas for each one.
Users and Consumers of Information
• Retailer
• Territory Manager
• Regional Manager
• Customer Experience
Publishers of Information
• Merchandising
• Marketing
• (Territory Managers too)
• (Regional Managers too)
Managers of User Roles and Technology
• IT
Personas (2 of 7)
Storyboarding (2 of many)
Design Solution
• A user experience (Web Portal) where the production and consumption of information takes place in a unified, consolidated, collaborative, organized, and intuitive space. Such a user experience will allow Parkland Stakeholders to properly communicate important data and information, which in turn ensures both the Retail and Commercial success of Parkland.
All Planning Methods Used
• User Personas
• User Stories, Use Cases, Scenarios
• Task Analysis
• Storyboarding
• Customer Journey Mapping
• Empathy Mapping
• Affinity Diagramming (Card Sorts)
Design
Visual Language
For the UI design of the Parkland Web Portal we decided to keep it extremely simple and plain. Unlike other projects I have worked on in the past, the design goal for this project was not to evoke any sort of profound feeling in the user (ex. imagination, wonder, inspiration, excitement, etc.). The purpose of this design was to deliver information in the most clear, organized, and concise way possible. For this reason no elaborate or vibrant colour scheme was used, just a simple colour scheme to ensure that the main focus of the user was on the information being consumed. We went with cool, neutral colours that provided a soothing, professional, innocuous visual design.
WCAG Design
Throughout the entire design process we always made sure we were meeting the WCAG requirements with every design element. This is an extremely important aspect of design, one that is not just a business obligation, but a moral one as well. Everyone has the right to properly access and understand your design.
Testing
Overview
Over the course of our design process we performed usability testing countless times to ensure that our design was the best it could be. Each time we received feedback we refined the design accordingly to ensure the most intuitive, user-friendly experience possible.
Testing Included (conducted by myself):
• 15+ internal tests with Veriday Employees
• 20+ usability tests with Parkland Retailers (through Zoom)
Major Design Iterations: 8
Post Launch Survey
Once our design had been finalized (for the most part) we used SUS (System Usability Score) to measure the results of our design in addition to other survey questions.
Results
• > 90% Intuitive & Usable
• 88% SUS Score
• 75% Adoption Rate
It was clear our design had made a positive impact on Retailers. Although it was great to see its success, we knew their was more work that needed to be done, so we got back to refining our design!
Conclusion
Being able to look back at my time at Veriday, it was amazing experience to work on the Parkland project with my amazing design team Swapnali Thakar and Nehal Kapadia. We had a lot of fun together and it was an amazing learning experience. It was a project very heavy in UX research, and consequently I grew tremendously as a designer. It brings me joy knowing that our design will have such a tremendous impact among hundreds of gas stations across North America.
