JSL Website
Research
UX/UI
Branding
Prototyping
Usability Testing
This project focuses on designing a real website and web application for Joshua Shipping Logistics (JSL), a company based in Puerto Rico that helps clients with the import and distribution of goods in the island. The product aims aims to consolidate their business operations and services with an online platform.
My Role
End-to-End UX Researcher and UX/UI Designer
Team
solo designer
2 developers
*currently under development*
Timeline
August - September 2024
(5 weeks)
*Working at a part-time schedule
Tools
Figma, Miro, Procreate, Lyssna, Illustrator, Photoshop, Rhinoceros
Streamlining communication to keep clients informed throughout the entire shipment journey.
Problem
JSL currently does not have a website. The business has been operating with Excel sheets and check/receipt books; and communication with clients occur via email, phone calls and WhatsApp. Because of the scattered means of communication, important information regarding shipments is often delayed or lost. In addition, their old school book-keeping methods take more time and effort to maintain and update. JSL workers run a complex company that involves important paperwork, transportation, constant shipment status updates and inventory tracking. There is an opportunity to consolidate all JSL business operations and communications through a web platform to improve the experience for clients, and give the company the needed exposure to help them achieve their business goals.
01. Discovery
Background
Joshua Shipping Logistics, Inc. is a shipping logistics company that receives shipment containers with produce and food products, stores them at a warehouse, and delivers goods to local businesses in Puerto Rico on behalf of their clients. The JSL clientele comprises 20 clients from Florida, USA. These clients do not have a license to store goods and distribute goods in Puerto Rico, so JSL serves as an intermediary.
Company operations follow a structured system which starts by by receiving client shipment containers at the port and assisting their them in submitting the necessary paperwork and permits so the goods can enter the island. Once the goods have been given a “release” from the government, JSL can transport the products to their warehouse. When the products arrive at the warehouse, the Department of Agriculture will inspect the products for approval before JSL can distribute them to local stores. Once approved, JSL will weigh and count the goods to make sure they match the Bill of Lading. Once the inventory is documented, JSL will assign a lot number to the container and keep inventory of the products until they are all distributed locally. It is imperative for JSL to maintain the client informed of the container inventory and all dispatch activities at all times.
This project started by talking with a representative of the company to understand how the business operates and their needs.
Research
In the research stage of this project, it was important to understand how JSL operates, what services they provide to their clients, and what type of information is shared between parties. Because the website would be designed for two types of users, I interviewed a representative of the company owner and an existing client to gain perspective on both sides. Some of the challenges I faced during the research process were that I was not able to directly speak to the company owner, and the limited amount of people to interview due to the confidential nature of the business. As a result, it was necessary to conduct more secondary research in the form additional conversations with the client to better support the project. In addition to conversations with JSL and the client, I conducted a competitive analysis that helped me understand how the competition presents their services and how they communicate with their clients via their online platforms.
Kick-off Meeting with Client
To start the research, I spoke with the JSL representative on behalf of the client, and whom would also be the developer of the website. In this meeting, I learned that the services JSL provides could the broken down in three main steps:
Pick Up and Transportation
JSL receives Bill of Lading (BOL) and Commercial Invoice from client. Using the BOL, JSL tracks the shipment and picks up container at port, assists with customs brokerage and then transports shipment contents to their warehouse.
Inventory Tracking
After all inspections have been passed, JSL will conduct inventory check to verify the contents match the Commercial Invoice and will provide the client with updates as products get dispatched.
Dispatch and Delivery
JSL will dispatch and deliver products to local supermarkets and stores as arranged by the client. JSL will maintain the client updated throughout the entire process until their inventories become out of stock.
During this introductory meeting with the JSL rep, we were also able to identify together the main needs for the JSL website.
JSL Client needs:
to schedule shipments to arrive at Puerto Rico
to keep track of their lot inventory
to keep track of customs progress
to be able to upload paperwork for JSL
to be able to see bill statements and submit payments
JSL Internal Operations needs:
to keep track of and provide updates to clients about their shipments and lot inventories
to request client documents and payments
to have a database of their clientele (profiles, documents, shipment information, lot information, etc.)
to develop their company branding
Identifying Gaps and Opportunities in the Market
After getting a better understanding of the business, I looked into existing websites for companies that offered similar services. This secondary research helped me see what features competitors offer their users, how their users are reviewing their features, and their overall UX/UI design. This would help me identify successful features that could be incorporated to the JSL website to present their services and communicate with clients more efficiently.
Direct Competitors
DLC Logistics, ShipCalm and ShipHero:
I looked into companies that offered fulfillment services for commercial business and found three that seemed well established and offered the same services as JSL. These three platforms had landing pages where they displayed services offered, testimonials, key product features and snapshots of what their client dashboard and tracker software looks like. They were also responsive and optimized for mobile web. Two of them had clean and unique UI designs while one looked more outdated. An important feature all three included was a CTA to inquire about services or get a quote.
Indirect Competitors
FedEx and Terminal49:
FedEx is one of the biggest shipping services in the United States for both ground and freight deliveries. When sending or expecting a delivery, its website allows users to see shipment details, track their orders, and see their travel history.
The FedEx website UI design seems up-to-date, but it can be a little overwhelming because of how busy it is. Another platform I looked into was Terminal49, which helps companies track their shipment containers. The website design is unique, user-friendly and visually appealing. In their landing page, they shared snapshots of the client dashboard.
Opportunities
Looking at these different websites was very useful because I was able to discover patterns on the type of information that is being shown on the landing pages of fulfillment and shipping companies. I was also able to see how to present their services through illustrative diagrams and previewing UI that clients will have access to.
User Interviews
A challenge I faced during the interview process was that I was not able to speak directly with the JSL owner and I was limited to how many people I could interview. However, I was able to speak with a JSL representative/employee and one of their clients. Both interviews were conducted through video call.
Because both of the participants had different needs, I worked on two separate interview guides with questions geared towards the type of user, employee and client. The interviews helped me delve deeper into each of their needs and understand their frustrations with the process of exchanging and sharing information with one another during the shipping, tracking, and dispatching of goods. All the insight gained from interviews helped to identify what features are necessary for the new website.
Key Insights from affinity mapping
Current Documentation Tools
JSL uses Excel for inventories and Microsoft Access to keep records of their client data base. The JSL representative said the current methods were very tedious.
JSL Service Goals
JSL wants to provide their clients with a one stop shop, seamless experience and expand their client base to other states besides Florida. They also want for each client to have their own account where they can access their details, track orders and submit payments in a single place.
Current Communication Methods
Participants said that their communication occurs mainly through phone calls, emails and WhatsApp. Participants said communication can be rough due to information being sent through different methods, there is not a consistent method to exchange information.
Keeping Track
For JSL to be able to keep track of how many days a client's lot has been stored in the warehouse. JSL would like to have an efficient way to track client documents
Desired Features
for clients to be able to upload documents
for JSL to keep a detailed and updated inventory of clients goods.
for clients to be able to request dispatch
for JSL to request payments and for clients to submit payments
document information extraction
Status Updates
For JSL to provide status updates of anything related to the clients shipments and inventories. For clients to easily access updates of their shipments, inventories and deliveries in real time.
User Personas
Based on my learnings so far, I developed two user personas: Elias, the owner of JSL, a third party fulfillment company, who has been struggling to keep track of paperwork regarding client payments and accounts due to scattered communication and book keeping methods. There's also Marta, a fruit selling company who has been using JSL to distribute produce to local markets in Puerto Rico, but has been struggling to keep up with the inventory and dispatch updates of her containers due to communication issues.
User Journey Maps
Once I had developed the two personas, I delved deeper into understanding their struggles by creating user journey maps to identify at what stages their pain points occur. I discovered that Elia's biggest problem is not having confirmation from clients that they have received their update messages and in consequence delaying operations For Marta, she is frustrated that she did not receive updates about the goods passing the inspection or that JSL received her dispatch request.
02. Define
How might we create a website that will aid Joshua Shipping Logistics in managing their business and providing a seamless, one-stop experience for their clients?
Site Map
I started organizing my ideas by creating a site map outlining the structure of the website and the client dashboard, while also defining key pages.
User Flows
With a clear understanding of what the website and client dashboard are structured, I delved deeper into outlining essential user flows for the client dashboard journeys.
03. Ideate
Sketching Design Ideas
After designing the architecture of the site and identifying an important user flow, I finally started to draw what these screens would look like for the main pages and user flow; creating a new game album. I also drew ideas of how to add game progress information into the game cards at the Play page, and how bringing game profiles from the console into the app would look like with additional details.
Mid-Fi Wireframes
After sketching the main screens, I moved onto digitalizing them, refining them and making any additional needed screens.
Screens for JSL Website
Screens for Client Dashboard
Mid-Fi Usability Testing
The goal was to test how smooth or difficult, and how long participants take to complete a task. I also wanted to know how they felt about the UI design of both the website and client dashboard. The test results were used to further develop the task flows and prototype.
The usability tests were conducted asynchronously with 5 participants.
1
Find Services Information
2
Find an Existing Container
3
Add a New Container
In general, users said they like the website organization and that they were able to find things easily. Users also said they liked the different icons being used at the client dashboard menu and that the client dashboard clearly informs what each section does.
Suggestions
Task 3:
A user suggested having the add container button at the main client dashboard say “Add Container” instead of “+” because many clients are not computer savvy.
All this feedback was used to build the high fidelity prototype for a second round of testing.
04. UI
Branding
Logo
One of the client's needs was a brand and logo design for their company, and the only direction received was that they wanted blue to be the main color. After a few sketches, I landed on a simple logo with the company's initials, accompanied by three horizontal bars. The logo is italicized to communicate movement and the three bars are meant to abstractly depict a cargo ship with containers. The logo intends to portray the business as serious and reliable.
Logo explorations
Final iteration
Color Palette, Typeface & UI Library
Since the client has specified that they wanted the color blue to be the brand's main color, I used blue as the primary color and paired it with orange as an accent/secondary color. For the typeface, I selected one that was different but familiar enough to conveyed reliability, and unique enough that did not seem generic.
Telling Stories Through Images
The JSL hero section was an opportunity to introduce the brand to a prospective client or welcome back current clients. Because this is the first impression once a user visits the website, it was important to use an image in the hero section that previews what the is about and their services. I made this image by assembling a 3D model that represents the JSL warehouse and trucks with workers unloading goods to be stored.
Another aspect to consider for the landing page, was providing a brief explanation of the services to communicate what the JSL services would entail. To do this, I created three diagrams that broke down the client experience into three steps: pick up and transportation, inventory and storage, and dispatch and delivery.
05. Prototype
Hi-Fi Wireframes and Prototype
After synthesizing the mid-fi usability test results and creating UI components for the new features, it was time to create refined versions of the wireframes.
Once I had designed all the necessary screens, I proceeded to create a prototype of the product with five task flows that would be tested.
Screens for JSL Website
Screens for Client Dashboard
A Closer Look at the JSL Client Dashboard
06. Validate
Hi-Fi Usability Testing
In this second round of testing, the goal was to retest the previous flows with completed screen designs. The feedback received from the first round of testing was incorporated into the screens.
The usability tests were conducted asynchronously with 5 participants. Two of the participants were employees of JSL.
1
Find Services Information
2
Find an Existing Container
3
Add a New Container
In general, participants thought the website and client dashboard were easy to use and navigate. They said the UI was user friendly and that it was clear of what information could be found in each section. Users also said they enjoyed how informative and illustrative the homepage was.
Suggestions
Participants had a minor suggestion that was implemented in the images below.
Next Steps
The Joshua Shipping Logistics website and web app is far from complete. As seen, this project focused on designing the main pages for a basic informational website for the company and the key screens for the client dashboard portal. Since the current design is an MVP, there were some additional pages and functions that I was not able to design for. Some of those pages would be the inventory page, and the client profile page. There is also a side of the platform that needs to be completely designed, the operations login for the JSL employees client data base where they will be able to manage client profiles, orders, inventories and all communication with client and brokers.
JSL is a real client, and will continue working with them and their software developers to design and build the rest of the website and web app.
