Website Redesign — NLEC Education Center

Intro

Adapted from its official website, NLEC is a multinational company based in Japan that provides Japanese language learning programs for Indonesians. Currently, it is known that NLEC has opened 2 branches in Jakarta and Bandung plus opened an online learning services during pandemic time.

The company have growing numbers of students from year to year according to their site, therefore it is very important for NLEC to prepare digital presence to the public to boost their publicity or electability. One way to do this is by presenting a solid & professional first impression experience on a company landing page so that their service will generates trust and in turn people will become interested to join.

In this case study, I tried to analyze what ui/ux flaw appears on their landing page then offered a design solution that will expected to improve their first impression exprience.

Case Study Writing Structures

1. Research Scope

An explanation of the extent of the problem to be researched and what solutions to be developed.

2. Problem Identification

Description of existing application flow along with known flaws that related to user interface components

3. Problem Analysis

Problems that have been identified through the previous sub-section are then further reviewed through a set of research instruments using both qualitative and quantitative methods. However, due to limited resources, I use personal assumptions as the analysis procedure . Thus the research results are tends to be subjective.

4. Problem Solving

In this section I make a solution and created a hand off, in case I have created a mockup that is expected to solve the problem.

5. Conclusions and suggestions

Contains a collection of recommendations or developers talking about further website development.

Research Scope

This study aims to redesign overall interface in order to obtain a website that has professional and trustworthy values through various layout configuration, colors, illustrations and various other basic components.

Problem Identification

1. Hero Image

In this hero image section, the website presents pictures that fill the screen, presented in carrousel layout accompanied along by tabs and floating buttons that serve as shortcuts for contact us. Here are the flaws:

1. With a carrousel hero image layout like this, it will be quite a burden for website viewers because they have to load up images which are usually high resolution. The result will affect the loading speed. Unfortunately the placement of this carrousel is also not accompanied by a clear emphasis on the context of the information that they want to highlight so that this section looks like meaningless even though it actually has the most crucial function because it has an impact on the viewer’s first impression of the company directly so that the section this requires further improvement.
2. The menu bar does not look very clear because it is biased by the background image behind it. The viewer will find it difficult to navigate the website
3. Just like previous flaws, the floating button and the company logo in front looks hidden beyond background image because the background image has large amount of contrast so it will be hard to navigate these buttons.

2. Section #1: Apa itu NLEC

This section describes how the company was formed. Ideally company must describe the company’s mission clearly as short as possible. However, in this case they describe it too long and forming a wall of text because it occupies the screen without any elements nor spacing other than text. Of course it will make visitor simply skip reading this section. Usually the website visitor will read the page with scanning or quick reading techniques and will pass through complex detailed information such as this.

3. Section #2: Features Section

This section has 3 sub sections and all of them have very closed space. Also the colors both on “lingkup kami” and “mengapa NLEC” section is not well aligned with the very saturated background color that will reduce readability factor. Accompanied icons should also be re-optimized so they will not feel like separated from other elements.

4. Section #3: Video Section

There are no context among embeded videos. Both of them even does not have any content segmentation make it difficult to be scanned and doesn’t attract web viewers to watch it. There needs to be a reorganization so that the video can further accentuate the context. In later hi-fi previews, i will embed it on “Apa itu NLEC” section.

5. Section #4: Footer Section

This section also inherit problems like the previous features section, such as lack of spacing both within elements and each sub-section make them doesn’t look neatly.

Problem Analysis

When this case study was made, I experienced limited resources that did not allow me to carry out qualitative and quantitative research procedures, so I used personal assumptions. Thus the research results are susceptible to subjectivity.

Problem Solving

Total reconstruction is done by augmenting some illustrations, icons, colors, without changing the default copywrite and company logo. This optimization leads to improve both user exprience and aesthetic factors. The following are the changes made:

1. Hero Image

1. Carrousel has changed into a static image by intention of reducing workload size on the user and changing it to an illustration photo that looks more clean and classy. Then i adding a pair of appropriate text with call to action in order to make emphasis on context of the message.
2. Reorganizing the sub-section of our clients which was placed at the bottom of the page, now the hero section have better impact.
3. Predominantly white background color makes the logo, menu bar, and the elements below it more visible and doesn’t overlap with the rest elements.

2. Section #1: Apa itu NLEC

Instead using a wall of text layout, I decide to break down content based on its context so that it is more readable to viewers and easier to understand. I also add video content supplement which was on video section located at the bottom of the page so that the video content gets better context and better exposure.

3. Section #2: Features Sections

In this section, I did tons of explorations to maximize the use of white space and its layout along with adding various illustrations that were made to highlight the context of the content. Resulting in a more readable and lively interface .

4. Section #3: Video Section

This sub section have removed and has moved to section # 1: What is NLEC.

5. Section #4: Footer Section

Same as before, I tweaked the elements a lot in this section to optimize white space and produce a cleaner, more vibrant layout with added interactions. Some of the content such as contact numbers and e-mails have been moved to footer in order for better placement.

Conclusions

From my observation above leads that the developer still needs to pay more attention to the application interface factor which I feel still does not really highlight the professional impression which is a crucial factor in how a company is viewed, especially NLEC which is a growing education institution and requires sufficient exposure so it can bring more trust by it’s aspiring students.

Besides that, I realize that this research still needs to be developed more extensively by re-exploring the interface design which will make it more intuitive and attractive and conducted with further procedures such as usability tests . Thus, I recommend future designers and developers to consider the proposed design solutions as a reference for further website design development.