NEX Forum: Author/Poster Card

NEX Forum is an online platform that aims to provide Taiwanese applicants of the US's universities a place for application discussions. For Taiwanese applicants, online resources are scattered and are not always applicable. In this project, I tried to help users of NEX Forum locate referable and applicable information faster.

Next Project Next Project Next Project
Previous Project Previous Project Back

Project Overview

When applicants are searching for application information, they have to comb through tons of forum posts before they realize the shared experience or answered questions might not apply to their own situation. This project focuses on providing upfront forum poster's background information so that the applicants can quickly narrow down to the most referable posts.


NEX Forum is a project in beta that belongs under NEX Foundation. The forum is currently under an extensive redesign sprint. This project is part of the process of improving the experience and design of NEX Forum.

My Responsibility

As a UX designer with a dual position of a design researcher in NEX Foundation, I led the research and design process of this project. I worked alongside another designer and act as their mentor throughout the project, and collaborated with the head of engineering team to scope the project.

Timeline

Marh 2021 - October 2021

Role

Product Designer, User Research

Context

NEX Foundation
(Click to visit org website)

The Problem

How might we help users identify referable posts and determine whether the posts are applicable to their own experience?

The process of applying to a university program generally relies a lot on cross-referencing between other people's experience, background, and test scores to help an applicant find the best formula to copy and paste to their own applications. However, whether it be NEX Forum or other similar competitors, the applicants have to spend an extensive amount of time combing through posts after posts, even reading through the discussion threads for a piece of information they need, only to realize that the information might not be applicable to their own applications due to severely different personal experience and background.

Design Solution

The author information card will serve as an overview of the posters that shared their experience or asked the questions to help the applicants quickly cross-reference their own experience and background and evaluate if the information provided or answer thread to the questions in the main posts are relatable to their own application.


* The mockups shown below has been translated to English. The original design should remain a mix of tranditional Mandarin and English to cater to the target audience, Taiwanese people.

01

Mobile: Thread Partial View

Information of the posters' most current title and the institutes/organizations they belong in will help inspire and resonate the users with threads they might potentially be interested in.

02

Mobile: Partial View (Logged In)

For logged in users, the partial will also show posters' information that is of the users' similar background or goal. This piece of information will also be used to curate recommendations.

03

Desktop View

04

Mobile: Thread Full View

On each post/thread page, users can see the poster's education experience and their most current status. These are the most basic background information that determines the experience similarity. By clicking on the button, users will be able to see the poster's detail background information.

05

Desktop View

The Result

With the author's background here, I don't have to check for myself if this piece of information is ever brought up in the thread.

I tested the design with a couple of participants. The overall feedback was positive with the participants expressed that the design helped them saved a lot of frustration without having to scroll through the thread checking if the poster's background was ever mentioned.

Takeaway

Taking the lead

Due to me being the more experienced designer out of the two-people team I am in, I had to take on a leading position. It is a great experience to have the opportunity of collaborating with someone less experienced than I am. Through explaining my decision-making reasoning, the choice behind the methods I adopted, and critiquing both theirs and my work to come up with the best design, I got to re-evaluate my skills and my rationale more than ever, and by doing so, I have become more aware of my strength and weakness.

Scoping within reality

Due to the fact that all employees of NEX Foundation are volunteers, including myself, the teams can only contribute limited time and effort to the projects. In order to generate result within the cadence so we could pass on the project to the engineering team, scoping each project became extremely important. Huge redesign could be helpful, but is not realistic. I learned a lot about settling for small projects that still aim for maximum effects.

1.0 The Research

1.1 Methods

1 Competitor Analysis

In order to understand the existing pain points of users from other platforms as well as identify a market opportunity, I started the research process with competitor analysis.

2 Interview

After identifying the market opportunity and deciding on our target audience and strategy, I conducted 8 rounds of interview with our potential TA to collect qualitative data.

3 Affinity Diagram

