Piazza Redesign

My annual redesign of Piazza. This time for iOS.

My college life has pretty much been full of pulling all-nighters at 3AM, struggling to finish up a group project due the day after. For students like me, Piazza is indeed a saving grace. Piazza is a question & answer platform for classes. It’s popular among computer science classes, where students post questions about coding assignments, midterm review, etc. It’s not a rare sight to see 100+ students online at 3AM the day before midterm or a group project deadline.

But let’s face it: as much as I love Piazza, it’s user interface is quite appalling. In terms of aesthetics, it’s stuck in the 2008's with gradients here and there, dull color schemes, and so on. Above all, there’s more room for improvement in the user experience; when a bunch of computer science students have trouble navigating Piazza, it’s no wonder why humanities students don’t bother use it. I actually did a redesign of Piazza last year as a side project; it was more of an aesthetic facelift then. This year, I went for a more user experience focused redesign on the Piazza iOS app.

User Research

It’s a good thing that I know Piazza very well — I’ve used Piazza as both a student and an instructor of Web Design DeCal, so I know the pain points in the user experience from both sides of the users. But to gather more data points, I asked for inputs from my fellow CS friends and teaching assitants of Web Design DeCal.

From the feedbacks that I’ve gathered, the three main issues with Piazza iOS app are:

• Lack of hierarchy: A lot of users had trouble finding a specific section (ex. Course Page) within a particular class. It’s because the links to some features specific to a class are on the same level as some of the more general features like Piazza Careers.

I have never used Course Page. I never knew it even existed. I don’t think I ever bothered to look at the items in the sidebar because they didn’t seem that important.

• Hidden features: Piazza is actually quite robust. It has some very useful features such as filtering by tags, adding a post to favorites so you can find it later easily, etc., but they are all hidden under ambiguous icons like the gear icon. In fact, even extremely important features like adding a new class is hidden under a class selector.

I have to press the setting icon to filter by hw, hw1 when that should be in the search not in settings.

• Lack of call to action: As a rule of thumb for good user interface design, you want to give emphasis to important elements. Piazza does a horrible job at that — important elements like adding a new answer to a question is a plain blue text and doesn’t feel like an actual button. It seems as if there’s an equal amount of emphasis to editing an original question and adding a new answer, which clearly deserves a higher priority.

It needs to make the buttons look like actual buttons. It’s like I’m wearing glasses and everything is just blue text.

Prototyping

Based on the feedbacks I’ve gathered, I focused on three areas when redesigning the Piazza iOS app:

1. Improve hierarchy by reorganizing the layout and the positions of elements
2. Make important features more accessible by bringing them out of the ambiguous buttons
3. Establish a clear call to action to actionable items such as adding a followup question.

Aside from these three user experience issues, I wanted to give some aesthetic facelift and some branding overhaul to make the app feel more like an app used in classrooms, not corporations. Right now, Piazza is more like a place where students only go to get answers for a problem they are having, as if it’s nothing more than a vending machine where they input questions and get answers as outputs.

In the redesign, I wanted to make Piazza feel more like a personal office hour or a study group. The application should be full of people and their discussions, not just wall of text. Above all, the app should feel youthful.

I first created a few documentations to organize my thoughts on the application’s purpose and the priorities of features. Then, I went for a quick sketch of the application.

From the sketch, I asked for a second round of feedbacks to gather opinions on the low-fi prototype. The biggest issue that one of the tester brought up was the need for the bottom bar. Yes, the bottom bar is consistent with the iOS design guidelines, but are the features in the bottom bar like the Course Info and Tags truly necessary? At first, I figured that a lot of people would use Tags to filter through the list of questions, but upon gathering feedbacks, I realized that people only Tags when they are searching for questions. This led me to scrap my plans for bottom bar and move the majority of the features to just the top bar in my final hi-fi prototype iteration.

Final Design

Branding

Piazza is a question & answers for classrooms. The old color scheme and typography made it look too corporate & professional. That’s why I went for a more youthful feel in the redesign, with Proxima Nova Soft as the main font and blue & green for the main color scheme. Also, throughout the apps, you will see students’ faces right next to the name — this makes the app feel more personal & social, rather than just a resource you go to get stuff done.

Feed

One of the features critical to almost any social app is the ability to stay up to date in one place. Likewise, Piazza needs a place to aggregate all of the posts that you care about — that is, posts that you are following. When a user first signs in to Piazza, they will be presented with the Feed screen, where they can see new posts to classes they are enrolled in and latest activities in posts they are following.

Sidebar

This is where I really cleaned up the hierarchy. In the new design, you take care of everything on a global-app level in the sidebar: Adding a class, Selecting a class, Settings, etc. Upon selecting a class, you will be taken to a specific class view, with features specific to that class.

Class

Within a class, say CS 198 (Web Design DeCal), there are 4 main actions that you can take. The most important is to scroll through and view questions. Since that’s the most important feature, that takes up as much space as possible in this design. The next frequently used feature is New Post. On mobile UI, bottom-right is one of the most accessible areas (due to the reachability from your thumb), so I placed New Post on the bottom-right corner. Search and class informations are less widely used features, and therefore are located on the right-hand side of the top bar.

