Enhance navigation for the Youth Development Administration

In 2020, I interned at the Public Digital Innovaiton Space (PDIS) and collaboraed with the Youth Development Administration (YDA) to redesign its websit to increase users' understanding of the website and engagement.

Result
Improved information architecture and navigation. Decreased the search time for 65% and increased SUS score from 33 to 75.
My Contribution
  • Generated user research plans; conducted research with surveys and interviews.
  • Built wireframes for the "project category" and "project detail" page with Adobe XD and iterated from feedback.
  • Conducted heuristics evaluation and usability tests.
Result
Improved information architecture and navigation. Decreased the search time for 65%, and increased SUS score from 33 to 75.
Duration
Jul. - Aug. 2020
Feb. - Jun. 2021
Skill
Interview, Survey, Card Sorting, Heuristic Evaluation
Tool
Adobe XD, Photoshop
Team
1 PM, 2 UX Designers, 1 UX Researcher

Client's need

The Youth Development Administration (YDA) is a department under the Ministry of Education in Taiwan. YDA offers many activities and subsidies for young talents. Our client, who was in charge of the long-term strategy for the organization, brought us a simple request:

Chief secretary of YDA

"We want to increase young people's interests in the services offered by YDA."

Finding opportunities

The goal appeared to be straightforward. However, when we applied the 5A marketing framework as our first step, we quickly realized that since we could only make changes in certain part of the user journey, there were numerous aspects beyond the scope of this project.

In summary, our project was confined by these two problems:

01 "Boost Interest" without altering the current marketing approach

Most users discovered YDA's projects through social media and referrals, yet this was beyond our reach.

02 No previous user study, nor Google Analytics.

YDA didn't have much channel to know the user, meaning we had to build our user research plan from scratch.

Since we could only touch on the website, we figured to focus on providing straitforward and necessary information, thus when users land the page, they'd naturally know their goals -- to sign up for resources that match their needs.

Hence, our goals for this project were:

01 How might we help user to find the projects that fit their needs?

We wanted to ensure that users could effortlessly identify projects that resonate with them, and take action to sign up for projects. So our first goal was to optimize the relevance and standardize the information.

02 How might we encourage exploration on YDA's website?

Additionally, since we couldn't control how users initially land on the website, we'd also like to enhance their experience after they arrived by encouraging users to explore the site.

Design Process

In summer 2020, we ran through an end-to-end process from research, design to usability testing and handed in a redesign proposal.

The proposal was later approved by the Director General of YDA, and implemented by a web development agency. In this phase, we joined the team as external consultants and cooperated with the agency on the evaluating and testing of the website.

User Research

Contextual Inquiry

To better understand how young users search for resources and make plans for projects and events, we asked the interviewees to demonstrate their typical use of their Facebook feeds, planners, and calendars. After the observation sessions, we then conducted a short interview to further understand their motivations, problems, and goals.

Card sorting

From our preliminary examination of YDA's website, we noticed that the information structure in navigation was a significant issue. As shown in the video, even for options on the same level, their subcategories were different, which made it difficult to find information.

During interviews, we wrote each category on pieces of cards and asked the interviewees to sort and label them into groups. This way, we could collect users' opinions on what the information architecture should be like.

Usability testing

Lastly, we created some tasks and invited the users to complete them on YDA's existing website to identify problems throughout the exploration and registration process.

Research Outcomes

01 It's hard for user to find things they want

The two navigation systems in the website are confusing, and the information on the home page is not up-to-date.

02 Some people like to plan their schedule ahead

Students typically plan their summer and winter vacations during the middle of the semester, and student groups also require advance planning. Therefore, it would be beneficial for them to have access to projects and events in chronological order.

03 Services offered by the government are attractive, but the website should avoid propaganda

People trust those projects because they believe in the government's reliability and the cost of joining projects is usually low. Yet, they often view government-provided information as propaganda, leading them to ignore things on the website.

04 There was no guideline for content on the website

The YDA's website was actually managed by representatives from different teams inside YDA. Without a guideline, the imformation on the website thus became disorganized and came with many forms.

05 The website lacks organization and call-to-action

Information architecture is confusing, even when users find the activities they are interested in, they can't find ways to register.

Concept

New user journey to support two types of user

We consolidated the research findings and developed two personas. Subsequently, we designed new user journeys that address the challenges faced by these two types of users.

New Comer

This kind of users haven’t used the website before. They heard that YDA offers many resources from friends but are’t sure what to expect. Their first impression after entering the website hence became crucial. We wanted to ensure that they knew there were many interesting resources to explore.

The Planner

Exploration for new comer; Timeline for planner

For new comer, we focused on helping them understand what YDA had to offer. We've also improved navigation and added a banner to the home page to encourage exploration throughout the website.

For people who like to plan ahead, in addition to displaying project durations on the thumbnails in the Project Category Page, we introduced a Timeline Page. This allowed users to explore projects throughout the year.

Design

In the new design, we addressed the issues we identified in the user study, which included: information hierarchy issues, propaganda tone, lack of content guidelines, and absence of call to actions. Lastly, we also added a new timeline page to allow users to view events and opportunities chronologically.

Home page

Before
  • Propaganda-style news content led to an immediate loss of user interest.
  • Event information was not updated regularly.
  • Three categories of resources, which users cared the most, were at the bottom.
After
  • Put latest news and popular opportunities in the banner to draw users' attention.
  • Established guidelines for content creation and news updating.
  • Provided information of resources, such as event, subsidie and workshop at the very top. Moved infrequently used links to the buttom.

Project Category

Before
  • There was no project category page, and users couldn't find project-related information in the navigation bar.
After
  • Based on card sorting results, we categorized all the projects, and put a menu at the top of the project category page.
  • Displayed each project as card, with thumbnail that showed the necessary information for easy comparison.
  • Quick access to external project sites.

Project Detail

Before
  • The lengthy text on this page not only overwhelmed users but also failed to provide the necessary information.
  • The link only directed users to download a PDF file, and there was no clear way to sign up for the project.
After
  • Put brief introduction of the project and CTA in the banner.
  • Emphasied the CTA button once again.
  • Addressed information hierarchy to ensure quick access to essential information.
  • Provided comments from previous participants and frequently asked questions as per user research feedback.

Timeline

Before
  • Users couldn't view projects in chronological order. If they clicked on the options from the menu on the side, there'd only be an empty page.
1st Iteration
  • In the first iteration, we had a timeline on the page that showed project dates. Users could navigate along the timeline by scrolling or clicking the months.
2nd Iteration
  • Consequently, in the second iteration we put the months into menu and moved them to the top.
  • We also change the card display into grid and labeled the time to be the actual time of the events.
Final Iteration
  • Added a dropdown menu with event times, enabling users to filter out unnecessary information.
  • Stacked thumbnails and incorporated tags to facilitate quick searches at a glance.

Developing

After proposing our new design, our client decided to invite a web development agency to implement it. During this stage, we collaborated with the agency to refine both the navigation system and visual elements. Following two rounds of usability testing and iteration, the new official site was launched in 2021.

Eventhough the process involved a lots of compromises, when we did the final round of usability tests, we still obtained great improvement.

Information seeking time ↓

65%

SUS score

33 → 75