ALS Suppliers

Overview

ALS Global Suppliers offers ship supply services in the ports of Greece. These services include the purchasing, consolidation, and distribution of provision in addition to technical supply.

Role

Persona Development, User Interview, Information Architecture, Wireframing, Prototype, UI

Tools

Balsamiq Mockup, Adobe XD, Adobe Illustrator

The challenge

The challenge would be to build a web site, that the customer can read the gather services. On the other hand, to create an end-to-end experience that enhances and embodies the user's needs. In the end, to create perfect cooperation with the other members of the team and work closely together to deliver the web site.

Hight Level Goals

1. Design a responsive web site that allows customers to learn about the services, find the ports and request quotes.
2. Responsive design for targeting multiple screen sizes and resolutions.
3. Design the ports serve page to reduce email and phone communication.

ALS Suppliers

ALS Suppliers offers ship supply services in the ports of Greece and worldwide. In fact, this story is a case study of ALS suppliers is a UX/UI design process that I follow to design the website of the company.

Discovery

The first step of the process was to gather some information about the company and of course to meet better the client, so I made with him a stakeholder interview. I set the ball rolling by asked the client for a project summary. For this reason, I sent a simple questionnaire form that filled up all the important information about the client’s needs.

  • 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 web site?
  • Who are your main competitors?
  • Who will be coming to your web site?

Define

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 detail, in the meeting get down brief the client about everything that he had in mind about the vision of the website. It is important for the client to realize the scope of his company.

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.

The mid-Fidelity wireframes of ALS Suppliers
The wireframes of ALS Suppliers

Gathered Information

  • The services of the 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 services.
  • As a matter of fact, the main competitors are based in Greece.
  • Another key point is the incoming users who 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.
  • On the page of service, archived the services of the company are included the basic products included in the gallery.
  • Delivered ports sorted by country while the ports under each country are nominally described.

UI

After working into wireframes, I started with the visual design. The main scope here was to create the design system and the style guide. This helped me to apply it to the project.

The design system of ALS Suppliers.
The design system of ALS Suppliers

Colors

The artboard below displays the color palette which I used for the main version of ALS 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.

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.

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.

High Fidelity Prototypes

First I started the design for the mobile platform and then I scaled the experience up to other screen sizes. Below, there are the high fidelity prototypes of all the pages of ALS Suppliers UX/UI Case Study. Keep in mind that the services have the same layout, excerpt the images, and the content.

The High Fidelity Prototypes in mobile layout
The High Fidelity Prototypes for mobile first
The High Fidelity Prototypes in desktop layout
The High Fidelity Prototypes for desktop layout

Result and Impact

This particular project has been implemented in a few weeks. From this project, I learned that the discussions and the frequency meetings were key to the project’s success.

I worked closely with the client and on the other hand with the developer and I delivered the web site in the deadline. The website delivered with all the important resources, style guide, etc.