Maria Meireles
Designer

Theme Builder

How to build a simple and intuitive theme builder?

Image alt tag

The challenge

I had this challenge at work: to quickly built a simple and intuitive theme builder for people to change the basic visual of a website.

During a day I investigated theme builders and websites that have that feature. The requirements were:

  • Edit at least 2 colours on the website and two specific components' colours

  • Edit fonts of main titles and text

  • Edit 4 logos on the footer

At the end of the day, I had the theme builder low-level wireframes. For business-related issues, the theme builder was put aside for some next redesign of the website.

Screenshots of the different theme builders found.

Screenshots of the different theme builders found.

Research

I had very clear requirements, so my research was focused on understanding how the task is performed to make it as intuitive and simple possible. So anyone could perform it with a minimum error and without a background in visual design.

The two experiments with the theme builder UI.

The two experiments with the theme builder UI.

Low-level wireframes

Thinking of requirements and the need to be a simplified process of creating/editing/deleting themes I draw low-level wireframes. The flow: a user creates a new theme.

On the right the image of two options: all in one page without preview vs preview with sections on a menu to the left.

The selected option was the second one, as you can see below.

How to continue this work?

Now that this section of the site has officially ceased to be I decided to at least do the final visual design and prototype.

The new context? In my portfolio, you can see Pocket Home, a smart home system. I thought it made sense to make a website for the company that created Pocket Home, with a user section. Among other things like buying hardware and ask for tech help, the user could build a new theme for his Pocket Home.

Styleguide for the Theme Builder

Styleguide for the Theme Builder

Styleguide & Prototypes

The base of the visual design was the styleguide - an adaptation of the Pocket Home styleguide. With new UI components adapted to the website patterns, like a footer and a header.
I decided to take a risk and use a colour I love but never used in my work: purple. It was fun and challenging to create the colour palette and rework the styleguide with those colours. You can see the result below.

The prototypes were created after all this had been done so the work came very fluid. Below you can see two of the main screens and the clickable prototype.

The prototype of the theme builder. Click on the expand icon on the top right to see on a full page.

Final Thoughts

I do believe all work you do takes you a little further. Even if it does not end up being implemented, it's always a learning experience, something new you do, an opportunity to improve your skills.

I loved the challenge of doing the research and wireframes for a theme builder - as a designer I had to go back to when I did not understand anything about this to empathize with my users and perform this task as one of them.

The work not being implemented was an opportunity to use purple, to train my visual design skills and to add something to Pocket Home. It took me a little further.