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.

Timeframe

7 weeks

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.

Empathy

Phase Deliverables:

  • Semi-Structured Interview
  • Competitive Research & Analysis
  • SWOT Analysis

Stakeholder Interview

The first step was to find a way to completely understand the client. I decided to conduct a one-on-one conversation. This provided to me insights that would otherwise be difficult – even impossible – to obtain. These insights guided the flow of the entire project, such as technical constraints, business goals, and more. 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?
  • Why are we building this project?
  • 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?
  • What user need to led to this?
  • Do you want to include any specific features?
  • Are there any competitive examples of what we’re building that we should take a look at?

I gathered useful insights from the interview and then I moved on to examined them collectively. I learned the business model, what exactly are the specific products, services, and what exactly are the overall 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.

vbaimas-als-interview-ux-ui-design-study
Personal notes from the stakeholder interview

Competitive Research & Analysis

When I finished the stakeholder interview I conducted the competitive research. This method 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(s). In detail, I found many disadvantages to its competitors.

On the other hand, by done 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

SWOT Analysis

In this case, the client knew what exactly their users want and most of all, what exactly they need. From my point of view, I did my homework on the application of what exactly the business does and on the other hand, what will do to make more. I wanted to help the client, so I decided to run a workshop to further understand the distractions and the business targets, for this short engagement.

The swot analysis

Define

Phase Deliverables:

  • Estsablish Target Audience
  • Persona Development
  • Empathy Mapping
  • Point Of View (POV)

Establishing Target Audience

With attention to knowing more about the target group, I use this method to think about the group segments. In this case, we have three different types of audiences. In short, non-customers, collaborators, and entrepreneurs. This type of target audience is a specific group of people and customers seeking to meet the needs that the product needs. The company provides a certain series of services that can solve a specific problem of people.

User Persona

Based on my research, I created a persona, Peter. Building personas helped me to understand who are the users. On the other hand, I deeply understood the customer’s behavior, needs and he made me to had a greater empathy with him.

The Persona Development

Empathy Map

I created an empathy map made up of observations and statements from the research. This helped me to understand and at the same timing to prioritize user needs. The map of four quadrants reflects four common key aspects of the behavior users demonstrate. I started with the more objective quadrants, “Says” and “Does”, then I moved on to the determination of “Think” and “Feel”.

Empathy Map

Point Of View (POV)

The Point Of View helped me to captured the users’ exact profiles. I synthesized research results and on the other hand form solid foundations. So, through this process, I discovered what those people-specific users really desire and require and therefore ideate effectively.

the point of view

Ideate

Phase Deliverables:

  • User Scenarios
  • Sitemap

User Scenarios

With this intention, I used the scenarios to determine 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

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 were to define the taxonomy through the grouping of related content.

the main sitemap of als suppliers
Sitemap

Prototyping

Phase Deliverables:

  • Medium Fedelity Prototying

The prototyping was used to test prior to launch. On the other hand, helped me to understand how the users can use the website. View the Figma Prototype

Medium Fidelity Prototyping

I created a medium-fidelity prototype to supports the interactivity and as a way to explore layouts and begin establishing as well as a rhythm and visual hierarchy. This prototype gave an overall approach to the stakeholder of how the product will look and behave. Also, it gave the ability to make any kind of changes since the product is under development.

Mid Fidelity Wireframes For Desktop Layout

Testing

Phase Deliverables

  • Remote Unmoderated Usability Testing
  • Findings
  • Remote Moderated Remote Usability Testing

Remote Unmoderated Usability Testing

I started testing the project using remote unmoderated usability testing. The sprint cared out of 5 users, with age range 30 – 50 (both for men and women).

Define the goals

  • Observe and test the level of the navigation through the website.
  • Collecting feedback from users on ease of browsing, reading the content of services, in addition, to choose a port.
  • See in action if the content help builds enough trust for the user.
  • Identify how long it takes users to complete assigned tasks.
  • Enable me to validate design decisions and find the most common usability issues.

