Vessel Charter & Brokerage

Brief

Design a vessel charter & brokerage service for offshore vessels.

Task

The Vessel brokerage service should effectively aggregate the demand and supply of offshore vessels in West Africa by offering a platform that links Vessel Owners across the region with potential clients.

My Role

Product Designer (UI Design, UX Design), as well as converting the UI design to HTML using Bootstrap 4 as a framework.

The Team

Chidiebere Nweke (Product Designer & Team Lead) | Team C&I Leasing | Uzochukwu Nweke | Chinelo Abia

Tools

Paper | Microsoft Excel | Sticky Note | Balsamiq | Photoshop | Figma

Methodology

Competitive Analysis, Mind Mapping, Card Sorting, User Personas, Systems Map, Site Map, User Flows, Wireframing, Prototyping, Usability Testing.

Timeline: 9 weeks

My Process

My UX Design Process

Before I begin any project, I try to understand the basics. This requires an understanding of two important aspects:

  • The user (Users and their goals)
  • The brand (Business goals)

The questions below may vary depending on the business and are not limited to the questions below.

  • What’s is the problem?
  • What issue are you trying to solve for your user?
  • What problem are you trying to solve?
  • How does this project fit into your overall brand mission and goal?
  • What role does this project play in reaching that goal?
  • Is now the ideal time for your business to pursue this project?

I undertake research once I’ve determined what this project’s fundamental objective is and what problems they’re attempting to solve. I always prefer face-to-face interviews to measure verbal and nonverbal replies, although video or phone interviews was also used.

  • User Interview

  • Stakeholder Interview

  • Market Research

  • Competitor Analysis

The questions below may vary depending on the business and are not limited to the questions below.

  • What are they having trouble with?
  • What do people expect from the product?

In this step, I used all of the information obtained in the previous two phases to analyze and simplify the most relevant parts.

  • User personas
  • User journey maps

Using what I learnt throughout the research process, I created a user journey map to assist me understand what the user will experience when using this service.

On this phase I built out my design.

  • Site map
  • User flow
  • Wireframe.

For this phase, after several designs and redesigns, we’re ready to launch. Feedback from the development team is critical. I make sure that any concerns that arise are properly communicated and addressed before the service release.

  • Internal testing.
  • User testing.
  • Beta launch.

When the service becomes live, it’s time for another round of testing. I evaluate the finished project as a whole.

The questions below may vary depending on the business and are not limited to the questions below.

  • How are users responding to the product?
  • Was it effective in addressing their issues and eliminating their pain points?
  • Where can I make improvements to the product?

User Research

Every design is made to appeal to a target audience. After being assigned this project, the first thing we did as a team was to identify the users for whom I would design and get to know them as well as their objectives.

Users and their Goals

The client has a diverse user base, with most of its users in West Africa. No single design is perfect for all of them. For the client, I did research on user demographics. Then I spoke with a few of their existing customers to find out what they had to say about the service.

The following questions aided me in determining the direction of my research:

  1. What exactly are the user’s goal?

They want to find the best vessels in their price range with the best service, allowing them to manage their time, and vessel chartering process.

USERS: Business or Individuals Looking for vessels.

GOALS: Choose vessels that meet their requirements.

  1. Aside from pricing, what else determines the decision?

The ability to charter and manage offshore ships feasibly allows them to minimize the amount of work that can be done by one person, save money, and increase performance.

  1. Who does Ci shipbrokers target?

Offshore energy businesses, maritime business owners.

  1. What problem is Ci shipbrokers trying to solve?

Using technology to organize and improve West Africa’s vessel charter ecosystem.

Personas:

Based on the research findings and brief that was given to me, I created three personas to reflect the users I planned for: one vessel owner and two end users.

Jumoke

Ade

Chioma

I determined the main user needs I wanted to address on the website based on the user personas, while also taking the client’s needs into account.

The major requirements I identified were:

  • Vessel Search to easily find vessels.
  • Clear Vessel Organization for a seamless charter experience.
  • Detailed Vessel Information to ensure proper vessel selection.
  • Helpful Vessel Suggestions CI leasing expertise and handpicked vessel collection are shown in helpful vessel suggestions called featured vessels.
  • Vessel Reviews to help make informed charter decisions and allow for user feedback.
  • Vessel Features to help make informed charter decisions.
  • Simple Vessel Checkout Process to save users time and boost vessel charter.

Competitor Research/Comparative Research

To develop ideas for my vessel charter brokerage website design, I identified a significant competitor, specifically a VesselVessel chartering online business. I researched mvxenergi, a direct competitor. Mvxenergi was the only company in Nigeria with an online presence for its VesselVessel chartering service.
 
My objective was to evaluate and identify common features and potential chances for CI Leasing to differentiate itself from its competitor. I learned how a vessel charter website organized its vessel collection and the general layouts they utilized from this activity. This was useful information that helped lay the groundwork for my design research.

Assumptions

Based on the research data, I made many assumptions about the users and ruled out a few scenarios. This was done in order to limit the extent of the problem.

Users don’t know where to charter a vessel.