For each of the questions posted, one of the most important information it has is the tag. That’s why I put the tag prominent on the top of each card, to give a heads-up information for the user about the topic of the question. (Much like Quora). I liked Piazza’s way of signaling unresolved question via red label and resolved question via green label, so that’s carried over in this redesign.

Question

For each question view, the key focus of the redesign was the emphasis on call to actions such as the Like and Following button. Upon reading the question, the user should be able to like the question to support the poster and/or follow the post to stay up-to-date with the latest activities on that post (ex. New answer). Less important items such as Edit & Delete are tucked inside a menu icon to the right of the following button.

Answer

One of the highlights of Piazza’s answers features is the fact that you can only have 1 student answer and 1 instructor answer. That is, if there’s already a student answer, you can only edit the existing answer instead of posting another answer on top of it, sort of like a Wiki page. It makes sense to some extent, as you can collaborate as a class to improve upon the existing answer to create one final answer, but it comes at a cost of discouraging varied viewpoints on a single problem. In fact, a lot of times our Web Design DeCal staff wrote different answers inside a single instructor’s answer post because we couldn’t post two answers. As such, I decided to ditch the Wiki-style answering system of the old Piazza and went for the Quora-style answering system. And of course, I gave a lot more emphasis to add a new answer so that it’s a prominent, explicit button rather than a plain blue text.

Followup

Similarly, followup section requires a stronger call to action to important actions such as replying to a followup question and adding a new followup question. As such, I made the buttons a lot more prominent in this iteration.

Resolved/Unresolved switch is another important feature, so I changed them from plain blue text to a more applicable toggle element.

Search

For search, I tried to make sure users can search for topics that they are interested in without actually typing in the search query. In the redesign, recent search & tags come up as a placeholder instead of an empty screen.

Tags are extremely important in Piazza — so important that it requires you to add a tag for each post. Now that tags are immediately accessible under search, users can quickly look for a post with a specific tag.

Class Info

One of Piazza’s features that a lot of people don’t know it exists, but quite useful is the Class Info. In Class info, you can add general information about the class, such as the location, time, syllabus, and even upload resources like homework and lecture notes. I remember my algorithms class used Piazza’s Class Info page as a course website, hosting all the lecture materials on Class Info page instead of having a dedicated course website. In the original Piazza iOS app, Class Info was not immediately accessible because it was tucked inside a sidebar, and the page was nothing more than a wall of text. In my redesign, I optimized each of the views to better fit the context of the page.

For the class info view, I created a separate tabs for location, time, website link, etc. instead of storing the data as a plain text. In Resources, I gave a better call to action to the most impotant element in each of the lecture material — View Assignment. As for staff section, the number one reason why you would view this section is to reach out to individual staffs. As such, instead of simply jotting down the names and emails, I added an actionable button to send emails to the staff member. And of course, the app feels a lot more personal when you see a grid of teachers’ faces instead of what’s pretty much an Excel spreadsheet of names and emails.

Add a Post

Piazza has three types of post: Question, Note, and Poll. In the original design, you are posting a note by default, and it isn’t immediately clear how you can switch to posting a question or a poll.

In the redesign, I positioned the post button on the bottom right for immediate accessibility from your thumb, and upon pressing the post button, you can select which type of post you want to make — much like the old Path-style UI.

Post Editor

One of the best parts about Piazza’s web editor is that it supports a full WYSIWIG experience. On mobile, however, you can only make your post in plain text. You can add images, but there’s no way for you to position your image to an appropriate place, which is a bummer if you are trying to post a screenshot of your mobile app prototype and add a caption, etc. I wanted to give Piazza’s iOS app a more robust editor, yet at the same time not feel too bloated like many other mobile text editors. As such, I took inspirations from Evernote, an app with one of the most robust yet intuitive mobile editors.

With the new editor on Piazza, you can fully format your posts, add lists, and position your images wherever you want. What’s more, adding a tag is quintessential in Piazza, so it’s immediately accessible next to the toolbar with a caption. For an important feature like adding a tag, you must have a caption next to the icon, not just an icon because an icon alone can be quite ambiguous and does not provide enough emphasis.

Another key problem in the old Piazza editor is the ability to pin the post. As an instructor, you can pin an important post to the top of the list, but you can only do this by writing a #pin at the end of the content. #pin is not even a tag you see in the list of tags! In fact, I only learned how to do this after a year of using Piazza. In the redesign, you can click on Add a Tag from the editor to pull up a Tag drawer, from which you can pin a post and/or choose from multiple tags in the list.

Conclusion

As a UI Designer, I like to consider myself more like a psychiatrist. UI Design is a lot like psychiatry in a way that you have to first listen to other people’s pain points, and you try to provide solutions based on their pain points. As a UI Designer, your job is intricately tied to the user’s pain points — you cannot design an interface from scratch without figuring out the users’ needs, much like you cannot give a sound advice without listening to the other person’s pain points first. This Piazza redesign is an example of a sort of a psychiatry that I do: based on what users (students and instructors) feel difficult about using Piazza, I sought to give an alternative design that sought to address those needs.

I guess the best way to end this note on my Piazza redesign would be my mantra on UI Design — a good user interface starts from the user. If you are designing what you think just looks good, then you are an artist, not a UI Designer.