NCKU Portfolio - a School-System Redesign

UIUX Designer

Project Overview

It is a redesigned website for the National Cheng Kung University (NCKU) students to arrange their experience during their college efficiently. The students can document various university experiences, organize personal abilities with tags, and thematically summarize their experiences for future reference.
Note: Our system was referenced by the current system used by NCKU

My Contributions

Designed the graphical user interface for the website, focusing on clarity and ease of use.
Worked closely with a UX researcher to define our target audience, design user flows and conduct usability tests.
Collaborated with the frontend engineer to ensure seamless UI integration and smooth functionality across the platform.

Role

UIUX Designer

Team

1 PM
1 UX Researcher
1 UIUX Designer
1 Frontend
1 Backend

TImeframe

2020/11-2021/06
8 months

Tools

Figma
Notion

Quick Result

The redesign of Experience Path page.

The redesign of Portfolio page.

Background

As fourth-year students at NCKU, we noticed that many of our friends and classmates were working on resumes for graduate school or job applications. A common challenge they face is organizing their experiences effectively.

Organizing my experiences usually takes a lot of time and I feel inefficient.
I wonder is there any way to help me with that.

While the existing school system, E-portfolio, is intended to help students manage and organize their academic and extracurricular experiences, it has limitations that prevent it from being fully effective. In this project, we aim to redesign the E-portfolio system to improve its usability, allowing students to prepare their portfolio or resume with the website.

The orginal UI of Experience Path page.

Preliminary Research

Before the redesign, we conducted comprehensive preliminary research to better understand user needs and identify existing issues with the platform.

1. Interviews and Persona

We interviewed 6 NCKU students to gather insights into their needs and expectations from the E-portfolio system. Based on these findings, we identified target users and created personas to represent their goals and pain points.

2. Information Structure

We listed the structure of the system to find out the importance functions of the system.

3. UX Problems in Original Pages

We examined the original website to analyze the user flow and pinpoint existing UX issues. This evaluation provided us with a clear understanding of how students interact with the system and where improvements are needed.

Key Findings → Next Step

Inconsistent UX in Experience Path (學習歷程) → Improve Structure and Usability: Design Feature 1
‍When students attempt to add experiences to the Experience Path, they encounter several UX issues, including misleading UX writing, inconsistent input across pages, and non-intuitive input fields. These problems disrupt the user journey. Therefore, we propose a complete redesign of the Experience Path, focusing on consistency, clarity, and user-friendly interactions.
Need for Efficient Organization → Tag-Based Experience Management: Design Feature 2
‍Our user research revealed that students need a more efficient way to organize and present their experiences. Existing tools are time-consuming and fail to meet these needs. To improve this, we will implement a tag system within each experience entry, allowing students to categorize and manage their experiences more easily using tags. This will make it faster and more efficient for students to organize their experiences.
Limited Portfolio Customization → Personalized Portfolio Design: Design Feature 3
‍The current platform automatically generates a portfolio based on all past experiences directly, but it doesn’t allow students to highlight their strengths or customize the presentation. Additionally, the exported portfolios lack visual appeal. To address this, we aim to design a portfolio feature that gives students more control over which experiences to showcase and provides tools for personal expression, enhancing both functionality and aesthetics.

User Flow and Wireframe

Edit the experience page

Edit a portfolio

Wireframe

Information Structure

Using card sorting techniques, we restructured the website’s information architecture to ensure better organization and navigation, aligning the structure with user expectations.

Design and Features

Design Feature 1. Documenting various university experiences

After restructuring the information architecture, we reduced the number of categories to help users more efficiently locate relevant sections for documenting their experiences. This change simplified the process and improved the user experience.

Design Feature 2. Using Tag for better organizing

Users can now add tags to their experiences, allowing for better organization and easy retrieval of related content. The tagging system also enables users to group similar experiences together for a more coherent organization.

Design Feature 3. Summarizing experiences for future reference

Users can generate customized portfolios based on their documented experiences. By using the tag filters, they can create specific portfolios tailored for different scenarios, such as job applications or academic reviews.

Conclusion and Learnings

Throughout the project, we not only developed a working prototype but also navigated the complexities of managing different stakeholders.

Team Communication
‍As the UIUX designer, I worked closely with both the UX research and the development team. My background in frontend and backend development allowed for smoother communication with developers, ensuring that design elements were feasible from a technical standpoint. Additionally, I collaborated with the UX research and PM to ensure that our design ideas were realistic and aligned with user needs, reducing time spent on impractical concepts.
Stakeholder Collaboration
Our redesign needed to balance the needs of NCKU students with the requirements of the school. We frequently reported our progress to the Center for Teaching and Learning Development (C.T.L.D.). While we collaborated with the Computer and Network Center to fetch student data, we encountered technical limitations and permission-related constraints. Managing these challenges and negotiating with various stakeholders was a critical part of the redesign process, ensuring that the final product met both user expectations and institutional requirements.