ALS Global Suppliers

ALS Global Suppliers

Overview

ALS Global Suppliers offers ship supply services in the ports of Greece. The company offers services like provision and technical supply 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 followed to design the website of the company

Hight Level Goals

1. Stakeholder interview. I met the stakeholder needs.
2. Research the main competitors to get valuable feedback.
3. Testing the usability of the main user flow.
4. Collaboration with the developer to deliver the final high fidelity prototype.

Challenge

- How I can help the user to navigate through the website and learn more about the services?
- How I can encourage the user to find the served ports?
- Create an end-to-end experience that enhances and embodies the user’s needs.

Roles

UX research, UX Design, UI Design. A team of 3 (1 Product Manager, 1 Developer)

Tools

Balsamiq mockup, Invision, Adobe Illustrator, Adobe XD, maze

Methodologies

Stakeholder interview, conducting competitive research, persona development, information architecture, wireframing, lo-fid/high-fid prototype, usability testing, design guidelines.

ALS Suppliers offers ship supply services in the ports of Greece and Worldwide. In fact, this UX design case study explores the way in which ALS Global Suppliers meet the overall UX and business goals.

Research

Stakeholder Interview

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. Some main questions.

  • Could you give me an overview/history of your business?
  • What do you currently offer?
  • Please, can you explain to me what is your overall goal to create this website?
  • What specific business goals are you hoping to accomplish through the website?
  • Do you want to include any specific features?
  • What are your main competitors? Why do you believe that this?

I get a lot of useful information about the business model, what are the specific products, the services, and what are the business goals.

The pain points from the interview were to know if we wanted to include a multi-language website. Finally, we decided to use it as the primary, English language. Another point was to find an easy way to include the available served ports.

My Notes In The Interview With Stakeholders
My Notes In The Interview With Stakeholders

Competitive Research and Analysis

The competitive research helped me to know what’s out there. I explored the main features and information on the competitor’s website in order to know the scope of the design and the pain problem. In detail, I found many disadvantages to its competitors. Doing solid investigative market research helped me a lot in building the right way of this website. Based on the ethnographic of the client, the main competitors are from Greece. The competitors had some issues with typography, layout, usability, and accessibility. In fact, they do not have any specific features that will make them competitive about the services and the features that they offer.

I looked at them from a customer’s point of view and on the other hand, I looked at them from their point of view. The marketing competitors’ analysis gave me the opportunity to see in action their major strengths and flaws.

The Main Competitors
The Main Competitors

Heuristic Evaluation

Then, I used the Heuristic Evaluation method. In the center of this helped me to analyze the efficiency and usability of the competitors. During this process, the tasks evaluated based on Nielsen Norman Group, The 10 Usability Heuristics for User Interface Design.

Define

Establishing Key Audiences

With attention to learn more about the audience, I use this particular method which me to think about the audience segments. In this case, we have three different types of audience. In short, non-customers, collaborators, and entrepreneurs.

Establishing Key Audiences
Establishing Key Audiences

User Persona

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

The Persona Development
The Persona Development

Ideate

User Scenarios

With this intention, I used the scenarios to determined the most important points to focus on during the process. This process helped me to figure out the steps of the process that would require in addition to helping the users to find their scope. In fact, helped me to find the main motivations and needs of the users.

User Scenarios
User Scenarios

Sitemap

In view of the sitemap describes the different content places on the site and the relationship between them. By all means, the scopes right here was to define the taxonomy through the grouping of related content.

Sitemap
Sitemap

Sketching

Ι took pen as well as paper and I started sketching the wireframe informed by the scenarios and sitemap. To put it differently, the low-fidelity sketches created to explore potential design ideas from all the pages of the website.

Sketching
Sketching

Wireframes

I created wireframes as a way to explore layouts and begin establishing as well as a rhythm and visual hierarchy.

Mid Fidelity Wireframes For Desktop Layout
Mid Fidelity Wireframes For Desktop Layout

Prototyping

The prototyping used to test prior to launch and on the other hand, helped me to understand how the users can use the website. View the Invision Prototype

Testing

Testing Plan

The main goals :

  1. To begin with, observe and test the level of the navigation through the website.
  2. Collect feedback from users on ease of browsing, reading the content of services, in addition to finding a specific port.
  3. In the meantime, test if the content help builds enough trust for the user.
  4. Identify how long it takes users to complete assigned tasks.

I had five users conduct three different tasks :

  1. You want to read the services and the delivered products in detail. Please take action to contact the company as much as you can.
  2. You read the services, however, you have some questions in your mind. In the first place, please choose the path to find if the shipping containers require any sort of maintenance.
  3. You are on the page of the ports that the company serves. Take the action to find a specific port. In this case, you want to find the Buenos Aeries. 

Testing Findings

Overall, the website behaved as users expected, but revealed were some opportunities to improve the clarity of tasks and the functionality of the prototype. 

Completion rate:  All the participants were able to complete the tasks as much as 85%.

Error-free rate: 70-75%. Although all the participants were able to complete the tasks, some of them had small hiccups in one of the tasks.

Testing the search option

Key Findings

After all, i used the affinity map to analyze and focus on the patterns, the wins, the pain points, and the next of the five participants that conducted the usability testings.

Key Findings
Key Findings

Iterate

Based on the suggestions of the usability testing, I gather all the feedback of the users, and then I created the new layout of the ports page. You can View the prototype

UI

Style Guide

The Style Guide
The Style Guide

In the first place, the visual style guides helped the developer to define the way the brand will look and keep corporate graphics consistent and uniform across materials.

Mobile

High Fidelity For Mobile Layout
High Fidelity For Mobile Layout

Desktop

High Fidelity For Desktop Layout
High Fidelity For Desktop Layout

Outcome

To begin with, it was important that I measured the timeline between the tasks and the work process. I understood the client’s needs, so I delivered the user’s needs into business in an efficient way. 

I worked closely with the client and the developer, in time to deliver the project within the deadline. In fact, frequent meetings and updates were the keys to the project’s success.