Some tasks

  • You want to read the services and the delivered products in detail. Please take action to contact with the company as much as you can.
  • You read the services, however, you have some questions in your mind. Please, choose the path to find if the shipping containers require any sort of maintenance.
  • You read what exactly the company offers. Please, take the action to find of that will be happened if you gave the wrong shipping address.
  • 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. 

Findings

This helped me to see in action how satisfied (or not satisfied) were the users with the interface and the operability of the specific product. Overall, the website behaved as the testers expected, but revealed were some opportunities to improve the clarity of tasks and the functionality of the prototype. The opened and the closed questions gave the ability to measure how exactly the testers were feeling when they completed a specific task.

Objective metrics.
All the testers completed the given tasks. I saw in action that the testers spent more time (time on task) – rather than I really expected – to complete some tasks. This insight gave the probability that the users can’t find what they’re looking for or I was thinking that they’re lost trying to complete the task that they were given.

I found that the users made some errors. I measured these errors by tracking the misclick rate and analyzing the heatmaps of the prototyping screens

Testing the search option in the FAQ section.

Usability Testing Round 2

Remote Moderated Usability Testing

I decided to move on this process to observing users understand how exactly they experience the product and on the other hand why they performed certain actions. The “thinking aloud” helped me to put the voice of the user inside the design. I asked for them to use the website while continuously verbalizing their thoughts as they moved through the user interface of the website.

The first approach of the remote moderated usability testing

Ideate

Phase Deliverables:

  • Findings
  • Remote Moderated Usability Testing

Findings

The affinity maps helped me to gather the observations, the errors, and the positive/negative quotes, in hand. Overall, The participants found the overall experience as a good point of view and I received positive feedback. On the other hand, I focused a lot on negative quotes/errors and I analyzed them. The primary scope was to create a product more closely to user needs. I created a more detailed spreadsheet to gather this feedback and evaluate the findings.

the first approach of findings
The approach findings of the first participant.
the fifth approach of findings
The approach findings of the fifth participant.

I used Jakob Nielsen’s four-step rating scale. The primary scope was to go ahead with this system and I allocated this method to fix the most serious usability problems. As a result

Top 5 errors and usability problems

  1. The participant spent time more than expected to find a specific port.
  2. Make the navigation controls more accessible.
  3. The user expected to close the accordion menu, when clicked outside the item.
  4. The arrows of carousel had low discoverability.
  5. The fields of the forms have low-contrast level between the foreground and background color.

Testing

Moderated Remote Usability Testing : Round 3

Phase Deliverables:

  • Remote Moderated Usability Testing
  • Overal Feedback.

I decided to conduct another session of usability testing with 5 users. These users were asked to complete the same tasks. In the second approach of usability testing, I delivered high-quality findings.

  • The users found that they can easily navigate throught the fields of the forms. The color contrast helped them to increase the legibility.
  • They found the arrows of the carousel accessible.
  • They found a good option to browse throught the search bar, a specific port (in our case was the Buenos Aries).
The second approach of the remove moderated usability testing
The second approach of the remove moderated usability testing

Before

The first approach of the field
The first approach of the field

After

The second approach of the field
The second approach of the field

Before

The first approach of the port page
The first approach of the port page

After

The second approach of the port page
The second approach of the port page. In addition, I included the search bar

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 desktop Figma prototype and the mobile Figma prototype.

I put myself in the user’s shoes and I designed some micro-interactions. My overall thoughts were to improve the website navigation and make it easier for the users to interact with the website.

The main purpose was to delight the user and on the other hand to create an engaging moment and make the user experience much more rewarding..

In my example, these micro-interactions improve the website navigation while at the same time make it easier for the users to interact with the website.

Micro-interactions in mobile view
Micro-interactions in mobile view

Learnings

I strongly believe that organizing and structuring design principles is just important as creating them in the first place. This case study helped me to completely understand how exactly the companies generate business value by implementing user-friendly user interface design and a user experience, closely to user needs.

It was important that I measured the timeline between the tasks and the work process. I believe that if you can understand the client’s needs, then you can deliver the user’s needs into business in an efficient way. 

I believe that if you care about your users – put yourself in their shoes – to understand “what exactly they need” and on the other hand “what exactly they do” when using the product, then you are close to creating a successful product for both, users and business.