ALS Global Suppliers

Overview

ALS Global Suppliers offers ship supply services in the ports of Greece. These services include the provision and technical supply.

Role

Interview, Conducting competitive research, Persona Development, Information Architecture, Wireframing, High-fidelity design, and guidelines.

Tools

Balsamiq Mockup, Adobe XD, Adobe Illustrator

The challenge

Design a website, that the visitor can read the gather services. O. On the other hand, to create an end-to-end experience that enhances and embodies the user's needs.

Hight Level Goals

1. How the visitors can navigate from their devices and find the gather information for the services, serving the ports?
2. How can we encourage them to request a quote?
3. Finally, how can we provide the services of the company and generate business needs?

ALS Global 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 was to gather some information about the company and of course to meet the client, so I made with him an interview. I set the ball rolling by asked the client for a project summary. Τhe interview met with the client’s needs.

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

Explore

Building personas helped me to understaning of who are the users. On the other hand I was deep understand the customer behaviour, needs and he made me to had a greater empathy with him.

Next, I made competitor research that helped me to know what’s exactly was out there and show me the strengths and weaknesses of the competitors. This method helped me to understand where this service stand in the market

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 the website.

To point out, I already had a detailed mindmap of the website so the next step was to work on the Information Architecture. Then 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 and they want to be informed about 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.
  • The service page, in addition to the important information, also includes the basic products.
  • 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
high fidelity prototype of als supplies

Result and Impact

This 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 guides, etc.