ALS Global Suppliers

Overview

In this project, I worked on creating a new website design for the ALS Global Suppliers, page templates, content strategy and visual guidelines.

Client: ALS Global offers Ship Supply services in ports of Peloponnisos, Greece. These services include the purchasing, consolidation and distribution of Provisions (fresh, frozen and dry provisions) – department specialized on Food supply to vessels – Cabin and Stationary Stores required by vessels. Fruits and vegetables and dairy products are daily purchased. Many special products are also available to satisfy crews from differing nationalities.

Role

Create Information Architecture so that people can easily find information. WordPress CMS used to manage back end content. Custom WordPress theme design. Responsive design for targeting multiple devices and dimensions.

Tools

- Adobe XD
- Adobe Photoshop

ALS Global Suppliers

ALS Global Suppliers offers Ship Supply services in ports of Greece. These services include the purchasing, consolidation, and distribution of Provision in addition to Technical Supply. In fact, this story is a case study of UX/UI design which I follow to design the website of the company, using WordPress.

The goal of the Website

This was the first step of the design process and I gathered some information about the company. I set the ball rolling by asked the client for a project summary. For this reason, I sent a simple questionnaire form which filled up all the important information about the client needs.

The first step in designing a successful web site is to gather information.

Crucial questions :

Below are some crucial questions which help me to meet the client’s requirements.

  • What is your business model?
  • What are your products or services?
  • Do you have any goals for this project?
  • Do you want any specific features on the site?
  • Who are your main competitors?
  • Who is coming to your website?

Planning

Using the information gathered from the previous step, I put together to clarify the plan for the web site.

After that, I make a meeting with the goal to finalize the goals and the scope of the website and get it down the document. With attention to details, in the meeting get down brief the client about everything that he had in mind about the vision of website. It is important for the client to realize the scope of his company.

Gathered Information

  • The services of company are purchasing, consolidation, and distribution of Provisions together with Technical Supply.
  • The features of the web site are the contact form, the ports which served and the products.
  • The main competitors are based in Greece.
  • Another key point are the incoming users which are entrepreneurs who want to see the services of the company

Points from the planning

  • About page: Describe the main goal of the company and on the other hand the team members.
  • In the page of service, archived the services of the company are included the basic products which included in gallery.
  • Delivered ports sorted by country While the ports under each country are nominally described.

Wireframing

To point out, I already had a detailed mindmap of the website so the next step was to work on the Information Architecture. I used some wireframes to outline the visual and typographic hierarchy on the user interface. In fact, this way helped me to a lot to plan the structure of pages.

als-global-suppliers-wireframing
ALS Global Suppliers Wireframing

Colors

The artboard below display the color palette which I used for the main version of ALS Global Suppliers. In fact, the #2d2c2b color is used for the typography. The #64B5F6 and #1B1E57 colors are used throughout the structure of the web site. The #FF9800 color is used for the call to actions such as buttons.

als_global_suppliers-style-guide-color@2x
The basic color palette of ALS Global Suppliers

Typography

For the purpose of emphasizing on typography, I used two types of fonts. A primary font for the headers and a secondary font for the body. For the headers, I used a serif font. The Noto Serif helped me to make the project more beautiful across the platforms. For the body, I used a sans serif font. Lato has an excellent legibility characteristic in its letterforms.

als_global_suppliers-style-guide-typography-style@2x-min
The Typography style for ALS Global Suppliers

Forms

Furthermore, the communication between the users and the client with it is an important cause for the ALS Global suppliers. For this reason, I used as a simple contact form in which the user can easily send the request. As a matter of fact, this form is on every page of the website.

Buttons

The buttons designed as well as to grab the user’s attention and helped drive them in a particular direction like the profile of the company, the ports which served and the contact form.

als_global_suppliers-style-guide-forms@2x
The Form style guide of ALS Global Suppliers

The Design of ALS Global Suppliers homepage

At the end of the case study of UX/UI design, I follow up the final mockup for the homepage in detail.

als_global_suppliers-homepage-vbaimas@2x