ALS Global Suppliers offers Ship Supply services in ports of Greece. These services include the purchasing, consolidation, and distribution of Provision in addition to Technical Supply. In fact, this story is a case study of UX/UI design which I follow to design the website of the company, using WordPress.
The goal of the Website
This was the first step of the design process and I gathered some information about the company. I set the ball rolling by asked the client for a project summary. For this reason, I sent a simple questionnaire form which filled up all the important information about the client needs.
The first step in designing a successful web site is to gather information.
Crucial questions :
Below are some crucial questions which help me to meet the client’s requirements.
- 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 site?
- Who are your main competitors?
- Who is coming to your website?
Planning
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 details, in the meeting get down brief the client about everything that he had in mind about the vision of
Gathered Information
- The services of 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 products.
- The main competitors are based in Greece.
- Another key point are the incoming users which 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.
- In the page of service, archived the services of the company are included the basic products which included in gallery.
- Delivered ports sorted by country While the ports under each country are nominally described.
Wireframing
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.
Colors
The artboard below display the color palette which I used for the main version of ALS Global 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.
The Design of ALS Global Suppliers homepage
At the end of the case study of UX/UI design, I follow up the final mockup for the homepage in detail.
