• Add to Collection
  • About

    About

    User interface design for online Q&A platform
    Published:
As a UI designer at Piazza, I've worked on several product features and experiments. Below are some of them, as well as very preliminary ideas for improving the Piazza Q&A interface.
Based on user feedback, reimagined the current question feed (on the left) to be more organized and focused more on the content than on bright colors of secondary elements. The result (on the right) features consistent and less contrasting blues, clear organization of content snippet and metadata and tags that do not dominate.
Challenges: not all commonly used actions are easy to find in the current Q&A view. Most are hidden under the "more" menu and never discovered by users. Question history is an important feature, but is rarely used.
My recommendations for improvement:

 - Actions that apply to the whole thread (both question and answer sections) are moved to the top, above the question. Icons (students will only see a subset of these) stand for: Follow, Add to favorites, Pin to Top | Make Private to Class, Flag as Inappropriate, Mark as Duplicate, Delete.
- Most common editing actions (Edit and Attach Files) are clearly represented
- Most common social actions (Follow/Stop Following and Good Answer) are prominent
- Less common actions (History, Filter by Tags) are a click away - see below:
One of the ways to reveal history and tags, on click.
The "X Edits" button is replaced with a link and instead of a click, the edits menu appears on a mouse over. An existing feature to show a post status for each edit point is made more discoverable by a history icon that appears on mouse over.
Filters and view options appeared on the bottom of the feed, which was at the same time hard to find and distracting. Concealing them under a single settings menu and bringing to the top of the feed fixes both issues.
One of the experiments to encourage students to enter other classes they are enrolled in. On load, a student will see her Piazza classes and can add more by typing them in, separated by commas. I've also created a functional mock up adopting a 3rd-party "tag-it" jQuery script.