The second app I prototyped for my internship at INTTRA was a vessel tracking mobile application. It is based on the use of AIS (automatic identification system) tracking, so once the user logs in they can see where all of their containers are on the map.
I was tasked with creating an application based on the concept of using AIS tracking so users could easily track their shipments from their smartphones.
The first step of my process was a brainstorming session with the Product Owner and Head of User Experience. The Product Owner explained all her ideas for what she wanted the app to be able to do and certain requirements it should have. After working with her on some very low fidelity sketches to make sure we were on the same page, I started my brainstorming of the user flow. I like to quickly think out what the user flow should be before making high fidelity mock-ups to eliminate any major flow issues before. Then I like to make thumbnail sketches of the main screens before moving on to Sketch.
After sketching, I move to making high-fidelity screens in Sketch. I had never used Sketch before my internship at INTTRA, but I have learned to love it and all of its capabilities. I used the Craft plug-in to link all the screens before I pushed it to InVision.
When the user first logs on to INTTRA’s tracking app it brings them to the point on the map where the highest concentration ships carrying their containers is. This is the ship view. The button below that is to toggle ETA change warnings on and off. Ships or ports highlighted red signal that a container is arriving or leaving late, while green signals that it is ahead of schedule.
When a user pinch zooms in to a ship the name and amount of containers is revealed. Then once a user taps on a ship the details are revealed. The details include the ship’s name and country, its current status, speed/course, draught, a visual of the route, and the list of containers on that vessel (all containers are listed by their container, reference, and booking number). In addition, there is an option to add it to the user’s watchlist, which can be viewed by selecting the third option on the bottom navigation bar.
The map can also be changed the port view, where the user can view ports their containers are arriving to or departing from. The map can be filtered using the most top right button.
When a user pinch zooms in to a port, the name and amount of containers going through that port is revealed. The details are displayed as a calendar view. It defaults to the current date selected on the calendar, so all the containers listed are coming in or leaving that day. ETA changes are also marked on the calendar by red and green dots.
When a container is selected from any view, the container details are pulled up. The container detail screens are the most in-depth information a user can access in this application. These include the three reference numbers, Track and Trace events, and a view of the vessel the container is on with its position on the map.
The last feature of this app is the search function. It was impossible to have one smart search bar that could differentiate from/to searches from ship names or trade lanes, so I chose to take a different approach. Once the search icon is selected, the phone will fetch all of the user’s booking data. The recent searches are displayed for every category, but once one is selected, only that categories data is selected. The user can then use a search bar to narrow down within that category. For example, if the user selected from/to, all the ship routes that the user’s containers travel would be listed. If "Shanghai" was typed into a search bar, then all "Shanghai to" or "from Shanghai" options would remain. Therefore, the search function really becomes a finding or filtering function disguised as a search for the user. This is only possible because the app is based on solely the user’s data and information.
Compared to the first app I created for INTTRA, this one was definitely more difficult because it starts from the Product team telling me that they need "an app that will track containers." From that vague statement I worked with the product team to develop the most likely use cases, which lead to more concrete requirements. This was a great learning experience about how ideas are developed in the workplace, with the help of different departments working together. Click here to view the inVision prototype or view the video of the app demo below!
After fleshing out the prototype for the mobile application, I created a concept for what a desktop version of the same app would look like and how it would function. This was the first experience I had translating an app from mobile to desktop. I learned that it is a lot easier to go from mobile to desktop than desktop to mobile because the design is already very simplified.