Piazza Reference Redesign

Redesigning the Piazza feature that allows users to point to a previous post.

Piazza is a platform that students and instructors use as a forum to discuss and ask questions on topics. As a team of students at UC San Diego, we have all experienced using the platform and were curious to see how the educational tool could be improved on the mobile display. Through research and analyzation, we determined that the mobile referencing feature was unintuitive and could benefit from a different design.

MY ROLE

UX Designer

DURATION

5 weeks,
Nov - Dec 2019

TEAM MEMBERS

Victoria Vu
Andres Meza
Vy Huynh

TOOLS

Figma

USER TESTING

Audio/screen recordings were used to capture in depth user tests for 4 senior college students who had previous experience using Piazza for course work. Users were asked to complete a series of tasks on the Piazza mobile app, and we found that most usability errors were found while interacting with the referencing feature. In order to better visualize the problem, we created a list of core issues that needed to be resolved:

1.   Unfamiliarity with the referencing feature in its entirety leaves users unable to access this useful feature

2.   Unique post #’s are forgettable causing users to leave post drafts to return to previous posts for the # to reference

3.   Selected references take users to the old post with no way to return to the post that they were currently viewing

COMPONENT TO REDESIGN - REFERENCING

COMPETITIVE ANALYSIS

We analyzed other platforms such as Reddit, Twitter, Facebook Messenger, and Google Docs to see how these platforms successfully linked/shared/referenced other works.

Google Docs - Linking

User clicks the hyperlink icon after highlighting the text selection, the pop-up provides suggestions on what the user may be trying to link based on the highlighted text.

Twitter - Retweet

User clearly displays their own content while also presenting the post that they are referencing. Clicking onto the quote brings the user to the original post and then allows the user to easily return to their own post.

SKETCHES

In this project sketches were used to quickly brainstorm different solutions and informally ask students how they interpreted different processes. This work was crucial for narrowing down our ideas to our final design.

FINAL REDESIGN

Key Changes:

1. The ‘+’ button originally found in the top header has moved to a hovering circular button above the keyboard. The new position makes the header less cluttered and makes it easier to insert images/files/tags without accidentally hitting the ‘Next’ button.

2. Currently Piazza allows users to reference a post by typing the ‘@’ symbol followed by the number that is assigned to the post they would like to reference. The new design provides a ‘Reference’ button to increase function transparency for the user.

3. After selecting ‘Reference’ a list of the most recent posts from the course is pulled up. On this list the user is able to browse the posts, check the post(s) that the user would like to reference, and insert the reference into their post. If the user is looking fo a specific post, they can enter keywords into the search bar.

4. Instead of an arbitrary # for the post reference, the new design includes a preview of the post. Having this preview embedded in the post provides the poster and reader base information without having to navigate to a new screen.

5. Once the user clicks ‘Next’, a confirmation screen is presented ensuring the user agrees with the post settings. This is also seen in the original design.

6. Lastly, the post is made visible to the class and has the reference clearly available for all to see and interact with.