Jordan Vidrine

Jordan Vidrine

Leader | Designer | Developer

Hey there šŸ‘‹ , Iā€™m a self-taught developer from the Cajun prairies of Louisiana with a background in Industrial Design & People Management. I made the leap into software development in 2019 and havent looked back since! When not at my computer, I am usually spending time with my family, reading, gaming, or creating ambient & electronic music.

Refactoring Theme Layouts

Oct 2024 - Apr 2025
New theme selection layout
brainstorming theme layout
brainstorming theme layout 2

I led the IC work behind this improvement in the Discourse admin section around theme selection & it's settings editor. While simple, our changes were met with lots of enthusiasm from the community and admin users.

This work was one part of a larger project aimed at a simplification and restructuring of the entire navigation of the admin panel.

Our goals for the themes & components project were to:

  • present a more useful UI for showing which themes are available on the site
  • make it easier to adjust settings of installed themes without needing to navigate into their sub pages
  • make it easier to install a new theme

Where we came from

theme layout issues

  1. The theme navigation contained both themes & components. This made it hard to reason about what theme was installed and which components were included on it.
  2. The list of installed themes had no way for the user to see what the theme looked like.
  3. There were two CTAs presented for the user to install a new theme with.
  4. To change any theme settings, you needed to navigate into the theme. Some of these settings are simple toggles and we felt an admin should be able to use these settings without diving deeper.

Exploration

brainstorming theme layout brainstorming theme layout 2

I worked first by coming up with mockups / ideas / sketches then presenting them to my team. After a couple rounds of feedback, I was ready to create a quick working prototype for us to test the experience.

Over the course of the next month, we "dogfooded" the prototype internally and continued to iterate as we discussed technical tradeoffs with the engineers involved. Once it was ready, we handed it over to the dev team for final implementation.

Where we landed

theme layout complete

  1. Migrate the themes & components sidebar navigation to the sub navigation elements now available to us via admin panel redesigns
  2. Render a theme card with image previews & selection indicators showing the theme and if it is currently the active theme.
  3. Place the install CTA in the same location as other "create" actions throughout the software
  4. Surface the most used and changed theme settings in a menu