Tablet Self-Checkout

myTurn x Berkeley Innovation

My project role:

Product Design Consultant

Duration:

4 months

Crafting a tablet self-checkout UI/UX for lending libraries.

Platform:

Tablet

1. Background

I worked on this project as a Product Design Consultant alongside 2 other Consultants and a Mentor through Berkeley Innovation, a human-centered design consultancy at UC Berkeley.

We partnered with myTurn, a small startup with a platform used by organizations to create and maintain circular and collaborative economies. These organizations including PG&E, Kaiser Permanente, Intuit, and local tool-lending libraries use myTurn to borrow, rent, and track items.

2. The challenge

Per the request of Gene, our client and CEO of myTurn, as well as many current users of myTurn, we were tasked to create a self-checkout UI and UX.

My team started by identifying pain points in myTurn's existing checkout and return processes.

3. Going out into the field

To get more insight on pain points and competitors, my team traveled to 3 different locations: the Richmond Tool Library (a client of myTurn's), the Berkeley Tool Library, and the Amazon lockers on UC Berkeley campus.

At each of these locations, we interviewed a few random folks about how they interact with the myTurn system and similar systems.

My team worked together to create a discussion guide to facilitate the interviews with questions themed around 2 main topics:

What are the attitudes and opinions of current users?
How can myTurn improve its current checkout system?

A photo of the entrance to the Berkeley Tool Library. It is a modern looking building next to the Berkeley Public Library, with a sign on top that reads "Tools".

A photo of the inside of the Richmond Tool Library. There are lots of shelves with various hardware tools, like hammers and shovels.

A photo of 6 Amazon lockers set up against a wall. The lockers are a sleek white metal with large orange numbers to distinguish them, and each have a screen that people can interact with.

Photos of the 3 locations we visited. From left to right: the Berkeley Tool Library, the Richmond Tool Library, and Amazon lockers.

4. What we learned from research

Several highlights from our observations included the following:

Multiple people said they liked having an administrator present who they could ask for help, while some people knew exactly what they wanted.
People wanted extended hours. Currently, many of the tool libraries are run by volunteers who have limited availabilities.
A way to renew already checked out items was very much needed and desired.
Stealing could be an issue because of the open space design.

There were also a few assumptions and constraints we had to keep in mind:

We can't change the physical space of the existing lockers - so we must design for what exists.
People typically needed items immediately, versus reserving in advance.
We might have to design assuming an administrator would be present as the role itself can't be eliminated, and also there were concerns about stealing.
Quality checks on returned items may be necessary.

5. Crafting personas and user flows

My team then created 3 personas:

College students - Borrowing bikes, electronics, or lab equipment; tend to swing by on the way to class; tech-savvy
Professionals - Around ages 30s/40s; need items right away for work, for example lab equipment in a hospital or company setting; moderately tech-savvy
Parents - Want tools during weekends for home projects; may rely on administrators for help; minimally tech-savvy

Because of the wide range of users, we decided to focus on designing for the edge cases, in this instance for parents - if we design for those who are minimally tech-savvy, then those who are more familiar with technology can easily use the system as well.

Based off of our interviews, we also brainstormed several features including:

A profile or ID scan to login
A way to check out an item - whether by typing or scanning the barcode
A checkout cart
Inventory to see what's available
Notifications for return reminders
Confirmation emails for reserving, checking out, ensuring it's the right item
A system to account for different return times on different items

Using our insights, we then crafted 2 user flows of the checkout and return processes.

A screenshot of the user flows for checking out and returning items in the myTurn system.

6. Comparing sketches

My team and I sketched some low-fidelity wireframes based off of the user flows. We also considered different user scenarios like new users, reservations, and waivers.

Each of us individually sketched ideas before gathering to discuss the pros and cons of each design. We then made collaborative design decisions on specific features, including on:

The progress bar - whether the inclusion of one was necessary, what it would solve, where it would be located
A calendar for tracking due dates - how the calendar would look, how to keep dates and items organized
The keypad for item number input - how simple or complex to make it, where it should be located

A photo of a pen and paper sketch, showing a low-fidelity wireframe of a calendar on a tablet touchscreen.

A photo of a pen and paper sketch, showing a low-fidelity wireframe of a checkout shopping cart on a tablet touchscreen.

Two of the pen and paper low-fidelity sketches I created, showing a potential calendar view and checkout cart.

7. Kicking designs up a notch

Together, our team decided which low-fidelity wireframes would work best and transferred them to mid-fidelity wireframes on Figma.

I specifically worked on the screens for login, payment, and adding payment methods.

We also worked collaboratively on design components to ensure consistency: for example, one of the components I worked on was the header bar but it was used across all of our individual screen designs.

A grayscale mid-fidelity digital wireframe of a tablet interface, showing a login page.

A grayscale mid-fidelity digital wireframe of a tablet interface, showing a page to add a new payment method in a checkout flow.

Two of the mid-fidelity wireframes I designed in Figma, showing a login page and an "add new payment" page.

8. Our first prototype tests

Using our InVision mid-fidelity prototype, my team and I split up to each conduct user tests. During our tests, we recorded interactions and asked guiding questions such as, "Show me how you would check out an item."

From our user testing, we gathered several notable insights and proposed solutions for them:

PROBLEM: In the feedback page after returning items, we included dropdown options for the status of each item - however, this could be tedious for multiple item checkouts.
- SOLUTION: Change to a flagging option. Users only flag an item if there is an issue.

PROBLEM: The item summary page had no total fee and required too much scrolling to get to the bottom.
- SOLUTION: Utilize the horizontal space of a tablet more efficiently for less scrolling and easier interactions.

PROBLEM: Multiple items with the same due date would be difficult to illustrate on a calendar.
- SOLUTION: For the sake of deadlines on our project, we talked to Gene and decided to scrap the calendar entirely. In addition, myTurn already currently uses text messaging to remind users about return due dates.

9. The final deliverables!

After our first prototype usability testing round, we took the feedback and created final hi-fidelity screens as well as a prototype, incorporating myTurn’s branding.

Several features include:

A photo and name to confirm the right item is selected when the item number is entered
Written-out instructions alongside a progress bar to provide guidance
Automatically logging inactive users out for security
Notifications for checked out items on the login page

As of 2018, a simplified version of our self-checkout designs are in use at Intuit, The Thingery in Vancouver, and The Library of Things in London!

10. Final thoughts

In post-project reflection, several things I would want to improve on would include:

Streamlining the checkout designs even more with less visually-cluttered screens
Being able to implement a calendar - figure out a usable solution instead of giving up, or figuring out through more research if one is even needed
More user testing and iteration! Because there are *always* ways to keep improving a product.

A photo of 4 people holding a showcase poster, smiling at the camera.

My teammates and good friends on this project at our final design showcase!

Previous project

Next project