UX for UX

Redesigning a brand for a company that has a history very similar to ours gave us a project that we were able to connect to on a deeper level.

Pixelgrade is a company that designs WordPress themes. You could say that in an elevator between two stories, but if you got to know them like we did, you would say they’re a great team of people committed to designing the best experiences for their clients by putting design and incredible customer service at the forefront of their work.

We needed to translate this and their values of camaraderie, integrity, innovation and joy into a visual system that the whole team would embrace and that would give their designers the chance to endlessly create stories based on it.

The idea of the adventurous pixel stuck with us and we decided to play with the dot on the “i”, thus giving the pixel a starting place from where it wanders off to explore the world, always returning back home. The main elements of the identity are the pixel and its trail, the vibrant colour palette and the dotted grid. Using these allows to create numerous scenarios for every marketing needs the team may have.

Website

Getting to know the user

We joined forces and tried to figure out what’s the best approach to designing an experience for their particular category of users. We started out by exploring personas, creating user stories, figuring out customer journey maps and organising content in order to understand the WordPress ecosystem and find suitable solutions for their most immediate and future needs.

Wireframes were built with the goal of exploring layout and interactivity ideas.

Visual design

The new website, aligned with the newly designed brand identity, puts emphasis on the simple and functional presentation of the striking themes in Pixelgrades’ portfolio.

  • Themes

    We carefully crafted out the layout for the theme pages, focusing on presenting them in an appealing yet functional way.

  • Calls to action

  • Account pages

    Information on account pages is easy to find and presented in a friendly tone of voice.

  • Support challenge

    Support is a big part of Pixelgrade offer to their customers, so we refined the support pages to reflect that.

  • Support challenge

    Support is a big part of Pixelgrade offer to their customers, so we refined the support pages to reflect that.

  • Support challenge

    Support is a big part of Pixelgrade offer to their customers, so we refined the support pages to reflect that.

Stories

We believed pixelgrade’s clients were the most relevant statement for the quality of the support and the overall experience so we decided to share these stories through a dedicated section on the new website. We presented the stories in a clean, unique layout that combines imagines, copy and interviews.

Social media

We also created a style, aligned to the visual identity, for their social media communication. Here are some layouts that were done for Instagram and Facebook.

Identity guidelines

Brand book

The final step in our process was putting together the brand book. This brings together the guidelines for verbal and visual communication for the new pixelgrade brand identity. It’s important to make sure the way they look and speak is consistent throughout every communication medium and throughout time. We created everything with one thing in mind: to create a platform on which their own creativity would allow them to evolve the visual identity, and not be stuck with one rigid set of rules.

The manual presents guidelines for verbal communication, logo usage, typography, color palette, layouts and illustration style.

Conclusions

This was one special occasion to work together with a team of designers and developers who fully understand the value of branding and UX/UI for their company. We never felt like we were working for them, but with them.