Project Overview

As the exclusive designer and curator of the public website for eMPF, I assumed a crucial role in creating an engaging and informative platform. The responsive website primarily aims to introduce the features of eMPF, serving as a centralized hub that advocates for the eMPF app, disseminates the latest news, addresses frequently asked questions, and offers access to all essential links. This endeavor underscores my dedication to user-centric design and the effective communication of vital information to a diverse audience.

Design Elements

Adhering to the eMPF brand, I used the orange color scheme and incorporated eMPF's design elements. Large margins and paddings were maintained to create more space, allowing users to scroll and read comfortably. A long stripe graphic was added to link different sections and guide the users' reading flow.

Landing Page

The home page of the website briefly introduces the eMPF platform, highlighting the benefits, main features, and latest news, while guiding users to download the app. A large orange banner was used to catch the users' attention and emphasize the importance of the banner.

Your Benefits

On this page, users can select different stakeholders and view their personas to understand their pain points and how eMPF can address them. By clicking on the stakeholder cards, the stories and screen mockups below change accordingly. This behavior is consistent in the mobile responsive version.

Tutorial

Users can select their roles to view corresponding tutorials. To make the tutorials clear, I suggested distributing them into various formats: video, text, text with photos, and document downloads. Since the project is controlled by a CMS, clients can select their preferred format or mix and match them.

About eMPF

This page provides a simple introduction to eMPF, featuring stories, key stakeholders, testimonials from the chairman, and a video introduction linked to YouTube. Different background colors were used to divide sections, making it easier for users to navigate.

FAQ, Latest News, Useful Tools, Contact Us

Given the numerous flows in the eMPF portal, the FAQ section uses tabs to filter different flows, and a search bar was added for easier question searching. For useful tools, external links were displayed using designed cards with graphics to make the page look more engaging.

Design Guidelines

Since the website is controlled by a CMS, clients can input and edit content themselves. To maintain design consistency, I created and distributed design guidelines for clients to follow.

Wireframe

After the project kickoff and initial requirements gathering, I brainstormed and sketched the content for each page. These sketches were presented to clients in meetings to ensure the content met their expectations. Following approval, the sketches were transformed into wireframes with appropriate padding, margins, photo positions, and mobile-responsive layouts. This process facilitated UI design and helped clients understand the screen content better, speeding up the alignment of ideas with clients.