Minute Media's
Theme creation Tool
Minute Media's
Theme creation Tool
B2B, SAAS / 2021 / MY ROLE: PRODUCT DESIGNER, UX/UI
The second action is the colors button. Pressing on this button will open the right-side panel where the user can add the color palette for the site. Each one of our sites has 7 colors to use: Primary color, Secondary Color, Dark Grey, Mid Grey, Light Grey, Black and white. Only after filling those colors in the color panel, the user will be able to use them later while configuring the sites components. For example: when the user will want to choose a color for the header of the site, he will only be able to choose from the color palette he filled here.
The 3rd action is the fonts button. Pressing on this button will open the right-side panel where the user can add fonts to the site, and choose font weights.
The last action is the typography button. Pressing on this button will open the right-side panel where the user will decide on the site's typography. Each one of our sites has 7 types of typography sizes: Tiny, Normal, Big, Bigger, Large, Huge, Gigantic.
Top bar actions: colors
Top bar actions: Fonts
Top bar actions: Typography
Meet the Theme Creation Tool 👋
The Theming tool is divided to 3 main sections:
1. Top bar actions 2. Table with filtering and search 3. Right-side panel
Table
The table is divided to 2 columns: Group & Type. A group is the component and type is the specific configuration. For example: Footet is the group (component) and color is the type (configuration).
Since there are so many Groups and Types, I decided to have a search options in the filters:
Right-side panel
The right-side panel is where the user is making the actions. As I mentioned, there are many kinds of configurations, here is an example of some things that the user can configure in the right-side panel:
Adding a "Preview" section within the theming tool was too much of an effort to develop. We needed a quick solution for the user to be able to see the changes they made. The "Copy JSON" button is allowing the user to copy the theme and paste it into our Storybook where they can preview the changes. It's also allowing the user to copy specific theme configurations to another theme. The "Publish" button is publishing the theme's changes to be live on the site.
Preview and Publish
Top bar actions: Import
I decided to use the upper part of the page for the main 4 actions that are used while creating a new theme: Import, Colors, Fonts, Typography
The first action from the left is the import button. This action is allowing the user to import an existing theme. The reason I decided to add this option is mainly because of the Fansided sites migration. All of the 300 + sites of Fansided looks exactly the same in terms of fonts, typography, template. The only difference between them are the colors- which are different in each and every site. The option of importing a theme is allowing the designer to customize only the colors of each site and not all the sites configurations which can take a lot of time and effort. Here is an example of 2 Fansided sites that looks the same but have different color palette:
Background 🔎
Minute Media’s publishing platform offers partners the flexibility and design freedom to create a distinct and unique site design for their brands. Each site is based on 2 key attributes that can be customized to the customer's needs: Template & Theme.
User Persona 🥸
This tool was basically created for me, or any other product designer that will one day replace me in my role. That is why working on this tool was a unique experience, as I was both the designer and the persona.
The problem 🤯
In 2020, Minute Media acquired "Fansided", one of the fastest growing platforms of sports and lifestyle digital properties. Fansided has more than 300 sites, and the company want to migrate all of them to Minute Media's platform as soon as possible.
INTERNAL TOOL THAT ALLOWS THEME CONFIGURATION FOR SITES WITHOUT REQUIRING DEVELOPMENT EFFORTS
The challenge 🧠
Minute Media wanted to reduce development time by shifting the theme creation process from the developers to the designers with a minimum of effort. While designing the theming tool, I had to focus on the easiest and fastest solutions, making sure it is not hurting the UX. I wanted the creation of each theme to be as quick as possible, so it will not take too much effort from the designer as well.
Goal 🏆
Perform theme creation and configuration for Minute Media's sites in a shorter time and without requiring development efforts.