Pioneering News Portal for Indonesian Freight Forwarders
Pioneering News Portal for Indonesian Freight Forwarders

Stakeholder

Year

Role

Actions

:

:

:

:

Marketing Division, Andalin

2021

UI/UX Designer

Research, Anaysis, Information Architecture, UX Design, UI Design, Project Management, User Testing

Overview

Overview

Overview

Freightpair revamping has the main goal to transform the current website freightpair.com to a news portal where visitors or users will be able to see the latest news and update about freight forwarding industries in Indonesia. In the meantime, users will also be able to obtain information about latest shipment rates as well.

The name of the platform later changed to "Freightsight" to match the website vision and mission. The goal will be translated through Freightsight website (freightsight.com) as a news portal where customers could find the latest information related to export import commodities and business trend in Indonesia and global.

Objective

Objective

Objective

  • Freightsight to be the no.1 media portal for supply chain in Indonesia

  • Be a relevant and resourceful news portal for Indonesia freight forwarder industry

  • Give additional value to customers through news and rate index information

  • Become a channel to build brand awareness, activation and retention

Competitive Analyses

Competitive Analyses

Competitive Analyses

Sea Trade Maritime News

Strength

  • Has been known globally as one of the fastest growing global maritime news site for a quite long time.

  • Market leader in connecting the global maritime community that has a diverse portfolio of publications,

events and business intelligence resources.

  • Connection to ocean trade expert enable them to provide up to date and reliable article insight, increasing people trust to the news portal.

Weakness

  • There are too many advertisement throughout the website which can distract the visitor focus. It is also makes the visitor feels uncomfortable when strolling throughout the website.

  • The website layout might seems out to date for some people

  • Messy information layout arrangement in both desktop and mobile version

Opportunity

  • Design a news portal without advertisments. Advertisement that comes from internal Freightsight will be show as a pop up which will be layouted properly so it will not annoyed visitor.

  • Better information layout arrangement

  • Better design to enhance the reader comfort when reading article or strolling the website

  • Create a better mobile browser view

Threats

  • Sites like Sea Trade Maritime and many other websites available on the internet

Journal of Commerce (JOC)

Strength

  • Provide a wide range of important news categories in logistics

  • Following the latest trend of media information by having a Podcast

Weakness

  • Probably lack of SEO, the search engine only show 1 correct website recomendation about JOC, the rest are the other thing that not related to JOC

  • Too many information within one page

  • Font size might too small for some people

Opportunity

  • The first news portal for freight forwarder in Indonesia (using bahasa)

  • Better information layout arrangement and selection

  • Use big enough font that will be comfortable for young and senior visitor

Threats

  • Sites like JOC and many other websites available on the internet

User Research

User Research

User Research

1.1 User Demographic

Age

Gender

Industry

Job Position/Level

Location

Late 20 - 50 y.o

80% Male vs 20% Female

Freight Forwarders

Direct Shippers

(Exporter/Importer)

Trade Analyst/Enthusiast

Manager

SUpervisor

CXO

Business Owners

Government

Academics

Staff

Indonesia, mostly Java island

1.2 User Personas

After completing a competitive analysis and mapping user demographic, along side with product owner, we interviewed 6 people with logistics background who were interested in reading the latest trend in export import and any freight forwarder related issues. I then created user personas based on my user research that help me to paint a realistic image of user’s goals, preferences and behaviour.

1.3 Minimum Viable Product (MVP)

Next, I gathered requirements to define what features I needed to design for the Freighsight website. I developed key user stories from my personas and minimum viable products (MVPs). This MVPs would allow me to quickly test my initial designs ideas on users which giving me valuable feedback in the begining of design process.This drove me to these MVP Needs:

MVP Need #1: When using this website, I don’t want to overwhelm by too many information. I need to read comfortably.

Feature Requirement: Clean, easy to read layout. (prefer to personas favorite news portal something between The New York Times and JOC)

MVP Need #2: When using this website, I want to read summary of the article first because it help me to decide wether the article is relevant with my interest and need.

Feature Requirement: 2- 3 lines paragraph of excerpt in each articles.

MVP Need #3: When using this website, I want to be able to share my favourite article to my colleagues so they can also know the latest information related to our company business.

Feature Requirement: Share button link to social media : Linkedin, Whatsapp, Facebook, Twitter

MVP Need #4: When looking for a business tips regarding export import shipping, I want to find a reliable source that can enrich my knowledge to help me make a better decission for my business.

