Roles:

  • UI/UX Designer
  • Usability Tester
  • Prototyper
  • Researcher/Interviewer

Tools:

  • Figma
  • FigJam
  • Adobe Photoshop

Team: 4 Members

  • Daniel Wright
  • Gagan Doddanna
  • Juliana Carvalho
  • Kate Jamieson

Key Contributions:

Project Overview

About Shippy

Shippy is revolutionizing online grocery shopping with its innovative delivery notification system. By pairing smart devices with a temperature-controlled smart box, users can securely receive their groceries, even when they're not home.

  • Seamless Perishable Item Delivery: Designed Shippy, a secure solution ensuring worry-free delivery of perishable items. Focused on maintaining optimal temperatures and delivering a seamless experience for online grocery shoppers
  • Leading E-commerce Experience: Developed Shippy to be a frontrunner in the booming e-commerce industry. Created a polished user interface and experience through user testing, setting Shippy apart as a seamless and reliable choice for online grocery shopping.

Why shippy?

The Problem Space

Receivers:

  • Becoming more comfortable with grocery delivery services.
  • Becoming more comfortable with grocery delivery services.

Shippers

  • Adapting to new delivery type
  • Need a reliable way to leave groceries safely

Agile Design Process

Starting with the basic functionality and getting Shippy into the hands of users would help to establish what features or functionality users would want added.

Employing an iterative process, we utilized an agile framework to develop Shippy. Agile process helped the team to build a Minimum Viable Product, which allows us to get Shippy in front of real users to discover what does and does not work in its current form. Using this agile framework, it was important to understand that Shippy will be a constant work in progress and that we needed to first focus on getting its core functionality right before adding on more complex features and offerings.

When thinking about the Shippy experience, the team considered the app from the experience of both the receiver, Lauren, as well as the shipper, Daniel.

Personas & Scenarios

Receiver

Shipper

Sketches

Design Charrette

Mood Board

When envisioning the appearance of Shippy, our utmost focus was on ensuring user safety. We opted for the color blue as it represents a sense of security, trust, and loyalty.

In addition to our color choices, our aim was to create a contemporary and uncluttered aesthetic for Shippy. We wanted users to feel assured that our product was specifically crafted for the demands of the modern world.

Narrative Digital Prototype

Why Shippy?

The decision to choose Shippy as our app's name was backed by several factors. Once we defined the fundamental and essential functionalities of the app, it was crucial to gain the support and approval of stakeholders. To achieve this, we crafted mock-ups showcasing the app's key features and value through carefully designed "happy paths."

With Shippy, your deliveries are always safe!

  • Online grocery shopping has increased year-over-year more than any other e-commerce category.
  • People are changing and expanding the ways that they shop, and more willing to buy online than ever before.
  • Shippy wants to be on the forefront of this changing landscape, creating a new way for people to receive their deliveries.

Enhance your Shippy box experience with real-time tracking and seamless access management across all your connected smart devices. Say goodbye to concerns about spoiled grocery deliveries by effortlessly monitoring and adjusting the temperature of your smart box on the go.

Setting the stage

We wanted to remind stakeholders that Shippy would be used by real people, in real scenarios, so we provided a quick step-by-sten overview of Lauren’s use case.

  • Lauren has a grocery delivery coming
  • She lowers the box temperature
  • One of her kids got home before her
  • She sends the box code to her kid

Two higher fidelity screens were shown to help establish a picture of the Shippy app in the stakeholders mind.

Showcasing happy paths

The inclusion of happy path screens in the Shippy app project effectively established a strong mental model for users, showcasing the app's potential as a valuable tool. By demonstrating our commitment to creating a simple and elegant design, these screens played a crucial role in helping stakeholders grasp the overall flow and functionality of the Shippy app.

Manage Deliveries & Control Box Temperature

Usability Testing & Mid- Fidelity Prototype

Usability Testing

Our team conducted user testing sessions with both experienced and inexperienced grocery delivery users to gain valuable insights into the design's usability and identify areas for improvement. This approach helped me understand the effectiveness and intuitiveness of the interface for users with varying levels of familiarity with grocery delivery services.

Recruiting & Participants

Recruit Summary

  • All participants have packages delivered multiple times in a month
  • Half of the participants have received grocery deliveries

Research Plans

Research Goals & Objectives

Gauge the general usability of some of the core flows of the Shippy app to inform future iterations.

Session Outline

  • Welcome ( 3 min)
  • Background questions (5 min)
  • Tasks (15 min)
  • Wrap-up (2 min)

Session Details

  • 4 participants
  • Remote via Zoom
  • Moderated
  • 25 minute sessions
  • Testing Mobile and Apple watch interfaces

These tasks covered the basic functionality that would be offered in the MVP. Determining if/how successfully users could complete these tasks would inform future iterations.

The usability test focused on 4 main tasks:

Usability Testing

Task 1

I want you to imagine that you’ve just received Shippy, a temperature controlled, lock box where you’ll be able to receive your incoming packages and grocery deliveries. Can you show me how you would link your phone to the new Shippy box?

