top of page
Final Design - Dashboard Screen
Logistics Management Application (Saas)
1SHIFT was founded in 2016, during the period where the freight tracking and logistics management industries were ripe for disruption.
Unlike other logistics software that entered the market from within the logistics industry, 1SHIFT was built with a hand-picked team that were experienced in building marketplaces to ensure all users would benefit from a digital logistics marketplace.
The Problem
Problem & Solution
While coming up with ideas to solve users’ problem, we needed to assess the current market situation. This meant we had to research into many existing products and analysis their detailed features to create a better solution.
The existing applications required a lot of manual process leaving a huge paper trail for each shipment and cost more money per shipment, making the end product expensive
Real-time tracking was also a big challenge for most of our customers as unlike google maps many trucking route are not well tracked and this was an opportunity to tap into.
The Solution
Now that we were well tuned to the challenges of our customer, we started brainstorming rough ideas and potential solution to these problems. We knew our solutions had to be developed and delivered iteratively in an Agile way.
-
The Desktop application should enable the dispatchers and other users to efficiently create single and bulk shipments with option to additionally add sensors and notifiaction capabilities.
-
The mobile application has be even more user friendly to provide a delightful experience for truckers/ drivers, the mobile application had to be a useful and practical tool and not add frustration to their even tougher jobs.
Going into the designing phase we knew that testing would have to very selective and specify to users, as we had a very tight deadline. This was not an issue but an opportunity to use fast testing methods and creative problem solving skills to predict many use cases.
My Responsibilities
As the Sr. UIUX Designer my role was to brainstorm and ideate with the product team to identify usability issues, suggest and create improvement solutions.
Conduct usability testing with drivers and desktop users, create personas and user flow.
Wire framing, Mockups, Prototyping, Final UI designs, and Engagement with the dev team.
I also took the time to develop empathy towards the user by learning more about them and their job. This helped in creating solution specify to their needs and challenges
Methodologies
Mehodologies
Working in a corporate and in a fast paced industry meant that we had very limited time and resource to test all of our ideas.
At a very early stage we realized that moving forward, one of our bottlenecks would be development and to avoid that we decide to use existing UI kits. We didn't need to built commonly used design components and other web systems, making the design handover and development, fast and effortless. These components came with clean code saving man hours in hygiene check.
All the above enabled us to spend more time on solving tougher problems.
UI KIT - Fuse
User Flows
User Flows
These flows enabled us to optimize users' time using the app and allowing them to successfully finish their task with delight. Many potential routes had to be vetted before finally landing on the version of order of task completion.
The user flows also helped debugging cases where users got stuck or distracted while performing certain tasks
For the design team these flows came in handy for easy communication with stakeholders and investors. This helped break down each step taken by the user and potentially see how they will move through the product.
Main User Flow
Wire Frames
Wire Frames
As much as we love creating a prototype and wire frames for each flow and screen, sadly in the real world developments moves at a much faster rate than we want and you could find yourself playing catch up if you don’t adapt fast.
This is exactly what happened at 1Shift. We were moving so fast with sprints and QA and other processes that it became very challenging for us to thoroughly vet each solution in bare bones.This didn’t mean that we had completely abandoned on or principles and ideologies. Wire framing on a high level structure of the entire product gave us key insights on improving usability and bring in some gamification.
The wire frame can be majorly broken into the following steps;
ONBOARDING > CREATE ROUTE 1 & 2 > REVIEW > DRIVERs APP
Wire frames of some of the main screens
The main challenge was to simplify the creation flow and this was done in a two step approach. The first screen required users to only provide minimum requirements and on the second only enter a pick and drop location. Once you enter these basic requirements you're 80% closer to dispatching the shipment. The rest information were optional based on your specific shipping requirements.
Alternatively users could create a shipment via a TMS management process, where they upload a file with all list of locations, after that they can quickly associate the relevant locations together or they can the create shipment by running the ‘optimize’ algorithm.
As users added locations to shipments the algorithm simultaneously calculates the capacity of each truck and then represents with an icon, Capacity Status. Many users came back with positive feedback for this particular feature, as they could imagine this saving them hours of manual processing and optimizing.
Testing
Testing
Aligning requirements with the entire team becomes a challenge as you want to purse the best method to achieve the best result.
One of our usability testing challenge was language, as English was the secondary language of test drivers and most dispatchers. We relied on translators to help bridge the gap between us here. Not something i hadn't encountered before.
We often relied on A/B testing and testing only key components when required, we knew that we were designing many tools and features with assumptions and expertise from industry experts. During one of the sessions we tested dispatchers familiarity to carriers
User account creation UI cards for A/B testing
High Fidelity
High Fidelity
As with many complex systems its almost impossible to showcase all screens and features in a case study. Below we’ll go over some of the most complex and task heavy actions in the application a user will perform.
Review Screen
Review Shipments
Over here users add additional details to shipments, create in the Create flow. As the page turned out to be longer than expected we used a tab navigation to help them move around the entire screen easily.
Button on the tab corresponded to the relevant section and that section would scroll to the top on click.
Users could also add a sensor to their shipment if they had perishables being transported. Humidity, temperature, GPS etc were some of the parameters monitored by sensors.
A detailed log with the option to upload images helped during accident and other claims.
The events of the shipment were colour coded so that is was easier for the dispatchers to identify the status.
Labeling of the pick and drop locations was important for efficient and quick communication between dispatchers and drivers. This too was designed iteratively.
Deciding to have a dotted line for driven route v/s a solid line would sound trivial to someone, but it had technical challenges, after discussing with the devs the latter was finalized.
Manage Shipment - Map View
Manage Shipment
This page gives the dispatcher a birds eye view of their entire shipments and their whereabouts, making it easy to dive deeper.
They could also toggle between a map view or a table view at this level
With a live view the dispatcher can see if any truck is off course and immediately take necessary actions.
Shipment Builder - Association Screen
Shipment Builder Screen
The shipment builder could be considered as the MVP of the entire product as it was developed to cater to the giants of the industry. Shipments were created in a matter of minutes with just a simple file upload.
This method gave the users a unique possibility of moving the locations around easily to best fit them in any particular route to maximize efficiency.
Exception Screen
Exception Screen
All exception raised for a shipment by the driver would be logged here. In an ideal day this page should be empty and not even be part of the users work flow, but it exists because we can’t control the world around us.
As each exception is generated they fall under this list with an aggregator icon next to it, the icon can be used to bring all exceptions together for that specify shipment.
Daily Emails & Invites
A big feature of the product was daily progress emails. These would go out at end of day to users and gave a quick snapshot of the entire days events.
Along with emails, SMS notifications played a huge role in alerting users about important events during the shipment.
Daily Activities Email
Signup Emails
Mobile App
Mobile Application
Driver Landing Screen
The mobile app had to be an aid to the drivers work flow and not intrude his job. During our initial interviews we realized that most of them don’t prefer using any electronic devices and many aren't allowed to use mobile phones under company safety guidelines. The app had to perform and provide a lot more to be of any practical use.
We spent time learning users behaviour and their daily tasks and how the app can supplement the job. Through our learnings we observed that many didn't prefer using their navigation apps. For those kind of use cases we built geo-tagging capabilities.
Ease of use, shot learning curve and gamifying the experience for drivers was our main goal.
5 Step Shipment
To achieve one our goals of a easy mobile app. We created an experience that is pleasant and fun at the same time.
The home screen had one big card for one shipment with a big and easy to locate CTA button. We designed it keeping in mind the user type. It's one tap action all the way from here.
The 2nd step involves them selecting their Pick, again using the card UI layout to build a mental modal. The 3rd and proceeding steps only involved them to tap the button when they were performing the said operation.
We will talk about some of the gamification elements in the following section.
Loading & Unloading Screens
Through user interviews we observed that when a shipment is being loaded or unloaded the drivers have a couple of hours based on the shipments, so instead of having a plain text during this phase we decided to include a small animation. The animation was intended to enrich their use of the app and delight them during their long lourney.
Success Screen
Again thinking of gamifying their experience, we added the small animation at the end of a shipment completion process. Through our testing we learnt that many user actually notice these animations and that it brings a smile to their face.
Design Systems
Design Systems
Even though we used an existing UI kits for faster and easy development. We needed to add our company brand guidelines to them. In addition to that, the ui kit lacked elements unique to our application and interaction and hence a library had to be created to fill these gaps.
My Learnings
Collaboration is never over-rated, getting regular feedback from your peers and stakeholders at the right time can elevate the design and usability.
Clear and open communication channel between the design team and development team is a must. Keep inspiring yourself for new ideas.
Users often feel pressured when being asked questions, they feel they need to answer smartly by being in the spotlight, this leads to incorrect or screwed information. Its important to make them feel relaxed and create a non pressure situation and always have a glass of water near!
Organizing symbols in sketch is crucial for using them efficiently and saves a huge amount of work.
bottom of page