During my research, I discovered that MVXENERGI had only recently been launched and was not well-known when I was working on this project. According to my research, most users interviewed had no idea where, how, or how much it would cost to charter a vessel online. As a result, I focused my efforts on helping users find a vessel using my design.

Users haven’t used an online Vessel charter platform before. (Users learning and immediacy)

I focused my design on reducing users’ frustration with this product’s UX design. Users have a genuine expectation of getting immediate results. I considered the difficulties of learning how to use a new product in my design to help the user feel less frustrated when they do not get the intended result immediately.

Users can charter a vessel.

From the client’s business goals, the design focus was to create value for users who want to charter a vessel. Through research and implementation, I ensured that this site’s UX design aligned with the client’s overall business goals and fulfilled important functions for the user.

Mind Mapping

Following my competition research, I created a mind map. The mind mapping method was utilized to help me analyze the list based on the company’s demands and user personas. This task was to help me organize the data into more defined concepts and then develop relationships and structure between those ideas.

Information Architecture

I was provided with an inventory as a starting point for this project. This information was then structured and clearly so that site users could easily find a vessel. My next step was creating the navigation system using a card sort.

Site Map

I designed a site map to establish the website’s general layout based on the research findings of the card sort and ideas from the rival website. This was done to guarantee that items were put where consumers would expect to find them on the website, making the experience more intuitive.

Site map for the website

Site map for the website

System Map

I made a system map to have a better understanding of how a user will navigate around the website. The main goal was to have a better understanding of the functionality and scope of the user experience that the design will offer.

A system map that shows how a user might navigate the website.

User Flows

I designed a user flow for two personas to make this experience more targeted to the user’s goals. The goal was to identify the stages each user would go through as they navigated the website’s many pages and actions to achieve their goal. This allowed me to focus on what each of the users needed to do and how to offer that experience in the most effective way possible using my design.

For user flows, Chioma (PERSONA ONE) was the first user persona I tackled. Chioma’s main goal was to go to the site and look for a patrol vessel. Chioma’s user flow (shown below) shows how she might search for a vessel, confirm the vessel, and then charter the vessel. The user flow below shows her various paths to effectively charter a vessel.

User Flow: Chioma (PERSONA ONE)

Jumoke  (PERSONA TWO)  wants a fast and easy checkout process, thus it was important that I included this in my user flows. Jumoke’s aim of chartering a vessel is represented in the flow below.

User Flow: Jumoke (PERSONA TWO)

Development Phase

Wireframes + Prototype

After the client had defined and accepted all of the processes, I moved on to wireframes before developing mockups and prototypes.
 
I began sketching a couple of the site’s key displays using my user flows as a guide. I quickly tried out several different website style options as a result of this. I then ran four tests to check whether these concepts met user and business goals.

Wireframing

Based on the comments and personal insights I gained during the sketching phase, I began designing my early wireframes in Balsamiq. I prioritized the features that best suit the users’ needs throughout the website. I designed two wireframe options. 

Wireframe option.

Mockup

The client selected the first design mockup, and I created wireframes for other pages. I used Photoshop and Figma to design the mockup from the wireframes. Then I showed the client the two mockup designs, and we tested the design with other stakeholders. Testing the prototype allowed me to evaluate it early and make changes to meet the user and client business goals.

NB: Landing page mockup design.

Prototyping

Homepage

I kept the site clean and simple to avoid overwhelming users on the main page. I implemented main and secondary navigation and a search and tracking tab to make it easy for users to search and track the vessels they ordered. I also prioritized the customer reviews area since it builds confidence and helps people to make more informed business decisions. I included important links in the footer to help users find any additional information they need. I also included a blog feed section at the bottom of the site so that users could stay up to date on the latest company news.

Vessel inventory page

One of my user personas requested the option to select vessels based on distinct attributes, so I included a filter and sort by function for location, price range, and other vessel features. I also included a breadcrumb trail to help users navigate and find their way through the site.

Single Vessel Page

I ensured that detailed vessel descriptions were available on every vessel page so that users could validate that the vessels met their needs. A user can receive vessel recommendations based on the current vessel selected. I also prioritized the vessel reviews section because it allows for user feedback, builds trust, and assists users in making more informed business decisions.

Usability Testing

After completing my wireframes, I created a website prototype for usability testing. This would enable me to assess how users interact with the suggested website design and confirm that it meets their key requirements.

Before moving on to the design aesthetic, it was necessary to get honest, critical feedback from potential users and check the website’s performance using mid-fidelity, greyscale wireframes.

I ran a usability test with six volunteers, asking them to perform two scenarios the same way my user personas would. The two scenarios were as follows:

  1. You need a patrol vessel. Show me how you would find and charter a patrol vessel.
  2. Show me how you would request a vessel you couldn’t find on the website.
  3. Show me how you would filter a search result.
  4. Charter a vessel, then checkout.

My primary insights from the tests were as follows:

  1. Users were able to explore the website and find vessels with ease.
  2. Users could request a vessel that wasn’t listed on the website.
  3. Users wanted a feature where they could request for physical inspection of the vessel.

The Next Steps

The next steps I’d want to take for this project would be to continue conducting usability testing and improving my designs.