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 companyHight 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, mazeMethodologies
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.

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.
The Basic Analysis of Competitor’s helped me to learn more about the market, product, and goals better.
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.

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.

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.

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.

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.

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.

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

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 :
- To begin with, observe and test the level of the navigation through the website.
- Collect feedback from users on ease of browsing, reading the content of services, in addition to finding a specific port.
- In the meantime, test if the content help builds enough trust for the user.
- Identify how long it takes users to complete assigned tasks.
I had five users conduct three different tasks :
- You want to read the services and the delivered products in detail. Please take action to contact the company as much as you can.
- 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.
- 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.

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.

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

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

Desktop

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.