The first app I prototyped for my internship at INTTRA was a shipping rates application. Rates was a new web product being developed with the purpose of making searching for shipping rates easier and more user friendly.
I was tasked with translating the desktop/web Rates prototype to a mobile interface. It would allow users to search for shipping rates from and to specific locations and view complex rate breakdowns anytime and anywhere.
The first step of my process was looking at the current Rates web application. I spent a lot of time clicking through the prototype to fully understand how it worked. I then dissected its most important visual and informational characteristics to implement into the mobile interface.
Then I began working on some very low fidelity sketches to brainstorm some basics visual structure and the basic user flow. Then I like to make thumbnail sketches of the main screens before moving on to higher fidelity mock-ups on 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.
The home screen of the app shows recent search results and the top nav bar. The left button is the user’s profile and settings, the middle is the search bar, and the right is filters. The search bar expands to reveal the four required fields; origin, destination, effective date, and weeks out.
When the origin or destination field is selected, a new screen comes up with the option to search or select a current location recent search. When the effective date field is selected, a calendar screen comes up. Once a user selects a date, the "apply this date" button becomes live.
The weeks out field is pre-selected to 6 weeks out, which is the most common selection, but if the user wishes to change it they can. Once all the fields are selected, the user can search for rates under that criteria. The result cards show the most important information regarding the rate; the shipping carrier, origin/destination (since these can be surrounding ports of what the user searched for), the service, the dates, and most importantly the price. Additionally, the user can filter their results using the filter option on the right of the nav bar.
Using force touch, when the user only lightly holds the screen, the rate details are previewed, and then when they press with more force, the details are fully opened. Within those details there is an option to view the route of the ship, including all the expected stops, on the map.
Since this was the first app I created for INTTRA, I learned about the branding of the company to stay consistent with their desktop products. I also had to learn how to use Sketch and InVision, which I was eager to do, and this app provided the perfect in-depth learning experience through trial and error. Click here to view the inVision prototype or view the video of the app demo below!