ShipFlow
The app that helps you pack and track containers around the world
Where
Tel-Aviv, Israel
Role
Designer, Researcher
What
Native Mobile App (iOS)
Category
Shipping
Why did i make this project
While I was studying I planned to move to a different country. I had to move my items but I couldn't find an app which concentrates all available companies for the task in need.
Why
Portfolio Project
When
August 31 - September 11
Market research
The claim
The global shipping container market was valued at $8.70 billion in 2019, and is projected to reach $12.08 billion by 2027.
The bad
They need more features to see the booking, search for schedules, book vessel, etc. The apps are operationally functional, but their features are still primitive (Maersk, CMA and CGM).
User Survey
I conducted a quick survey among people who are in need of transporting and tracking containers around the world.
What's the most important factor to consider when you want to track your container?
Notable comments
CMA CGM
MCS
Problems from the comments
The good
All apps allow you to track the containers with relative ease
Personas
I created two personas based on two types of users of the app: manager and administrative officer.
High-fidelity prototype
I connected my high fidelity designs into clickable prototype that will allow me to test the app on first group of users.
Prototype validation
I validated my prototype with 3 users. Each were given a subset of the prototype dedicated to the container management I wanted to be sure users understand the flow
I validated my prototype with 3 users. Each were given a subset of the prototype dedicated to the container management I wanted to be sure users understand the flow
Study results
I validated my prototype with 3 users. Each were given a subset of the prototype dedicated to the category product and product detail views I wanted to be sure users understood that there are more products within categories, and that each product also has a dedicated page
66% off users (2 out of 3) were unsure where is the add items button because it was unclear. They quickly understood how to items once they found the page. so change had to be made to make it more clear
Prototype update concept
Because of time constraints, I wasn't able to run a second usability study on the updated prototype however iI have updated it by moving the add button to top right of the screen, same as the save button on the item management page
Despite being financially successful and trending, some companies fail to address core issues that are related to their services, business, and process design:
Process consolidation
Affordability
Lack of complimentary services
Competitive analysis
Maersk
I analyzed 3 of the most popular apps in the field, looking at both the matching experience and negative app store comments, to find patterns
Initial research shows
There is a need for a convenient and easy way to track and manage containers around the world for individuals and companies alike.
Time to start designing!
After I went through all of my research data, it was time to sketch out the first flows and the initial low fidelity wireframes.
Flow diagram
To outline all the necessary functionalities I created a simple flow diagram of the main tasks the user can do. One of the flows is shown below. Fail state flows were also created, but not shown due to space constraints.
Low-fidelity wireframes
Once the flow diagram was established I started creating low fidelity wireframes of the main flows
High-fidelity UI Design
Once the flow diagram was established I started creating low fidelity wireframes of the main flows
Color palette
Accent, primary, secondary, tertiary, background
Main CTA button color
Font
Plus Jakarta Sans Regular, Medium, Bold
AaBbCcDdEeFfGgHh
Alignment and grid
I picked an 8-point grid for the project and set the margins for within groups at 8 and 16, with margins between groups at 24, 32 and 48