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.
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.
Without diving into what to design for the challenge, I started with researching the problem space and reading what each document means.
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.
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.
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
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 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).
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.
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.
Below are annotated screens with key features that are involved in the uploading and emailing interaction.
To identify success of the design, we can measure the qualitative and quantitative usability metrics.
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?
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.
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.