SMIOTA
UX / UI Design for package tracking application at every touchpoint
My Role
UX Designer And UX Researcher
Tools
Sketch, Invision, Figma, Paper/ Pen
Key Skills
Onsite Visit , Feature Analysis, User Persona Creation, Prototyping, High Fidelity Mockups
Deliverables
Responsive Web App
Project Team
2 UX/UI Designers, 1 UX Researcher, 1 Project Manager,
2 UI developers, 1 backend engineer, 1 VP of Engineer
Process
This is the process which I followed while starting to work on this project. Following this process was very helpful in every step to carry out this project in the most organized and effective way.
DEFINE
Smiota is a startup that offers package tracking and storage solutions for colleges, medium to large scale businesses and residential properties.
I worked with Smiota on various projects during my tenure, but designing and working on ‘Mailroom Pro’ was one of the most anticipated projects of the year. Today, Smiota is one of the fastest growing package management solutions platforms, used by top companies like Spotify, Comcast, Cushman and Wakefield, Service Now, UNLV, Facebook, and more.
Challenge
A central off-site mailroom application is needed to help tackle the most complex package and mail delivery challenges. An application has to be designed which can help to do the following:
Design and manage workflow of the mailroom employees
Create custom package statuses
Set allowed transitions of the packages
Provide special instructions for packages and recipients
How Might We..
Designing the mailroom application around the ‘Chain of Custody’ concept where every transfer of evidence from person to person is documented and is provable.
Solution
A final set of high fidelity designs of ‘Mailroom Pro’ application were delivered along with prototypes, well researched plan and usability test results
DISCOVER
User Persona | Research - Onsite Visit (Pain Points And Key Findings)
USER PERSONA
Mailroom staff / employees
The main users of the Mailroom Pro app will be the mailroom staff/employees.
RESEARCH
User research was quintessential, in order to understand the user needs better. Various research methods were used which helped me with great insights to make smooth and hassle free user experience for the users.
After collaborating with the marketing, customer service, product manager and QA teams at Smiota, I got a fair idea and understanding of how the previous smiota mailroom standard app worked.
The basic process is as follows:
Once the basic process was clear, the next step was to approach our end users to know their pain points.
On Site Visit
I along with my VP of engineer and dev team visited the mailroom warehouse of FACEBOOK. This step in the research process was very crucial as we got to know the pain points of our users which further helped us with detailed insights to design mailroom pro app.
The onsite visit was basically to understand the 'Arrival' to 'Delivery' needs of the user and the current flow which mailroom staff uses.
In order to prepare for our onsite visit, we roughly prepared a set of questions which needed clarifications and were of prime importance in order to understand the overall needs for designing new solution.
IDEATE
Feature Analysis | Key Strategies| Key Modules
Feature Analysis
After gathering all the data, I got a clear view as to which features were important to be a part of MVP process. Therefore I started listing down all the important features after analyzing the data which would make a way into the final design solution.
Key Strategies
In order to make ‘Mailroom Pro’ more powerful and useful some of the key strategies are as follows
Key Modules
Based on all the ideation and discussion with the team, I realized that the Mailroom Pro app had more in depth modules to be designed. The key modules were as follows:-
1) Arrival Packages (Mobile)
2) Receive Packages (Web)
3) Manage Packages (Web)
4) Release Packages (Mobile)
5) Dashboard And Settings (Web)
PROTOTYPE AND TEST
Iterations | High Fidelity Mockups | Testing
Arrival Packages
Goal
The main goal on the package arrival process is getting off packages from the truck and getting into the systems as quickly as possible.
Research Support
Upon delivery of packages from carriers, staff enters packages into their system at this point for the first time
SLA starts based on this timestamp with the package status set to ARRIVED
This step in the flow is handled by the mobile Mailroom application
Pain Points Discovered
Packages are scanned in bulk and must be ‘synced’ in incremental batches (25 at a time, where this number was determined in practice after trial and error)
Staff mentions that this sync takes extremely long. Possible reasons are poor network connectivity and/or their solution’s implementation
The delay causes a bottleneck as the next step, Receive/Process, is dependent on Arrival to enter the package into the system with the right information
Solution
Tweaked the word from courier arrival to ‘Arrival’. This gives the user better clarity on the exact stage at which package is in
Since Role authorization was also being integrated in the final design, the location information, instead of building location has been changed to main location
Scan icon used to reduce confusion. It gives clear call to action to scan the packages once its been delivered by the courier service
More personalized touch with the text ‘My Scanned Packages’ which eliminates ambiguity
Clear message enabled which lets the user know the current state of action
Clearly showing the package status along with the location and the current package which is being scanned
Clear content as to total no of packages scanned, with error information if any, also showing the continual attempt of the package to sync to the server
Clear icon of the package sync to the server
Automated synced packages is accepted is shown with the green check mark icon
Key technicalities taken into consideration at Arrival stage
Quick scan at arrival
Prevention of the same packages scanned twice
Use of tracking number as the unique identifier
Edge case of the same tracking number applied for multiple packages?
If so, confirmation pop up to confirm that this is the intent
Receive Packages
Goal
In this step, packages can be set on various statuses too, like for example, the package can be set in transit status. Packages are received on desktop.
Research Support
The second step in the flow is where staff first utilizes the web based Mailroom app
The text search bar searches for recipients ONLY at the current facility (useless as search must be made across ALL FB locations)
Having a mechanism to update a package status (other than RECEIVED) on this RECEIVE form would be helpful for edge cases
The package does not need to go OUT FOR DELIVERY and may be set to DELIVERED immediately
Pain Points
Absence to update the package status from receive form
Absence of ‘Alert’ and ‘ Vacation Tracking’ feature
Unnecessary features and cluttered UI
Duplicate tracking number added to the list and adds to chaos
Solution
Better clues added along with features / information like ‘view history’, ‘special instructions’ and ‘package arrival time’ on the left side of the page
‘Required information’ titled which gives a better understanding to the user as to which are the important fields to be filled in for successful storing of package information
Under the Deliver To section, ‘Set Status’ field is added where the users can set the exact status of the package which is one of the most important feature which we analyzed for ‘tracking chain of custody’
Changed the term ‘Organization’ to ‘Company Name’. A small but important change to give an empathetic and friendly approach towards the user
Clear call to action buttons along with icons designed for easy recognition through visuals
‘Review And Print’ option given to review all the information once before printing. Also how many number of packages are saved information is given at the bottom of the page for easy understanding
Key technicalities taken into the consideration at receive stage
Building a mechanism to update package status
Alert feature to let the staff know if the same tracking number is scanned twice
Ability to enter package in the system if it is not scanned during the arrival stage
Ability to provide special instructions for the package
Release
Goal
Once all the packages are set in different statuses and received successfully, packages are ready to either be in transit mode or in delivered state.
Research Support
Following the Receive/Process flow, packages are sorted by the FB location (referred internally as areas + zones)
Prior to loading packages to be delivered to a zone, they are each scanned by the mobile Mailroom app which will update each in the system with the status of OUT FOR DELIVERY
Once the package has reached its destination, with the mobile Mailroom app the staff delivers the package
Staff members’ signatures are required to prove that it was delivered.
Depending on the package description, the recipient’s signature may or may not be required
Solution
Clear instructions with header, ‘Scan to Release’
Just below the header, the space to take the action, in this case-’scanning’ the package with icon is provided which will autofill the tracking number once the package scanned, or QR code scanning technology can be used.
The recipient name is mentioned in bold. to whom the packages belong to. Also the name of the other person receiving the packages on behalf of the recipient is mentioned with edit button placed on the side, which helps the user to make any changes if needed.All the package details like box type, building/location to be delivered, tracking number etc is added. Also the cross icon, suggesting deleting the
package is addedTerm ‘Sign for Packages’ is stated as clear call to action button as it is highlighted first
Other Modules
Manage Package
Under manage package module, packages can be searched and managed based on different filters. This module makes it very easy for the mailroom staff to search any packages as there are daily more than 10,000 packages which are incoming and outgoing. The main purpose to redesign this module is to improve the clarity of where the user was in the app, what it is they were looking at. In the redesign process. we make it easier for the users with scan table rows, modals for focused work and explicit actions.
Dashboard And Settings
Dashboard and Settings page allows the employees to keep the tab on the regular SLA (Service Level Agreement) under check and helps to perform other tasks such as setting up statuses and notifications or special instructions for the recipients etc.
FINAL RESULT
85%
Process Improvement
5
New clients on board
1000s
Satisfied And Happy customers
By designing the Mailroom Pro application, I contributed to launching a successful product in this startup. My designs are currently being used by thousands of mailroom employees and it helped increase revenue brought into the company. My contributions throughout had a direct impact on company profit
Project Learning
Working on this project was a surely an enthralling journey for me. This was one of the most demanding project during my time in this organization. In the course of researching the mailroom app process at the client’s mailroom warehouse, I came to understand the entire process of how the mails get received to the point of delivery at the desk/doorstep of its employees. I gained lot of knowledge of how mailroom warehouses run.
I also learnt that Collaboration is key. Collaborating with the developers and project manager, I was able to focus on how the users would interact with the new app. Learning the key difference of how the existing app was used vs how the new app would be used was huge. This was possible because we as a team were very passionate of bringing this new design to our users. I worked closely with the project manager to make sure my contributions of the UX perspective were cohesive and easy for the developers to implement the design solutions. We had more work to do based on the requirements of the users. I realised that once we had web application ready, some parts of the process were purely handled on mobile device. Therefore we developed this further into android / IOS app too.
My contract with the company came to an end after working on various projects for a year. We as a team only had 3 months to design and develop this application successfully. The good news is, currently the design is being used by the clients and is running successfully. I feel on cloud nine when I finally witnessed my design being shipped successfully and the company got client like Facebook onboard.