Prott’s Settings Page

I actually wrote this back in August of 2016 but finally decided to publish it. Hope you enjoy!

Some Background

During my internship at Goodpatch, my main duty was to work on Prott. Prott is a rapid prototyping tool (similar to InVision or Marvel) that is used for designers to quickly generate a prototype of their website/web app/mobile app. Over the course of 3 months, I worked on lots of interesting projects but one of the tasks I was given was to redesign the settings page within Prott. The main reason being that the different setting components seem to be misplaced in the wrong tab and many users were complaining about this very issue through our feedback form.

Keep in mind

The goal of this project was to place information within settings in a more suitable location. Essentially, an information architecture revamp

I made minimal or no changes to the actual setting components

I had to consistently talk with the engineers to make sure that the designs I were making can be implemented in a reasonable amount of time

Now that you know a little bit about the project, let’s get started!

Universal Switcher

Notice the two drop-down menus next to each profile icon

The biggest visual change during this project was not even in the settings page itself. The current UI (pictured above) has two drop-down menus: one on the top-right and one on the middle of the screen to the left. The reason why there are two drop-down menus is because the top-right is for accessing settings while the main drop-down on the left of the screen (the larger one) is for switching between your account and the organizations you are affiliated with.

This design was just plain confusing since you wouldn’t be sure which drop down afforded to do what so I envisioned Prott with one drop-down menu that acts as a universal switcher. Think of it like Google Drive’s universal account switcher.

Taking a deeper look at the new universal switcher

The important part here is that Account and Organizations are categorized differently to show the different workspaces you can enter. Sign out is also on the same hierarchy so it’s accessible anywhere. The settings icon takes you to the settings and the “+” button lets you add more organizations.

Yes, this may have been out of my scope for designing but it was essential in terms of Prott’s information architecture. It just made designing the settings page much easier.

To design something better, sometimes you have to take 3 or 4 steps back. Looking at the bigger picture can unveil a problem much bigger

A Better Tab Bar

Old — Profile, Account, Payment

Pictured above is the old tab bar. One of the difficulties in Prott’s settings page was that users didn’t know where to find their designated settings. For example, if you look at the old tab menu, would you click on Profile or Account to change your password? Yeah, I have no clue either.

You might wonder why someone named these tabs with such horrible names in the first place but keep in mind that Prott was a tool initially developed for Japanese people by Japanese people. Luckily, being familiar with tools in the U.S., I was able to point out these problems.

New — General, Plan, Upgrade

The new tab menu still has three tabs but all of them have different names and a different purpose. General is the tab where you can find all of your basic settings like email, passwords, and language settings. Plan is where you can see what plan you currently are enrolled in. Upgrade is where users can upgrade their plan to a premium one.

This simple naming meant less confusion for the users. It’s quite remarkable how changing a tab’s name could lead to an exponentially better UX.

General

New General Settings Page

The General Settings tab is essentially a combination of Profile and Account from the old design. But by rearranging each setting component and renaming the tab as general, it was much more clear as to where you can find these basic settings. There were 2 main changes that happened in this page.

The first change was to make it clear to the user that they can change their profile picture by adding a simple overlay that says “Change image”. It used to be that there was no such indication so it was never clear to the user that it was possible to upload a new photo.

The other change that happened was implementing a sense of urgency when deleting an account. Previously, the “Delete account” button was the same color and location as the “Save changes” button so if a user mistakenly pressed that button, boom. Account destroyed :( To avoid this mistake, we sectioned off “Delete account” and changed the color of the button to red to make it seem more alarming.

My Plan

New My Plan Tab

The new My Plan tab is the page where you can find all of your information about your plan. Additionally you can also look at the payment information and credit card linked to this plan.

A closer look at the popup

Nothing much has changed in this tab except for the addition of the grey question mark icon that appears next to the “Free plan” text (pictured above). Upon clicking on this icon, users get a popup with the message to let users know that they are looking at their personal account’s plan information. The reason we added this was because many users were confused when they saw that they were in a Free plan when in reality they were also enrolled in an organization that was in a Pro plan.

It’s a simple addition to the previous design but having this lead to less complaints from users of this specific problem.

Upgrade

Old Upgrade Tab

The problem with the Upgrade tab was that the chart describing each of the premium plans was just way to confusing. The old chart has essentially 2 charts but they have different amount of columns resulting in this very unsatisfying UI. Most of the Prott team hated this (including myself) so I redesigned this chart to better communicate the features in each of the plan.

New Upgrade Tab

I really focused on minimizing the amount of scrolls so the chart ended up being much shorter to the previous design. Instead of a chart that put yellow checks to which plan had which features, I simply listed out each plan’s features. This resulted in a much more efficient use of space.

Reflection

Truth be told, I initially wasn’t motivated to work on this specific project because settings pages have always seemed like the furthest thing away from what I consider “design”. It’s plain, dull, and somewhere most users prefer not to visit. I remember complaining in the back of my head, “I came here to design beautiful screens, not this!”.

But reflecting back on it, this project was the most important project I worked on to date. Working with engineering constraints meant that I was constantly forced to consider the time and cost it would take to design each new feature. It gave me an opportunity to talk with engineers more frequently and that it turn made handing off designs a breeze. This project was not the most visually appealing piece of work but rather a project that made me “think” like a real designer.

Thank you for sticking till the very end. Feel free to check out the rest of my work at www.YukiAsakura.com!