Portfolio
David Immanuela
Back to Home
Logistics Website Design and Implementation
Logistics Website
This project involved the implementation of a website design for Notosu Logistics, a large cargo logistics company, using the WordPress Elementor platform.
CLIENT
PT Notosu Berkah Mandiri
TIMELINE
PLATFORM
Resposive Website
Notosu Logistics, a company offering project cargo, container shipping, car shipping, and FCL/LCL services, has an outdated, non-responsive website with poor information structure. This is a significant issue, as potential clients often assess the company through its online presence.
Old Version of Notosu Logistics
Therefore, I need to regenerate Notosu’s website so they can get positive impressions, escalate their prospective client’s trust, and ensure their website remains competitive in the long run. I will create a brand new website that is fresh, informative, and responsive on all platforms.
In this redesign project, I was the website designer who designed the style guide, layout, and information structure. Beside that, I was also the web developer who implemented the design into a live website.
Research
I conducted video interviews with Mr. Aldias to gain a comprehensive understanding of his website redesign needs. I discovered that the current website is not optimized for various screen sizes, making it difficult to use on both desktop and mobile devices.
Additionally, the website's information architecture is unclear, leading to user confusion and a reliance on direct contact with Mr. Aldias or his business card.
User Storyboard
Mr. Aldias provided me with examples of competitor websites that he admired for their well-organized information structure and responsive design. He emphasized his preference for a website that embodies a minimalist, elegant, and simple aesthetic.
Competitve Analysis
Following our initial discussion, I curated a collection of design references to present to Mr. Aldias during our second meeting.
Moodboards
Challenge #1
Given that I was the sole designer on this project, I had to independently handle research, client communication, timeline development, and website design. This required effective communication with the client, careful prioritization of tasks, and a commitment to delivering a website that met the client's specific needs, all while managing my primary workload.
Process
Information Architecture
During my initial meeting with Mr. Aldias, I gathered insights into the current website's structure and his vision for the new one. This information formed the basis for my information architecture.
Information Architecture
Wireframe
Using the information architecture as a guide, I created wireframe layouts for the new Notosu website. I shared these designs with Mr. Aldias to provide a visual overview of the new website's structure.
Wireframes
Style Guide
In addition to the wireframes, we also discussed the website's visual style, including the color palette (red and black), font style (sans serif), and imagery (personal photos and UnDraw illustrations).
Style Guide
High Fidelity Design
I finalized the design of Notosu's new website by combining the wireframes and style guide into high-fidelity mockups.
High Fidelity Design
I presented the high-fidelity design to Mr. Aldias, and he was really pleased with the overview of the new website. He also entrusted me to implement the design into a live website.
Challenge #2
While I have experience designing websites, I haven't had the opportunity to implement them into live websites using coding languages. Implementing my designs into live, user-ready websites is a new challenge for me.
Live website implementation
I began by learning WordPress, the platform used for Notosu's website, through YouTube tutorials and articles.
Learn Web Builder Tools
I learned about responsive design principles in WordPress and used Elementor to replicate my Figma designs. Elementor's layout tools, like margins, padding, and columns, are similar to Figma's auto-layout feature.
Results
I successfully regenerated Notosu Logistics’ website to be responsive with great accessibility on desktop and mobile and also improved the information structure (such as detail services, company details, and contact action). I also helped Mr. Aldias manage his website’s hosting and domain using Domainesia at www.notosulogistics.com.
*Update: Mr. Aldias's newly formed digital team intends to optimize Notosu's website for search engines (SEO). As a result, they have sought my consent to make necessary modifications to the existing website.
Aldias Pratomo A.
Owner of PT Notosu Berkah Mandiri
Reflection
I learned to communicate technical concepts clearly and concisely, as demonstrated by my improved interactions with Mr. Aldias. By actively seeking feedback and adjusting my communication style, I was able to provide clearer explanations and answer questions more effectively.
I gained experience in using WordPress and Elementor to build live websites. While the design principles are similar to Figma, I had to make specific adjustments to font sizes, images, and spacing to accurately replicate my original designs.
© 2024 by David Immanuela