Design Challenge
4 days (April 2021)
User Researcher / UX Designer / UI Designer

Prompt

Pete works at a record store in New York and is expecting a shipment of records from his
supplier Spain’s Finest Records. Along with the records, a set of digital documents associated with the shipment are contained within a software application for tracking the transaction. Leo from Spain’s Finest must upload 3 documents (sales invoice, packing list, certificate of origin) to the software application in order to account for the shipment and for both parties’ records.

Design an interface for Leo to upload the documents.

Action

After researching and getting to know the problem in detail, I modified the design thinking framework to suit the needs. The design process included guerilla research, ideation, initial wireframe, heuristic evaluation with research findings as objectives, iteration, and a final prototype.

Dissection

  1. Pete orders discs from Spain's finest records for his store.
  2. Leo receives the order and starts processing it.
  3. Leo packs the order.
  4. Leo gets Certificate of Origin from the government.
  5. Leo ships the package.
  6. Leo opens shipment manager and uploads Certificate of Origin.
  7. Leo uploads Sales InVoice.
  8. Leo uploads Packing List document.
  9. Leo emails the documents to Pete for tracking the transaction.

Research

Without diving into what to design for the challenge, I started with researching the problem space and reading what each document means.

  • Certificate of origin is a document that details trade transactions and affirms that the product exported has met the criteria to be considered as origination in a particular country. In Spain, the document can be obtained by submitting a request to the Chamber of Commerce.
  • Sales Invoice details how much money the client owes to the business.
  • Packing list is a document that informs the exporter of information about the shipment, dimensions, and weight of each package. It is an optional document to be attested along with a shipment.

Goal

The main goal of the challenge is to design an interface that enables users to upload shipment documents. The experience starts with Leo uploading shipment documents and ends with emailing them to Pete.

Assumptions

  • The final interface is for a software that runs on a desktop.
  • Leo is from spain and knows english.

Personas

There are two personas involved in the prompt. The interface will be used by Leo from Spain's finest records to upload and email shipment documents to their customers.

User Research

The main goal of the challenge is to design an interface that enables users to upload shipment documents. Keeping that in mind, I decided to speak with some of my friends to know about their past and present experiences with uploading documents. I spoke with 3 of my friends. The conversation included questions like

  1. Tell me about your recent experience uploading a document.
  2. Were you satisfied with your recent experience?
  3. What features do you wish your recent or any upload experience has?


2/3 of the participants were satisfied with their upload experience, although they wished there could be additional functionalities to it to make their work easier. The findings from the research are visualized in the below quadrant.

Implications

Implications generated from the user research findings were

1. The uploaded documents must be easy to preview.

Why: Users are often anxious about sensitive documents and they want to ensure they uploaded the right document.
Example: When users click on the uploaded document to verify, it gets downloaded and users are annoyed finding the right document on their computer (Gmail).

2. Icons and button label consistency.

Why: Users are confused between attaching a file inline and uploading a file as an attachment.
Example: In certain email clients, the icons are inconsistent without labels and fail to imply their functionalities (Helpdesk software).

3. Prioritise upload button.

Why: Users feel upload buttons are not explicit and sometimes it takes a lot of clicks to perform a simple action.
Example: It takes too many clicks to upload a story compared to a post (Instagram).

User Flow

Based on the goal and researches, a typical flow of how a user would upload a document for the given problem statement is illustrated below.

Iterations

I evaluated the wireframes often with research insights to make sure the design is functional and user centric. The implications drawn from the research insights guided to head on the right direction.

Key features

Below are annotated screens with key features that are involved in the uploading and emailing interaction.

Final Screens

Measure Success

To identify success of the design, we can measure the qualitative and quantitative usability metrics.

1. Usability

We can measure how easy it was to upload documents using Net Promoter. Users can be prompted with a subtle nudge to get feedback once they uploaded documents to an order.

Example: How easy was it to upload documents? Rate from 0 to 5 with 0 being not easy and 5 being very easy.

2. Satisfaction rating

We can also measure the overall user satisfaction for tasks such as emailing documents, or even the entire product experience through satisfaction ratings.

Example: How is your overall emailing experience on our product?

Future Works

If I had more time, I'd spent time on below aspects.

1. Intense User Research

The sample size for the guerilla user research conducted was three. To get more solid insights, I'd focus on recruiting more participants. I'd also strictly define my target groups. I was trying to gain experience of desktop users but one of the participants in the research turned out to explain his experience with mobile apps.

2. Usability Testing

I'd conduct a more formal usability testing with measuring metrics like time on task and task success rate.

3. Table Interface

I'm not satisfied with pixel consistencies on the table user interface. Although I researched on how to present data on tables, I failed to research about padding guidelines for cells.

4. Find more reasoning for using Tables

Before going with table, I ideated interfaces with cards, tabs and grid buttons. Cards did not seem to fit the environment as there was not any necessity to use micro-interactions. I'd definitely spend some time to research on different ways to visualize data.

5. Hi-fi prototypes

I'm always a big fan of high fidelity prototypes. More time would have definitely led me design polished hi-fi screens to test with users.

Reflections

The overall experience of the project was challenging and fun. I got to learn about tables, data formats and the why's behind table guidelines. Since the personas involved in the experience was from two different countries, I had to consider element such as date formats to adhere to what they are following in their respective countries. I very much enjoyed iterating designs with reasoning.

Figma Prototype