Alpacker

Toyota

Winner of the prestigious Toyota Material Handling competition, presented at the CeMat Festival in Germany, and Milan Design Week 2024

Task

"For the 2018 Logistic Design Competition, Toyota is challenging university students, to revolutionise the future of package handling and the logistics process. Toyota is searching for package delivery concepts. The concept should solve the problem, it's yours to design."

Contribution

A co-project, my valued tasks included; Ideation, Development, Visual Design, and Animation.

AS-IS

In order to identify the problems associated with the traditional delivery supply chain, we had to understand the roles of all parties involved. By visualising current processes we discovered that in all circumstances the supply chain fails at the handover between the delivery driver and the customer. Unpredictable delivery times and the dependancy for the customer to be available to sign for the parcel means that drivers are being over worked, and customers are missing packages.

Customer Pain Points

To-Be

  • The delivery driver finds their job anti-social, unpredictable and degrading. He craves human contact and feels sad that he can't build relationships with his customers. Emma finds the package delivery experience stressful and time-wasting. She get frustrated with paying a premium for an unpredictable service. Her busy schedule often results in packages being left with neighbours. 

  • ‘Click and Collect’ is often thought of as a good solution to this issue, however the service still has it’s limitations regarding the size of the package, and the opening hours of the location. Furthermore, in 2017 delivery to a ‘safe place’ such as shed, or neighbour is still the most popular destination. 

Our solution to resolve the misalignment between the courier and the customer, was to introduce a mediator.  We identified that a third stakeholder could be responsible for handing over the parcel in a more localised position for the delivery agent. By brainstorming we were able to identify that stay at home users could fulfil this segment. 

Benchmarking + Analysis

By analysing 27 competitor applications that feature a bottom navigation component, I found that it was typical to include five main sections: Home, Account, Basket, Favourites, and Search.

I requested data on total page views for the app, which showed that the Homepage was the most visited section. This aligns with competitor benchmarking where the Homepage was most prominently featured in the bottom navigation, followed by Search, Advantage Card, My Account, and Basket.

I created an initial wireframe design that was hierarchically mapped to the most accessed areas of the site while aligning to the principle of having five sections.

Testing

At this stage I had some key assumptions around the design of the bottom navigation, this included; the correct iconography to represent each section, how clearly the selected states were denoted, and whether the correct sections were mapped and in the correct order. In order to validate my decisions it was decided to run four customer tests, each involving eighteen participants.

  • Users had two options: one with a bottom navigation design using only icons, and the other with icons and descriptive headers. They were tasked with choosing their preferred design and explaining their choice.

  • Option 2 was unanimously chosen by users, who noted that the added text improved clarity. For instance, many participants initially misunderstood the Offers icon until they saw the version with additional text.

  • Users were given three clickable prototypes: the first highlighted selected menu items by changing the icon color, the second used both a color change and a visible overline, and the third highlighted the selected item with a blocked background color that slightly overlapped the page content. Users were tasked with selecting their preferred design and explaining their choice.

  • The results were evenly split between the second and third options. It was decided to combine elements from both designs to make the selected states clearer and more accessible for users.

  • Participants were shown two navigation bars with different sets of icons. Their task was to identify what each icon represented and to detail where the user would expect to navigate to.

  • The icons with the highest failure rates were for "Home" and "My Offers." I decided to replace the Boots logo for "Home" and refine "My Offers" to use the Advantage Card logo.

  • Users were given an empty navigation bar with five slots and a list of 12 navigation items. They were asked to label the bar with the options they felt were most appropriate.

    1. Home

    2. Offers

    3. Search

    4. Basket

    5. Loyalty Card

    The most popular navigation item, "My Account," received 10 votes. While it wasn't the top choice for any single slot, it frequently ranked as the second or third favorite.

After testing, key design updates were needed: icons with underlined header text, a navigation hierarchy of /Home/Shop/My Card/Basket/Account, a high-contrast selected state with a highlighted top bar, and using the Advantage Card icon for the "My Offers" section.

UI Refinement

The final stages of developing the bottom navigation focused on refining the icons, visual design, and interaction patterns. I discovered that the grey used for deselected icons didn't meet contrast requirements with Boots Blue, the brand's official highlight color. By increasing the lightness of the grey by 18 points, I ensured adequate contrast between selected and deselected states, leading to the removal of the old colour variant from the design system.

The icons were refined and scaled to 32, 24, and 16px grids. Initially, they were 1px thin, but after team feedback, I increased the thickness to 2px. The 24px icons were chosen for the bottom navigation, leaving a 2px gap around each icon to accommodate notifications. For the Basket section, I designed a pill icon that adjusts in size to show how many items are in the basket.

Summary

The app was updated with the new navigation component, which led to a 8-24% increase in total sales across platforms. As a result, App Store reviews improved by 1.5%. I was then asked to keep collaborating with the Boots team, contributing to various projects, including updating pages to the new design system and creating the Price Advantage branding, which was featured in nationwide marketing and advertising campaigns.