I transcripted all interviews and opted for affinity diagram to help find the themes of recurring issues. This finalized our initial research of the general redesign.

1.2 Competitor Analysis

Identifying market opportunity

Through competitor analysis, I focused on learning the pros and cons of all other existing forums, and tried to find the market opporunity for NEX Forum. I realized that there is, in fact, a lack of US university applying forum that is specifically targeted towards Taiwanese, and concluded that if we could work on clear navigation, better categorization and filtering of content, enhancing information digestibility and relatablity, then NEX Forum will definitely have chance to stand out in the crowd.

1 Point 3 Acres

Pros

  • Massive amount of users hence massive amount of information
  • Provide applicants' background comparison data center

Cons

  • Information not applicable to Taiwanese applicants
  • Website navigation confusing
  • Messy UI design
  • Signup Process complicated
  • System point mechanism gatekeeps the information

Facebook Group

Pros

  • Networking opportunity
  • Quick response
  • Monitored by admin

Cons

  • Gatekeeps new users if they are not aware of the groups' existence
  • Registration speed varies and depends on admins' respond rate
  • No information categorizing and summarizing
  • If the groups are private, one simply cannot find them via google search

PTT

Pros

  • Oldest forum in Taiwan, very localized
  • User base is very active online
  • System decentralized and democratice for each discussion board

Cons

  • Very poor UI (The system has an extremely outdated and primitive UI and interactiion)
  • Searching function extremely limited
  • Mobile version also has very bad UI
  • Variety of discussion boards are hidden, users needs to know the specific board in order to access the content

Dcard

Pros

  • Anonymousity provide security for the users
  • Wide variety of discussion boards

Cons

  • No categorizing and filter within each board
  • University identifier often results to hostility and online bullying
  • User demographic too simple, no diversity

1.3 Key Insights

Applicants need customized information that matches their own background.

Applicants relies a lot on other people's experience. However, they need suggestions from people who are of similar background for the suggestions to be referable. This could determine whether their target schools are achievable for them or not, and later on, which acceptance should they take.

I need to know if my situation matches the authors of the articles before I decide if I want to refer to the information.

Applicants prefer talking to real people from target schools or of similar background.

Information that comes directly from the applicants' target school or from people of similar background improves the credibility of the information. Almost all applicants reach out to alumni of their target school online to ask questions at some point throughout the entire application process.

I ask for information from the seniors from my undergrad or my classmates, because we share the same knowledge field and experience.

The newer the information is, the more referable the applicants consider the information to be.

Due to fluctuating job market and the admission strategy changes, the immediacy of the information becomes an important quality to the applicants. The newer the information is, the more applicable the information will be for the applicants.

Sometimes Google search shows PTT threads from years ago. I don't really read those.

Applicants focus a lot on future career in the US.

A big portion of the applicants, especially those that are applying for grad school, focus a lot on the career development and opportunities in the US. Most of them have the plan to remain in the states for job after they graduate, and hence it is important to learn about this part of the target school.

The career prospect of the program and its career service is something I asked about all the time.

2.0 Ideation

2.1 Persona

Based on the research and key findings, I created a persona to help me brainstorm for ideas that we could incorporate into the current forum.

2.2 Scoping The Project

Breaking up the project to small chunks and working with limitations.

Due to the time and resource limitation of the project and the nature of NEX Foundation, I decided to scope down the redesign project, and focus on tackling one problem only this time. I ruled out problems that clearly needs more in-depth research in order for us to move on and decided on the problem statement shown below because I've already have the information I needed to know what is considered relatable and refereble background information for the users.

How might we help users identify referable posts and determine whether the posts are applicable to their own experience?

2.3 Brainstorming and Selection

I brainstormed with my teammate and came up with a couple ideas. Once again, due to the limitations mentioned above, not all ideas are realistic at the time. I down-selected the ideas based on the three element shown below:

Technicality

Time needed

Resource needed

