The Context: Shipping Manager is a web app for businesses shipping 10-50 packages daily worldwide. In February 2021, Canada Post had issues with it, including slow load times, glitches, and poor user experience.
The Problem: When I joined the project, it was plagued by slow load times, glitches, and a general air of dissatisfaction among users. I was hit with alarming statistics: a 32% user drop-off rate and a cumbersome average completion time of 9 minutes, which is notably lengthy compared to our competitors. It became clear that a significant overhaul was necessary, as these issues were driving users to seek alternatives, reach out to customer service, or abandon the process entirely.
The Objective:
- Utilize Angular components to comprehensively redesign the shipping experience.
- Overhaul the help tools for enhanced user assistance.
- Ensure compliance with AA WCAG accessibility standards for greater inclusivity.
My Role: Lead Product Designer
Project Duration: 5 months
Tools: Figma, Miro
The design process is not strictly linear; it often involves iteration and flexibility as I respond to feedback and insights gathered throughout the process. This case study represents a snapshot of this project's design process, and how I arrived to its current design. I will walk you through three critical phases of this project's design process: Empathize, Explore, and Design.
Revisiting the personas helped narrow down the scope before investing time in designing and building each screen. Our most common users are small to medium business owners that are shipping 20+ packages per day.
By the time I joined the project, a lot of the research was already done by our user research team. Our users, like Carrie the business owner, struggled with the app’s complexity. The initial data dive revealed three critical areas needing urgent attention:
Having defined our scope, we moved to align the team through a "How Might We" session, involving not just the team but also our stakeholders. This session was instrumental in unifying our approach, delving deeply into the problems, and quickly brainstorming solutions.
After placing all HMW questions in one place, it was time to organize them in groups based on discovered common themes, then prioritize the questions that were the most important to address.
There were 3 main takeaways that I got from the data:
I explored the market for consumer shipping applications by gaining insight in how people ship packages, and their motivations for choosing those methods in order to explore opportunities for improvement.
Here are the top three shipping applications players: FedEx, UPS, and DHL.
I was assigned an objective by the stakeholders to conduct a competitive analysis of the top three players in our industry to assess and understand the company's strengths, weaknesses, and unique value proposition compared to its competitors.
This helped my team and our stakeholders understand where each company stands in the market, what they excel at, what they needs to improve, and how we can learn from their disadvantages to enhance our user experience and competitiveness.
After this was completed, I looked into the user experience and interface of each company's shipping application.
With a competitive analysis conducted, I can now identify some of the core features needed to create an MVP (minimum viable product) and can now head into the design phase.
At the heart of our project was a difficult design decision. On one hand, I could stick to the horizontal approach of the current design, revamp it, make it more accessible, and update the colour, spacing, and typography. The horizontal approach would be the safer choice. On the other hand, we could take a more innovative approach - a vertical design, which would be a departure from what we have now. This decision wasn't just about aesthetics; it was an important moment in our project's journey, a choice that would shape the entire future of this application.
After coming up with a basic layout of how a horizontal and vertical approach could take shape, I introduced it to the team. The vertical approach ignited a spark of enthusiasm amongst us.
There were a few advantages to the vertical approach:
1. Natural Flow: Vertical layouts align with the natural top-to-bottom reading pattern of users, especially in Western cultures.
2. Content Organization: With a vertical design, I can more easily segment different steps or sections into chunks. This chunking can reduce cognitive load, making it clear to the user where they are in the process and how much is left to complete.
3. Mobile Responsiveness: Vertical layouts are inherently more adaptable to a variety of screen sizes, including mobile devices, which are primarily designed for vertical interaction. As more users shift to mobile-first web browsing, a vertical design ensures a seamless transition.
4. Accommodates Expansion: If the shipping process overtime becomes more complex and requires more information input as more features are introduced, a vertical layout can expand more naturally. You can extend the length of the page without worrying about running out of horizontal space or overwhelming the user with too much information side by side.
5. Focus on Content: Vertical designs often lead to a more focused presentation of content, allowing users to concentrate on one section at a time.
It was clear what we needed to do. So driven by the team's enthusiasm, I immediately started wireframing.
After designing version one of the UI, I created a simple prototype using Figma and conducted usability testing to evaluate how users would engage with the product.
I wanted to know the following:
- Would users be able to complete the shipping process, use the Guide for assistance, and edit a panel?
- Where might users struggle with these tasks?
- What are some suggestions to make the experience more enjoyable?
I conducted live usability testing with approximately 12 participants and received feedback on what’s working and what could improve.
Based on feedback from the usability testing session, although the UI was simple and recognizable, there was some additional work that needed to be done to ensure Shipping Manager is accessible.
My quest for balance led me to consider various layouts. Switching over to a panel layout allowed for multiple improvements. Previously, the user needed to go through four long pages to complete the process. This new design allows the user to complete the process without leaving the page. In addition, the “Payment” section has its own separate page and was removed from the panel layout to allow for a more focused experience.
Previously, the page's right displayed shipment costs and chosen options. Now, the left side indicates panel status (Complete, In-Progress, Incomplete), and the right solely presents the cost, streamlining the interface. We've also overhauled the help feature; where once compact info icons offered limited guidance, our new "Guide" panel provides ample space for comprehensive assistance, including external links. With a user satisfaction rating of 86%, the redesign was a success!
For future iterations, are are some potential improvements for the next version:
1. Panel Layout
- Current Decision: Used a panel layout to streamline process into one page, instead of the previous design which had four long pages.
- Potential Iteration: Accordion Panels - Instead of static panels, use accordion-style panels that expand and collapse, which could make the page more dynamic and less intimidating, allowing users to focus on one section at a time.
2. Left-Side Panel State Indicators
- Current Decision: The left side indicates the state of each panel (Complete, In-Progress, and Incomplete).
- Potential Iteration: Color-Coded Status Indicators: Use color coding for the status indicators to make it easier to distinguish at a glance the state of each section.
These iterations can help refine the user experience further, making the shipping process as intuitive and hassle-free as possible.
The redesigned Shipping Manager was transformed it into an accessible, efficient tool, greatly reducing the process time and increasing user satisfaction. This journey taught me that design is less about sailing smooth waters and more about skillfully navigating through storms. It’s about making tough calls, like prioritizing accessibility over aesthetic sleekness.