Task 2

Now imagine that you have a grocery delivery scheduled for today, but can’t remember what time it’s supposed to arrive and you need to plan your day. Can you show me how you would figure out what time your delivery will arrive?

Task 3

After checking the delivery time, you realize you might be out during the delivery window. You know you ordered some frozen food, so you want to make sure the Shippy box is cool by the time the delivery arrives and until you get back. Can you show me how you would make sure your frozen food stays cool?

Task 4

You are out while the groceries were delivered, but just realized that your [roommate/child/partner] is home. You’d like the groceries to be put away by the time you get back, so you want them to be able to open the Shippy box, so they can get started unloading them. Can you show me how you would do this?

Is there anything you would change about how that process worked ?
First impressions? How did it feel for you to complete that task ?
Was there anything you found particularly difficult about doing this ?

The usability test focused on 4 main tasks:

During research synthesis, we looked for common themes among participant feedback that could give direction to future iterations.

Participant 1

Participant 1 was able to successfully complete all 4 tasks, and commented that they wanted more confirmation of action. The participant also wanted greater navigation ability.

  • When the participant started the usability test, they accidentally clicked out of a screen and became frustrated when they were unable to navigate back
  • The participant wanted a “set” button to click when they were setting the time and tempera- ture of the Shippy box, to confirm that they had taken the action

Participant 2

Participant 2 was able to complete all 4 tasks and frequently commented about how a certain feature or element felt “familiar” and wanted the Shippy app to have similar conventions to other Apple products.

  • Wanted more information about task completion via system feedback
  • Wanted more visual cues to possible actions in the Shippy app

Participant 3

Overall, participant 3 was able to successfully complete all 4 tasks provided in the Shippy app. Participant 3 felt that there should be additional elements that would help show the system status.

  • Most of the tasks were fairly easy for the participant to complete
  • Able to easily and quickly link their phone to the Shippy box
  • Easily able to determine the delivery times for various packages
  • Commented that they would have expected to see some pop-up boxes for feedback after some tasks are completed

Participant 4

This participant was able to complete all 4 tasks provided in the Shippy app usability test. Overall the participant enjoyed the app, but had the following suggestions and key pieces of feedback:

  • Expected a pop-up confirmation message or acknowledgement after connecting to Shippy
  • Wanted to see delivery categories such as previous delivered, upcoming deliveries
  • Suggested adding some animated or 3D icons which will be more attractive to users

Our team then organized them into broader themes, such as "lack of feedback." To substantiate these themes, we evaluated which of the Nielsen Norman Group (NN/g) heuristics they closely aligned with. This systematic analysis enabled us to determine the most critical areas for improvement and implement effective design changes that addressed user concerns.

INITIAL FINDINGS & THEMES

Lack of feedback

Heuristic:  visibility of system status

Participants were able to easily discover how to complete a given task, but after doing so, were uncertain if they had completed the task or not. Some participants specifically voiced that they would have expected to see some kind of feedback or confirmation after completing a task. For the feedback, participants expected to see a confirmation modal screen or text confirmation of some sort on the screen.

Provide more directions for users

Heuristic: recognition rather than recall

Participants were able to easily discover how to complete a given task, but after doing so, were uncertain if they had completed the task or not. Some participants specifically voiced that they would have expected to see some kind of feedback or confirmation after completing a task. For the feedback, participants expected to see a confirmation modal screen or text confirmation of some sort on the screen.

Heuristic: aesthetic & minimalist design

Participants were able to easily discover how to complete a given task, but after doing so, were uncertain if they had completed the task or not. Some participants specifically voiced that they would have expected to see some kind of feedback or confirmation after completing a task. For the feedback, participants expected to see a confirmation modal screen or text confirmation of some sort on the screen.

More differentiation between delivery types

Difficulty navigating back and between screens

Heuristic: flexibility & efficiency of use

On some screens, participants were unable to navigate backwards to the previous screen. Participants used the navigation bar at the bottom of the screen as a work around when they were unable to return to the previous screen.

Brand Guidelines

Our Brand

Our Brand

Our logo represents safety. The safety icon was created to also represent the letter “S” from Shippy.

Masterbrand Logo - Color Variations

Two Color

Single Color (Dark Blue & Light Blue)

Single Color (Black & White)

Masterbrand Logo - Exclusion Zone & Minimum Size

The Masterbrand Logo should always be given sufficient breathing space. The recommended guideline for determining this space is by considering the width of the letter "H" in the logo.

Color Pallette

Primary

Secondary

Typography

Icons & Buttons

HEADINGS, SUBHEADINGS & TEXT

Hi-Fidelity Prototype

Based on the insights uncovered during usability testing, we iterated on our mid- fidelity prototypes to create high-fidelity prototypes that not only had more screen- level detail, but also took into account the feedback we received from users.

Mid-Fi to Hi-Fi

Insights

Retrospective

"Thanks for diving into this case study! I would love to hear your thoughts and feedback. Feel free to reach out using the contact form below. Let's keep the conversation flowing!"