Initial problem
As Gophr was scaling, new customers were being introduced to the world of getting ANYTHING delivered to their doorstep.
Low retention rate of 8%
Lots of support requests regarding late deliveries and bugs
How can we provide a seamless, transparent experience with real-time visibility across the job lifecycle while optimising ops efficiency for the business.
About Gophr
Gophr is a same-day delivery company that provides convenient and reliable last-mile delivery solutions. They deliver from household name retail brands such as HelloFresh and ScrewFix to local independent businesses.
Audit
I took screenshots of every page from the v1 Booking Engine, being careful to uncover every last UI from each service.
I made detailed annotations on each screen - noting concerns about usability, questions to ask stakeholders, neutral observations, and ideas for improvement.
User reviews - understanding the problem space
I looked at over 200+ customer reviews from TrustPilots, AppStore, and X (previously Twitter) to understand the common pattens within their reviews.
By analysing these reviews, number of insights emerged around critical areas like pricing, mobile UX, logistics needs, trust issues and enablers of visibility that can guide us validating our assumptions.
My research revealed serval key insights:
A recurring theme was frustration over couriers arriving late, or not showing up at all with limited communication around delays.
Common pattern of reviews criticising Gophr's customer service - long wait times and inability to resolve issues, etc.
Usability and technical issues around like crashes, bugs, and location tracking on mobile.
Competitive analysis
I was keen to understand the evolving industries on the market, and that's why I went with the most established and popular delivery platforms. I was aiming to analyse patterns and setting benchmarks for the must-have features, while also finding innovative approaches to include on the Gophr services. For example, Doordash was great for easily booking and tracking deliveries on mobile devices, while Amazon had an excellent delivery tracking dashboard.
This combined with user research, I was able to thoroughly inform the design decisions for Gophr's user experience.
Booking experience & Dashboard
Implement conversational UI patterns and smart auto-population to reduce friction.
On mobile, leverage bottom navigation bars for efficient layout.
Robust Job Management Dashboards with centralised dashboard views.
Parcel tracking
Integrate maps with real-time location updates as a core experience.
Use visual timelines and detailed checkpoints for transparency.
Surface precise delivery time windows and contextual status reasons.
Enable direct courier communication and seamless handoffs.
User Interviews
Next, I interviewed 10 users via video call and asked them to test our tool. I interviewed participants that aligned with Gophr's primary user personas such of small local businesses like retailers, professional services firms, food vendors and more that need affordable, on-demand logistic solutions booked in the field.
The user interviews revealed serval key insights:
Significant number of participants, especially SME's and individual shipper booked Gophr's services on mobile devices.
Multiple participants wanted more options to control delivery timing through capabilities like scheduling time windows.
Participants expressed frustration with Gophr's lack of clear, upfront pricing information during the booking process.
Empathy map synthesis
During the interview process, I noticed that patterns were emerging. After I finished interviewing my participants, I synthesised the qualitative data I gathered into an empathy map.
Pain-points
A subpar mobile app experience made it difficult to book a job though phone.
No proactive timely notifications of delays or issues.
Lack of visibility into delivery status and location after booking.
Platform performance and slow load times, crashes, other tech issues degrade experience.
Poor price transparency such as opaque fees and inability to get binding pricing upfront.
Overall goals addressing visibility and transparency
Simplify UI flows for booking a new courier and accessing tracking information.
Clean dashboard visualisation that provide high-level job overview.
Provide real-time, end-to-end parcel tracking.
Capture verified proof of delivery e.g. signature and photo evidence accessible to customers.
Surface transparent status reasons if there are any delays, exceptions or issues.
Responsive and future-friendly. Design for a seamless omni-channel experience.
Feature list
Based on the research and competitive analysis, here are the key platform features that we decided to implement for Gophr's redesign, categorised by the relevant area.
User Persona
I gathered all I knew about our audiences and made six personas to show our different customer types. I also made six value propositions. Here are two of these personas as an example.
Action priority matrix workshop
I organised a session with operations, engineering, and the dev team to kick off the project, establish the feature requirement internally and design trade-offs.
We started with a quick warm-up of establishing the priority features at the foundational level with must-have, should-have & could-have to have categories. This would allow us to later push in the direction to meet the team's requirements while solving user needs.
We ensured that we created an environment where engineers & ops team felt fully included.
Translating needs into features
From the touch points and needs gleamed from the Action Priority Matrix workshop , I created a Product Feature Roadmap to outline specific features and organise upcoming design efforts.
Information Architecture
I devised a sitemap that helped me evaluate the information architecture. Since we are redesigning this to be white-labelled, being able to clearly visualise how the contents are interconnected will make it easier for us to implement modularity.
UI Pattern Research
Before moving on to designing wireframes, I studied a few rival designs to see what worked well, and how I could use that in my own design. I noticed commonalities in how maps displayed information. I considered swipe gestures, layouts, and navigation methods.
Establishing Visual Design
I repurposed Meterial Design System to Gophr branding. It was made up of three primary elements.
Style library - colours, type styles, and layer effects.
Component library - configurable, reusable components to cover a wide range of use cases.
Documentation/user guide - in-depth instructions on how to apply the styles and components, and how to maintain the design system itself.
Layout Explorations
I chose a layout that helps users immediately understand how to navigate to jobs. I separated the job navigation with actions and allowed users to focus on one task at a time.
Design systems and tokens
Sketches
Next, I devised wireframes sketches on paper. I laid all of the screens out on one Figma page so that I could go on to create a single clickable prototype of the complete site (including the login flow, booking journey, and product services).
Testing prototype
I validated the usability and effectiveness of the designs with a group of internal stakeholders.
To ensure a well thought-out booking experience, I tested a low-fidelity prototype internally company wide. From this test, I was able to understand what vital pieces were missing and what was confusing.
Low fidelity - Booking Engine
UI Explorations and Test Findings
Job card layout explorations
Maps explorations
Here are some of the findings I used to improve my design for my high fidelity prototype:
Modular booking flow: Participants preferred modularity for entering their preferred information.
Parcel's visibility status is not evident - Several participants found it a hassle to click into the app to view the parcel status. Some pointed out that it would be nice if these were displayed as soon as the app is opened.
Interaction - Several participants pointed out that they wanted an optimised cheapest booking prices as a default when booking multiple jobs. Also one participant pointed out that she didn't like how the dates were pre-selected for flexible dates. She wanted it to select as she clicked on the appropriate box.
Auto-population of information - Participants mentioned how for the prototype it would be nice if the information would auto-populate.
Technical
Bottom navigation feasibility - There were pushback from the dev team regarding the feasibility of the bottom navigation.
In the span of a quarter following the product launch:
+62%
increase in mobile visits
+47%
customer support inquiries reduction
+85%
Successful first-attempt deliveries
Ratings improved from 3.2 stars to 4.3 stars
Implementing features like real-time tracking, delivery windows, courier messaging and self-service tools demonstrably improved the complete end-to-end experience.
Trustpilot
Rated 4.3/5.0
My contribution
Wrote and executed project plans
Interviewed users and stakeholders
Re-structured the entire IA & UI
Ran workshops
Introduced new visual design language
Designed and rolled out a design system
Things that went well:
Interviewing different user types - consumers, small businesses, enterprises - provided a holistic view beyond just one segment.
Competitive analysis revealed innovative design patterns and use cases from other logistics/delivery players that we adapted.
Focusing the new designs around core principles like visibility, transparency, communication unlocked a north star for aligning all features.
A Different Approach for Next Time:
For an MVP, the visual language system received less focus than ideal. Going forward, I'd do deeper brand aesthetic research and interactions to align to the brand.
Explore unconventional "blue sky" ideas through unconstrained ideation workshops.
Lead with even more upfront research like ethnographic studies, card sorts, diary studies, etc.
Get early buy-in from engineering, operations teams to avoid later blockers.
Overall, this project provided incredibly valuable experience in applying design thinking to reimagine a ubiquitous touchpoint like logistics and delivery. But there's always opportunities to go even broader and take more inclusive approaches for truly transformative innovation.
Improving sign up experience
Card System
To manage customer expectations on delivery timelines and provide reassurance on when to expect deliveries, I designed a visual card system. Leveraging colour codes and icons, it clearly conveys courier details the user needs - from estimated arrival to parcel status.
View all your jobs in one space
We designed entirely new way to view jobs. Through the card layout, the user can quickly see all vital data. Additionally, we've categorised all jobs to let the user effortlessly toggle between scheduled, live, and draft.
Booking journey
The most important part - booking a job. We designed the most efficient booking engine that is modular and simple to use.
Public tracker
Our revamped public tracker now offers precise delivery updates, enabling customers to continually track their courier's location and contact the delivery driver with any issues.
Organisations & members
Invoices & reporting
