UX/UI Design,
Front-end Development

Learning Across Borders (LAB)

January 2019

Learning Across Borders (LAB) is an educational nonprofit with a program focused on students and educators from various countries in the Asia-Pacific region. The project was to re-design their website and make it more functional, easy to navigate and keep it brand-compliant. In addition, the client wanted to integrate a part with media including videos, a map showing the partner schools as well as links to social networks.

The challenge: redesign the site by making it functional and easy to navigate

 

Since most of the site’s users are students and educators from ASEAN and Asian schools, the first approach was to design a single page website (a scrolling page) so that the user can have a global vision and a quick idea of what is and what LAB offers. In addition, the information presented is relatively few, the navigation between sections of the site scrolling up and down the page seemed to be the best.

The integration of new elements to the site such as videos, an interactive map, links to social networks … allowed me to structure the page in separate sections giving a clear readability of the site to the user.

Old website

New website fully redesigned

Design the site keeping the identity of the brand

 

After having collected the contents of the client (logo, images …), I presented different tests of fonts to use for the website. My choices were based on the existing logo font and the guidebook presented on the site. I wanted to keep a homogeneity between the texts present in the site. We agreed with the client on the best combination of fonts to implement.

For the colors, I also took those of the logo that are the identity of the brand. The green of the logo being visually aggressive and not wishing to have a basic white background and bland, I proposed a pale variant of this green color for the background to bring out the texts and images.

Finally, because the main purpose of the site is to allow students and educators to enroll in the organization’s program, I have designed the registration buttons by placing them in various, visually accessible locations (top of the page , next to the contact form …) and contrasting the color (orange versus green) for optimal effect.

Tests on different pairs of fonts

Color scheme

Navigation menu with constrasted Call-to-Action button

Footer with links to social media

Tests on different pairs of fonts

Color scheme

Navigation menu with constrasted Call-to-Action button

Footer with links to social media

Improvements to the website

 

One element that seems to me to be essential and that was missing in the previous site was the presence of a contact form. It is indeed important to allow the user to contact the organization in case of specific questions or requests.

Drawing the first sketches and now having a good idea of the website to create, I used Adobe XD to present and validate the designs with the client.

During the development of the site that I realized with WordPress, I also implemented several codes and data to improve the ranking of the website in the search engines and allow a better visibility of the website on the Web.

Contact form

Google search appearance

CONTACT ME

Phone  +66 81 817 2562

21 Sukhumvit Rd, Khwaeng Khlong Toei Nuea, Khet Watthana, Krung Thep Maha Nakhon 10110, Thailand
(visit by appointment only)



 
 

 

21 Sukhumvit Rd, Khwaeng Khlong Toei Nuea, Khet Watthana, Krung Thep Maha Nakhon 10110, Thailand
(visit by appointment only)