NewHope Logistics

www.newhopelogisticsinc.com

PROJECT OVERVIEW
This project is a mobile first design and responsive web app for a freight forwarding company, NewHope Logistics.  My core responsibilities for this project include user research, wireframing, testing, and high fidelity design for the web app. 

Role:                                                                                            Company:                                                                  
UX/UI Designer & Front End Developer                          NewHope Logistics                    
Design Tools Used:                                                       Front End Framework Used:
Sketch & Sketch Mirror                                                      Bootstrap

THE CHALLENGE
Build a marketing website for NewHope Logistics Inc. to create an online presence and establish credibility for the company. 
01 COMPETITIVE ANALYSIS
Other freight forwarding logistics companies: Panalpina, OEC, Group, & Unique Logistics are large corporations that provide a wide array of services.  However, none of them service smaller/mid-size companies and do not provide personalized service and support. 
From the competitive analysis, I want the website to emphasize on how NewHope Logistics Inc. provides personalized or customized services and responsive support. 
02 USER RESEARCH
I conducted 3 live interviews with supply chain professionals to better understand their motivations for partnering with logistics companies and the problems they face. 
After gathering insights of the frustrations supply chain professionals face, I devised the following problem statement:
Companies need a way to pass customized shipment requests, receive clear tracking, and receive responsive customer support, so that they can improve their finances and reduce inventory load. 
03 USER PERSONAS
Based on the interviews, I created a user persona named Bryant, a supply chain analyst who seeks to improve his company finances by receiving responsive customer support and clear tracking of shipments from his logistics partner. 
04 USER JOURNEY MAP & USER TASK FLOWS
From journey mapping, I found that there is a drop in emotion that the company website can't provide transparent quote pricing and has to receive this information via phone.  This is due to resource constraints of the company.  
As a designer, this was something I recommended to management that needs to be added. 
From user task flows, I was able to draw out interaction flows to help me prep my sketches and wireframes. 
05 SKETCHES / WIREFRAMING
I started with low fidelity sketches to help me rapidly change designs and have an idea of how to translate my user stories, interview insights, and task flows.  These sketches were especially useful in communicating initial design ideas with users to get early user feedback.

06 MID FIDELITY DESIGNS & PROTOTYPING
I created a clickable mobile prototype with medium fidelity designs using Sketch to allow users to navigate through interactions.  Used Sketch Mirror to mirror screens on mobile device. 
07 USABILITY TESTING
I conducted 3 moderated in person tests for mobile view version of the NewHope Logistics Inc. web app.  The overall goal of the test was to find gaps and areas that the web app mismanaged user expectations. 
Tools Used: QuickTime Player for face and screen recording and Sketch Mirror. 
I used the rainbow spreadsheet template to help me organize findings and extract valuable user feedback. 
Objectives:
1. Determine if bottom navigation is helpful or frustrating for users.  Validating or invalidate the hypothesis that bottom navigation is more user-friendly, since thumbs are at the bottom half of the screen on mobile to make it easier to click. 
2. Ensure accurate UX/content writing.  Verify if the correct terminology is used for the freight forwarding industry. 
1.   Usability tests showed that users forget company name as they navigate through pages.  Always         have company name in header of mobile design.  Many responsive mobile designs exclude this to       save space.   
2.  User did not understand what the company did or what its value was from looking at home page.         This pushed me to display a simple and clear tagline.  
3.  Improve content writing by using language such as "our, we, etc." from a 1st person point of view         on the "About" page.  
08 INFORMATION ARCHITECTURE
The usability tests results also pushed me to change my site map with the content under the "customers" tab.  I learned that users expected the "customers" tab to show customer testimonials, when in reality the page showed customer tools.  I revised the site map to align with user expectations.  In the end, it was the management's decision to remove the "customers" tab due to constraints with providing the customer tool for providing quotes.  
08 UI DESIGN
At last we arrive at the final recommended design, which includes responsive design to view on mobile, tablet, and desktop. 
I say "recommended" because some features were taken out due to limited company resources. Taken out features include "request quote" feature.
I displayed my journey maps and user research to management to demonstrate that there is high value in including these features for the future. 
The landing page (see mobile screenshot) uses the keyword "Customized" to highlight the differentiating value from larger enterprise companies and has a simple tagline to communicate clearly the value of the company.  
The request quote page (see tablet screenshot) will include keywords "receive a response within 24 hours" to highlight that the company provides responsive customer support, one of the user persona's needs.  

Desktop Viewport for Services

09 KEY TAKEAWAYS
   1. Always have company name in header of mobile design.  Many responsive mobile designs                  exclude this to save space.  Usability tests showed that users forget company name as they                  navigate through pages. 
   2. Be careful on how tabs are named in the navigation bar and usability test showed                                   navigation positioned on top of page is preferred over bottom of page.  Ensure tab title aligns               with user expectations.  
   Things I'd improve on if given more time and resources:
    -  Design a dashboard for showing tracking packages via ocean, air, trucking, and passing                       customs and test if data is organized in an optimal way for users.
    -  Strategize on adding more content to show how NewHope Logistics Inc. provides personalized           support (ex: process steps).  ​​​

↑Back to Top