Sayuri.M

(en)

Target

Individuals considering enrolling in WSS. Business partners and related organizations.

Challenges

The current website did not clearly communicate that the company contributes to the development of future professionals or that it operates a vocational training school. The design was outdated and lacked visual elements.

Objectives

Clearly convey that the company operates a vocational training school. Refresh the site with a modern, trend-conscious design without compromising corporate credibility.

Concept

THE NEXT STEP TO YOU.

Information Architecture

Assuming the primary users are those considering WSS, I placed a large, impactful catchphrase in the hero section to establish trust and clarity from the first view. Together with the accompanying text, the structure effectively communicates the company’s values. While maintaining the reliability expected of a corporate website, I focused on crafting copy and content flow that would make visitors feel a subtle sense of trust—something that often determines whether users decide to apply or not.

Design

The site uses the corporate color palette of Next One’s headquarters. Fluid shapes and gradients are incorporated throughout the layout to represent the company’s commitment to nurturing future professionals and the growth of its students as they face challenges and move forward. In the hero section, a gradient flows from the lower left to the upper right, symbolizing a bright path toward the future. The headline and first two lines of text are intentionally kept within the first viewport, with a line break at the start of the text to encourage users to scroll further. To enhance clarity, I also utilized visual aids such as lists and tables, which were absent in the previous site.

Key Points

1. Trend-Inspired Design
The old website had a static, plain layout with no animations. In the renewal, I used bold typography in the hero section and combined it with dynamic fluid shapes and gradients. The typography plays a crucial role in reinforcing the message that the company is dedicated to developing future talent.

2. Seamless Navigation to WSS
Given the substantial content related to WSS, I included direct links to the official WSS website in the header and various sections to ensure users can easily access more information. Whether they are business partners or prospective students, all visitors can quickly find what they are looking for. Photos were also added to the "WSS" and "Company" sections to help users instantly understand the content. In particular, the WSS section features an image of a smiling woman pointing at a computer screen, allowing visitors to imagine the actual learning environment and fostering a sense of friendliness and security.

Prouction Time

Planning / Information Architecture / Wireframes

2 days

Design

3 days

Responsive Design

Not supported (Designed for 1920x1080)

Tools Used

Figma, Photoshop