A browser mockup of a landing page.

qiexing education

Qiexing Education offers an migration-through-education program that teaches the GCE 'O' Level syllabus to Chinese students on a fast-track curriculum.

I designed and built their website in Mandarin to feature their educational services and include informative resources about migration to Singapore.

TIMELINE
Apr - May 2024
SOFTWARE
Webflow, Adobe Illustrator, Figma
STRATEGIES
Responsive Web Design, Website Development, Logo Redesign

SITEMAPPING

I created a content inventory by listing down required pages and information that needed to be included in the website. Thereafter, I drafted a simple sitemap to visualise its information architecture before embarking on designing wireframes.

A graphic depicting a sitemap.
SITEMAP OF QIEXING EDUCATION

WIREFRAMING & PROTOTYPING

Using an 8-point grid system, I wireframed the main pages of the website and experimented with some layouts on Figma. As this website serves as the contact point between our client and potential participants, I ensured that the contact form was easily accessible across the webpages. I also created an interactive prototype with actual copy in place of the placeholder text to conduct simple website navigation tests.

A graphic showcasing wireframes of the Qiexing Education website.
WIREFRAMES OF MAIN PAGES

WEBSITE BUILDING

To ensure consistency across the pages, I built a small style guide to refer to and use when I am creating the webpages. Once the structure of my website was approved, I began to build the pages on the Webflow Designer. I also integrated LottieFiles animation assets to enhance the look and feel of the landing page.

A colour guide.
A typography style guide.
STYLE GUIDE
A browser mockup of a landing page.
A screenshot of a browser page.
A screenshot of a browser page.
A screenshot of a browser page.
SCREENSHOTS OF WEBSITE BUILT IN STYLE GUIDELINES

RESPONSIVITY

To ensure that the website can be optimally viewed across various devices such as tablets and mobile phones, I adjusted layouts and font sizes to adapt to different screen sizes.

Two screenshots of a website on a mobile phone.
Two screenshots of a website on a mobile phone.
Two screenshots of a website on a mobile phone.
SCREENSHOTS OF THE LIVE WEBSITE ON A MOBILE PHONE

LOGO REDESIGN

Besides working on the website, I got to come up with fresh logo concepts for Qiexing Education. Considering its main service revolves around education and migration, I played around with shapes to bring the business model to life and create a memorable logo.

QIEXING EDUCATION LOGO CONCEPT

SEE OTHER PROJECTS