Designing a Q&A platform for college students — a case study

Yuxuan Chen
6 min readAug 10, 2020

--

Dealing with academic-related questions like picking a course, or fulfilling a major requirement can be tedious and ineffective when you have to simultaneously balance school work, social activities, and focus on personal growth and career development.

With the goal of tackling this problem, my friends and I set out on a journey to bring Inquiry to life — a community Q&A web app designed for college students.

Understanding the Problem

User Research

With an initial idea to build a Q&A platform for students, I distributed a survey to get a general sense of college students’ experiences in getting answers to their academic-related questions. Out of 40 respondents, more than half expressed difficulty in getting their questions resolved, and approximately 43% of the respondents indicated a consistent need for additional follow-up questions.

In order to gain a deeper understanding of the challenges students face, I set out to interview 10 college students over Zoom about their experience when seeking answers to their academic queries.

Key Findings

1. Information that is vague and general wouldn’t be helpful to them.

“School websites are not really helpful to me…they are just too vague.”

2. Information is scattered across multiple platforms.

“My advisors have shared so many resources with me. I don’t know where to begin when I have questions.”

3. The process of getting answers can be time-consuming and frustrating for students, especially when they have quick questions and expect immediate responses.

“… I only have a quick question that can be answered in one sentence, but it’s fustrating to wait for my advisor’s email response. It’s also not worth my time to walk across half of the campus to the advising office.”

4. Students tend to seek feedback from peers who have been in their shoes.

“I know a couple of upperclassmen from my major, so I usually just reach out to them when I have questions.”

User Personas

Before diving into ideation and design, I created a user persona based on the research findings to guide me through the design process.

The Problem

Students want to get answers to questions that are specific to their academic disciplines, but they have a hard time doing so because:

  1. The information they obtained is often too general or vague, failing to address specific needs.
  2. Connecting with individuals who have experienced similar situations is difficult.
  3. There is a lack of a centralized space for them to gather relevant information.

Final Solution

A community Q&A platform for college students.

Prototyped in Figma

The Design Process

Ideation

I used “How Might We” questions to help myself brainstorm opportunity spaces and solutions that could be implemented.

  • How might we streamline the process of obtaining answers or relevant information?
  • How might we facilitate connections between inquirers with potential answerers?
  • How might we create a comfortable and encouraging online space for people to ask questions without hesitation?
  • How might we ensure and encourage constructive answers?

Deciding on Required Content and Features

Based on the HMW’s, I decided to incorporate the following key features:

To include proper implementation, I also took a look at similar platforms on the market, such as Quora, Yahoo Answers, and Reddit. After studying their features, user flows, and design patterns, I came up with a basic hierarchy including the necessary functions for this app.

Initial Exploration

With the goal of designing an intuitive and enjoyable user experience for the target users — college students, just like myself, I focused on three primary user goals:

  1. Users feel comfortable when asking questions.
  2. Users trust their peers to provide honest and helpful answers.
  3. The process from posing a question to receiving a response is quick and easy.

With these goals in mind, I started off by turning my ideas into sketches.

Low-fidelity Sketches

Medium Fidelity Design

Viewing Replies

To figure out the flow of viewing replies to a post, I went through several iterations:

Explorations of the Flow

Flow A allowed users to view post replies without navigating to a different screen. While I initially believed this approach would make it easier and quicker for users to access responses, I realized that it could overwhelm them with excessive information on the same page.

Flow B emerged as a better option. It provided a less cluttered user interface, preventing users from losing engagement by reducing information overload. In this approach, the visual distinction between the main post section and the comment section is also clear. Also, having a larger and emphasized space for writing comments would encourage users to provide detailed and thorough responses.

Posting a Question

In deciding the entry point for creating a post, I considered the four options below.

Entry Point Iterations

Option A included a “Create a Post” CTA next to the search bar. This approach could potentially confuse users since the “Search” and “Create” actions are irrelevant to each other. I did not pursue Option B, a text button with an icon. Text buttons are typically used for less important actions, but creating a post is one of the most important features of this web app. Option C provides a floating action button with an icon and a text label, which introduced the entry point for creating a post with the highest emphasis. However, the text-heavy button design could further clutter the screen.

I decided to move forward with Option D, a simple floating action button, to maintain visual clarity and highlight the entry point effectively.

Collapsed Card View

I considered the following iterations in determining the collapsed view of posts on the right sidebar.

Collapsed view Iterations

Option A displayed all the contents but had a text-heavy design that failed to engage users. Also, the visual distinction between the “Answered” and “Unanswered” status was not clear.

Option B used color representation, but the small dot design at the bottom right corner might not be prominent enough for users. I pursued Option C, which used color representation to create a clear differentiation between post statuses. Unlike A and B, Option C placed an emphasis on the subject and details of the post, removing extraneous distractions like profile pictures and tags.

These iterations were part of my design process to create an intuitive and streamlined experience for our target users.

Visual Design

Here is the style guide that I generated for this app:

UI Kit

High-Fidelity Final Design

High-fi Screens

What’s Next?

There is ample room for improvement. In the future, I’m planning to conduct more usability testings to further refine the design. Additionally, I would like to explore other areas for enhancement, such as implementing sorting and filtering functionalities or integrating a built-in chat feature, etc.

Final Thoughts

This project has been an invaluable learning experience for me, taking me through the entire design process, from brainstorming ideas to prototyping the final product. Throughout the design phase, I prioritized creating a user-friendly and visually appealing interface that directly addressed the identified problem.

As a sole product designer, I gained extensive knowledge in product thinking and building a comprehensive design system for an app. I also learned that design goes beyond aesthetics. It is important to empathize with users to deliver a practical and effective solution that meets their needs.

Thank you for taking the time to read! I’d love to hear any comments, feedback, or suggestions you may have. Feel free to reach out to me at yc943@cornell.edu if you’d like to connect!

Portfolio: https://www.yuxuanchen.me/

The UX Collective donates US$1 for each article published in our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. Being designers from an underestimated group, BABD members know what it feels like to be “the only one” on their design teams. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.

--

--