Piazza: A UX Case Study
Team: Michelle Tran, Diana Melgarejo, Trevor Keller
We are a group of UX design students from UC Irvine, and this quarter we took on the task of redesigning Piazza. This case study is the final product of a quarter-long project for the human-computer interaction class IN4MATX 132.
Disclaimer: We are not in any way affiliated with Piazza. All of this work is purely our own.
The Product
Piazza is an online Q&A forum that allows students in the same class to ask questions outside of scheduled class times. These questions can be answered by other students as well as instructors of the course.
We chose Piazza because, as students, we have personally encountered a number of usability issues with the site. Since many students rely on this site to get answers for important class questions, we wanted to make it faster and easier for students to interact with the site.
The Process
- Researching
- Understanding Users
- Evaluating
- Designing
1. Researching
We started our design process by researching other online learning platforms and performing a competitive analysis of these services. Most of Piazza’s competitors, including Canvas, Google Classroom, Edmodo, and Prulu, are full Learning Management Systems. They act as a “homepage” for a course, allowing instructors to post any and all class information in one organized space.
Piazza, on the other hand, keeps its spoke fairly small, instead focusing on providing a simple Q&A solution for classes. As a result, Piazza is generally more organized and navigable than its competitors. Since this simplicity appeared to be Piazza’s biggest advantage over its competitors, we tried to emphasize it in our later redesign.
2. Understanding Users
Once we had a light understanding of what could be redesigned, we interviewed and surveyed students and instructors who had used the website before to gain a better understanding of what they liked and disliked about learning platforms like Piazza.
Our interviews with students revealed key frustrations surrounding a few confusing interfaces within Piazza. In particular, users noted that they often had a hard time finding where to perform certain actions or even locating a button on a page.
Through our survey (N=20) we found that while 90% of students use online learning platforms multiple times a week or more, only 30% actively participate (asking or answering questions) more than twice a month. This shows that a large number of student users are passive observers, but there are some “super users” that are often actively engaged with the site.
3. Evaluating
Once we found areas that users were unhappy with, we began our UX evaluation of Piazza.
We conducted 6 remote user tests to see exactly how users navigate the website and where specific problem points exist. We utilized “Think-Aloud Protocol” for all tasks in the remote user tests and all tests were conducted over Zoom. In addition to user tests, our team performed individual heuristic evaluations to find additional points where Piazza could be improved.
As a result of these two methods we found 4 key problems with Piazza:
Lack of Feature Visibility: Users have a hard time finding important features, since many buttons for these features around the website are hidden among other text or in difficult-to-find menus.
“I felt like I found the ‘Add a Class’ button by luck.” — User Test Participant #3
Lack of Feedback: Although the website’s main focus is on posting content to feed discussion boards, once a message has been posted, the user obtains no feedback that would indicate that they have successfully posted. This issue is found in many other features of Piazza as well, making it difficult for users to know when an action has been successful or not.
User Expectations Not Met: Our tests showed that users had pre-existing ideas of where certain items should be, and when those ideas were contested, it showed a conflict with mental standards and consistency. For example, when users were asked to alter their notification settings, they tended to click on their name as they thought this button would lead to their account settings page. However, this option would only lead to their network profile, further confusing them on where this option might be. The problem is further exacerbated by the account settings button being shown as an icon when the majority of buttons on the overall website are shown in text. These inconsistencies are rampant and serve only to confuse users, so we believed some standardization was in order when it came down to Piazza’s main UI.
Lack of User Control: Users tended to feel that navigating the website was harder than it needed to be. For example, once an option was selected, users tended to have trouble returning to the home page. This resulted in users having to continuously click the browser’s back button, making navigation tedious.
4. Designing
Lastly, we began deciding which UX problems should be prioritized as design targets and began sketching ideas for how we could fix them. Our redesign focused on these four targets:
- Site-Wide Button Design
- Top Navigation Bar
- User Feedback
- Settings Page
Each of these design targets focuses on one or more major issues found in our interviewing and evaluation phases. After individually coming up with sketches for each, we shared our findings and discussed how we wanted to change each design target. We then created wire-frame mock-ups to get a better vision for our new designs. These mock-ups were then made into higher fidelity prototypes to display our redesign targets. Throughout the process, we kept in mind the wants and needs of our users and why they were visiting the site.
In this section, we will walk you through our design process for each target.
Site-Wide Button Design
Piazza’s main goal is to connect student’s with answers easily and we figured that by improving the site-wide button design, it would make it quicker and easier to navigate the site.
In the original design, many buttons are displayed in the form of dark blue text, extremely difficult to distinguish from normal text on the same page. Two out of our five usability test participants struggled with locating the “post” button when posting a reply to another student’s question. Since other buttons on the site are clearly marked as buttons, these “hidden buttons” violate the usability heuristic of consistency and standards.
To make it easier for users to find buttons, we changed every button on the site so that they had the same general style. To make important buttons even easier to find, we made buttons for things like posting or saving settings green and made ‘cancel’ buttons red. Since Piazza has a lot of monotonous blue, white, and gray on the site, these revised buttons stand out well.
Top Navigation Bar
Piazza’s top navigation bar is always visible and includes links to other key pages on the website such as the class list, the question and answer page, and account settings. We figured we could make it even more accessible by simplifying the resources it offers and reorganizing the section to be more intuitive.
Our redesign of the top navigation bar was of high importance because it is in constant contact with the user and improving it would contribute greatly to a positive experience for users.
We enlisted this feature as one of our four design targets because three out of our five test participants had to guess the location of the “Add Another Class” feature and two had trouble getting back to the class Q&A page after navigating away.
Our final design made the class dropdown menu and the page tabs more visible. We also made it more obvious which page you are on at any given time. To assist with our settings design target (described later) we also combined the settings and profile buttons into one large profile button.
The folder bar below the main navigation bar was also improved, implementing our site-wide button standard to make folders much more visible while not distracting from the rest of the page.
User Feedback
From personal experience and gathered data, we noticed that Piazza’s user feedback was lacking. Whenever users posted a comment or responded to a post, there was little-to-no sign of their actions being successfully completed. This became evident in our user tests when our subjects expressed that they were not sure whether their comments had been posted or not, so they continued to wait for feedback only to realize that the action had been completed without notification.
To compare with one of Piazza’s competitors, Canvas, the website uses a green ‘success!’ notification and a timestamp at the top of the page when users submit assignments. We figured this concept was a good tool for feedback and, if implemented on Piazza, would assure users that their post has been submitted.
Our chosen design includes a small, page-wide, pop-up at the top of the page. We wanted it to be unobtrusive yet still notify the user that their actions were acknowledged. The tab would move the rest of the page down so that it doesn’t cover anything important. It would remain until the user clicks on the X to close it. The tab’s color would correspond with an action’s outcome: green if successful and red if a problem occurred.
Another feature we thought would be beneficial to users is a temporary undo (~5 secs) button, similar to the one used by Gmail after sending an email. We wanted to include this because we noticed that user control and freedom in Piazza could be improved upon as users are not allowed to delete their own posts.
Settings Page
We decided to include the settings page as a design target for our redesign because from our user tests, we found that users tended to click their name, which took them to their network profile, rather than their account settings.
The usability heuristics of consistency/standards and visibility as a rule are not followed, as we noted that users found it difficult to differentiate between the two options. Allowing users the freedom to control and edit their settings is an important factor to all online services, and we found that Piazza’s settings page could be improved upon to reduce confusion.
We decided to combine both settings pages by combining them into one general settings page. On this page, every section is scroll-able, but buttons for each section are provided in the left navigation bar to ease navigation.
Reflections
Michelle
As a result from this project, I have learned how insightful coming up with a redesign is for a product or service, it requires thinking of ideas before you even start to do the work. As for the Piazza design itself, it taught me that there will always be something to improve on, even after you implement something new and better!
Diana
After having worked on this project, I feel like I’ve gained a lot of experience in thinking from the user’s perspective and not from a technology perspective. Especially in distinguishing both perspectives. From a more technical standpoint, the redesign of Piazza has taught me how to conduct effective remote tests, interviews, and surveys.
Trevor
This project has given me a solid taste of the HCI field and as a result I am really excited to do more within it. Even though this quarter had its ups and downs (the downs significantly outnumbering the ups on a global scale), I think that our project did a great job of replicating true UX work.
Acknowledgements
To conclude, we’d like to acknowledge the other case study websites that we drew our inspiration from like Zainul Alfan Nasution’s Alumni Case Study App as well as our interviewees and test participants for their help and time. We’d also like to thank Professor Bietz and the teaching assistant Ariel Han for assisting us and giving us feedback during this quarter, as well as other students within the class who helped us with our design process.