Feature Requirement: Specific article and article section that contain valuable and reliable insight about export import. Such as Industry Insight or expert opinion.

MVP Need #5: When using this Website, I want to keep updated with the latest article published.

Feature Requirement: Subscription

MVP Need #5: When using this Website, I want to read and understand the content clearly, which I prefer the article use my native language.

Feature Requirement: As the target market of Freightsight is Indonesian, the website should be all using bahasa.

When I did user research I also found that Younger corespondee (age range from 23 - late 20) often read news such as New York Times, Harvard Business and Wall Street Journal While Senior corespondee (Age above 30) prefer simple style like Sea Trade Maritime and JOC. However, I noticed that there is some biased among the senior corespondee toward Sea Trade Maritime and JOC as they tends too focus on the content (which in this case related with their background as freight forwarder) rather than the layout style which is the real issue that me and my team try to ask them for. However both of the corespondee group show an acceptance toward the new Freightsight website looks.
This finding later influence my decision to combine between the modern and clean layouting of New York Times and the compact layouting of Sea Trade Maritime and JOC for Freighsight Website.

Site Map

Site Map

Site Map

User Flow Diagram

User Flow Diagram

User Flow Diagram

Wireframing

Usability Testing

Usability Testing

Usability Testing

Using the prototypes, I recruited 8 participants who works in freight forwarding and logistic company from different department such as operations, finance, business intelligent and pricing. During the test, I asked them to complete a series of tasks that helped me to understand their thought process and see if they could accomplish the MVP goals. In this period I also asked them about their likes and dislikes of prototype.
After conducted user interviews, I synthesized and ranked my observations into concrete issues using Jakob Nielsen’s error severity rating system. This method helped me to prioritize and undertand the most important pain points and to proposr new solutions for my design and ideas for the next improvement based on the results.
Finding and Final Decisions
Finding and Final Decisions
Finding and Final Decisions
Through the interview and research above I conclude several findings.
First, I found that most of the corespondee are comfortable to read from a newsportal with simple layouting such as New York times and Detik (Although they claim detik has too much ads and somehow distracting but its still enjoyable to read due to its simple navigation).

First, I found that most of the respondents are comfortable reading from news portals with a simple layout, such as The New York Times and Detik. However, while they noted that Detik has too many ads, which can be distracting, they still find it enjoyable to read due to its simple navigation. So, I decided to implement the simple and clean theme to Freightsight.com to promote easy navigation. I also made it a priority to minimize unnecessary distractions, such as advertisement banners, and to eliminate clickbait ads.

Second, in terms of color, I also consider to use #f5f5f5 white with hint of light grey instead pure white #fffff for the background and Dark Blue #1D3354 for the text. There were reasons for this decision. The Dark Blue color, I took it from the Freightsight color identity. I avoid to use pure black #00000 for the text and pure white #fffff for background, as the recent research on readability found that using pure black on top of pure white background can cause eye strain to the reader when user read the text over an extend period.


Although the real problem is not always because of the black as text color. Black color in fact can be good for small thin fonts such as body text. A background that is too bright such as #fffff pure white can also be a major contributor to digital eye restrain since its too bright. Pure white has 100% of color brightness while pure black has 0% color brightness. Thus disparity in color brightness creates intense contrast light levels that can overstimulate the eyes when reading text.


A research study on Reading and Myopia found that black text on white background overstimulates the OFF ganglion cells white white text on black backgroudn overstimulates the ON ganglion cells which means white text from a black screen could inhibit myopia while black text on white background may stimulate myopia. The study advises against reading text on white background due to the significant contrast polarity.

Design Component

Design Component

Design Component

Typography

Colour

Colour

I decided to arrange the colour based on the golden ration colour or 6:3:1 rule. I used white colour #f5f5f5 as the main colour in purpose to enhace clarity and easy on the eye. The secondary colour is navy blue which is taken from the identity colour of Freightsight. This blue colour also taken from the colour of deep ocean and sky to represent freight forwarder. Freightsight use the same Navy Blue with Andalin as it is a part of the company’s product. This colour is used for footer background, header background, banner and button. Orange was peppered in as an accent colour, it is also one of identity colour of Freightsight. This colour also serve as highlight and button in several part of the website.

Button

Button

Icon and Favicon

Icon and Favicon

Standard Image Size

Standard Image Size

The website has several image size configuration. I created the image size guidance to ensure the image size frame for each website section consistent.

©Julianaputri. UI/UX Designer Portfolio. 2024