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:
"I want to increase young people's interests in the services offered by YDA."
Finding design opportunities
The goal appeared to be straightforward. However, after applying the 5A marketing framework, I quickly realized that since the team could only make changes in certain part of the user journey, there were numerous aspects beyond the scope of this project.
Since we couldn't change anything on the marketing side, we figured out we needed to learn more about what challenges the user faced after they landed the website. Before we stared conducting user research, we quickly mapped out the constraints we faced...
Constraints
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.
03 The website was more of a "web portal"
Due to the organizational structure, users will need to sign up for events on external sites, and YDA's website will primarily serve as a portal.
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. Even for options on the same level, their subcategories were different, which made it difficult to find information.
To understand users' mental models, we wrote each category on individual cards and asked the interviewees to sort them into groups.
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 was hard for user to find things they want
The two navigation systems in the website were confusing. The more used one wouldn't even show up until user left the home page. Plus, the information on the home page was not up-to-date and looked like propaganda.
02 Students follow the semester calendar
Students typically plan their summer and winter vacations during the middle of the semester. However, 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.
03 There was no guideline for content on the website
The YDA's website was actually managed by different teams inside YDA. Without a guideline, the imformation on the website thus became disorganized and came with many forms.
04 Call-to-action was unclear
Even when users found the projects they were interested in, they would see only a document download section at the bottom and couldn't find ways to register.
Project goals
With the research, we gained a clearer understanding of what we needed to focus on for the redesign project. As a result, we developed two "How Might We" questions that helped the team stay on the right track.
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.
Ideation
New user journey to support two types of user
We also consolidated the findings and developed two personas. Subsequently, we designed new user flow 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
These users typically have a clear idea of what they want. Therefore, our responsibility is to provide them with clear, easily understandable information and a seamless experience for project sign-ups.
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. Lastly, we also added a new timeline page to allow users to view events and opportunities chronologically.
Home page
Before
- Propaganda-style content
- Information was not updated regularly
- Resource categories were at the bottom
After
Information hierarchy
Put latest news and popular events in the banner to draw users' attention. Provided information of resources, such as event, subsidie and workshop at the very top. Moved utility links to the buttom.
Timely update
Established a news updating pipeline in the backend to ensure the information in the home page is up-to-date.
Project Category
Before
- No project tab in the navigation bar
- Two navigation bars, with the secondary one often hidden
After
New navigation based on card sorting
Based on card sorting results, we organized all the projects, and put a menu at the top of the project category page.
Easy scanning & comparison
Displayed each project in a card, with thumbnail that showed the necessary information for easy comparison.
Quick access
Provided quick access to external sites for signing up the projects.
Project Detail
Before
- The lenghty text overwhelmed users and failed to provide information that the users needed.
- No clear way to sign up for the projects.
After
Information hierarchy
Put brief introduction of the project and CTA in the banner. Added headings and broke the content into sections for readability.
Clear CTA button
Emphasized the CTA button in the page.
Comments & FAQs for smarter decision making
Provided comments from previous participants and frequently asked questions as per user research feedback.
Timeline
There was no way for user to view projects by time. Therefore in our first attempt we created a new timeline page that will allow users to see projects all-year-round in chronological order.
1st version
Classic timeline
In the first version of design, users could navigate along the timeline by scrolling or clicking the months.
2nd version
Better usability
However, in the user testing sessions many participants said the timeline made it difficult for them to browse. Consequently, in the second iteration we put the months into a tab.
Final iteration
Support multiple selections
While we collected more feedback from the users, we decided to ditch the time and added a dropdown menu. This allowed users to filter by time and other criteria.