The final selected idea for the the first sprint was to provide poster information in poster/author card form to give the readers an immediate view to the posters' background information so the readers can easily determine if the information provided in the thread is relatable to themselves.

3.0 Iteration

I mapped out the user flows of how a user typically come across our discussion posts. The user flow helps me identify pages where we need to provide the information. For example, if a user come across one specific posts via google search, then it is essential to have the author's background information in the post page since the post page is the first touchpoint this new user gets in contact with NEX Forum.

I created wireframes for the idea. During the process, my teammate and I went through many iterations and version comparisons to help us come up with a clean and user-friendly ui. We started with mobile views before we work our way towards the desktop views.

Modal Version

While this design truncates the information and may have the risk of being ignored, it is the cleanest out of other iteration. The cons of the design is compensated by showing the most determining piece of information as well as the aforementioned first-time tooltip.

Truncate Dropdown

This design truncates the information, and is not as clean as I would like the interface to be.

Sectioned & Dropdown

This design incorporated the two ideas down below and retain the best of both world.

Sectioned Timeline ft. Logo

This design has the benefit of showing the experience of two different title that happened within the same organization. However, NEX Foundation do not have the technical capacity to auto-generate every organization logo.

Dropdown Timeline

This design has the idea of incorporating dropdown/collapse interaction to take into consideration of timelines that are too long to show in one view.

Left vertical Placement

This placement of poster's card follows the "F" shape reading pattern, and hence should be visible to the users. It also retains the top-down most recent to oldest logic flow of the timeline. Last but not least, it does not require major adjustment between the mobile view and the desktop view.

3-Col Right Placement

While this placement retains the top-down most recent to oldest logic flow, the third column ended up easily ignored by the users since they are so used to the third column being ad sections or recommendation sections.

Top Horizontal Placement

This placement disrupts the most recent to oldest timeline flow and requires extra adjustment. It also truncates information when we could choose not to.

3.3 Design Decisions

During the decision process, I came across some design challenges I had to make, below are a few of them:

How might we call attention to the read more about author button for mobile view?

For the mobile design of the poster/author card full view, I went with a truncating design of hiding the detailed background information in order to keep the page clean. However, with truncation, there might be a possibility that the users will completely ignore the button altogether. To ensure the users are aware of the hidden content, I decided to add in a first-time tooltip to highlight the button.

First-Time Tool Tip

The tooltip will pop up if it is the users visit the page. The tooltip will remind the users that they could click into the button to read more about the author/poster's background experience.

What author/poster information should we show on the partial view?

While the more background we show, the more clarity we might be able to provide to the users. However, we do not want to show too much to the point that the users stop clicking into the threads just because the posters' background is not an exact match theirs. We want the users to feel inspired by or resonate with the posters/authors' current status, so I decided to provide the posters/authors' most current status onyl on the partial view.

Most current Status On Partial View

In order to not scare of the readers, but still make them feel inspired by or resonate with the posters/authors, the posters/authors' most current status is the only information shown on partial view.

How might we incorporate time element into the background information?

According to the research, the time element of the background information is also a key affecting quality to how the readers perceive the relatablity of the information. We got inspired by how Linkedin visualizes the users career progress in a timeline view, and hence decided to adopt the idea. This does not simply provide a flat information in text, but also showcased the posters/authors' time progress and status changes.

Visualizing The Background

In order to incoporate the time element into the background information, we decided to adopt a timeline visualization for better interpretation of the posters/authors' background information.

3.4 User Testing

I did a simple version of A/B testing in qualitative form with 6 new master's student who just started their study this fall 2021. The goal is to quickly validate the idea.


What I was trying to validate were:

  1. Whether the author info card help the users determine the information relatability
  2. The overall UI

The overall feedback was positive. However, I did notice that with the group that tried out the design without poster card first, then the design with poster card later expressed a more positive feedback than the group that completed the test the opposite sequence around, which might be an indication that without first learning the inconvenience without direct poster's background information, user might not recognise the value of it as much.