We’ve been on a bit of a redesign tear these last few months. I’m happy to unveil the latest one: a complete redesign of CodePen Settings!
Settings is one of the last remnants of Old School CodePen
. While I’ll miss the 2011 nostalgia, the new Settings page is a thing of beauty. Beyond the UI and UX we also ripped out another huge chunk of our Ruby on Rails stack and modernized to reusable React Components, expanded our GraphQL API, and refined our component library. The Settings codebase is a joy to work with!
Perhaps a redesign of the settings area of CodePen isn’t particularly exciting to you, dear user. Fair enough. But we really do hope that when you need to change settings, this new experience is much more snappy and clear. We revisited literally every single page and redesigned it for clarity and responsiveness. We’re particularly happy with how the billing information is presented. You should be able to easily see your current account status and billing history.
Before & After
Now some fun! I love nothing more than before and after design unveilings, so buckle up y’all.
Content Organization
We flipped the tabbed navigation vertically. Which is the experience you’ll recognize from the rest of CodePen. We streamlined content where we could (For example, Customize is now within Profile, where it makes sense) but the tab names are almost exactly the same as before. It’s just far easier to absorb the beautifully laid out content from top to bottom. The permanent sidebar also makes it easier to remember where you are.
Auto Save
Before, you’d have to click that pesky Save button for your updates to take affect. No more! Thanks to elegantly laid out React Hooks, your changes automatically save. After a short grace period, of course.
Billing
An area that’s near and dear to my heart (only slightly kidding), we spent lots of time figuring out an improved UX for our entire billing system. We’ve got a few more phases of billing releases to go but this is a great start. For example, you no longer have to switch context to view your team’s billing information. We’ve got your personal billing tab up top with the rest of your personal settings. We created a new “Teams” section below to house your team billing tab alongside other team settings.
Team Account & Members
So many amazing changes, it’s hard to pick a favorite. But the team roster is high up there. If you’re the Team Owner, you’ll see a simple form below the roster for inviting new members by email.
Editor Preferences
I’ve saved possibly the best for last: editor settings. I know many of you will be using this settings pane the most, and hopefully its a delightful experience.
A Team Effort
This was a massive effort from everybody on Team CodePen. It involved a ton of design, client and server side work and support desk emails. So it feels especially good to finally have new Settings on production, giving all y’all out there an improved CodePen. I promise, you don’t want to know how many support tickets were caused by confusion in the Settings area. Don’t mind us as we self-high-five. 
The post Settings: Redesigned! appeared first on CodePen Blog.