Hello readers, my name is Lara. At Polarr, I regularly work on design problems across our applications and brand. I get to speak to our users and interact with how they use our products. I also get to dive into our complex UX problems and work directly with our engineers as we try to create or enhance interactions within our applications. Most recently I've been working on our brand, thinking about how we take that next step in our visual language and what this looks like.

In this post, I would like to share with you our process, the foundations of our direction and how we've created a hybrid design style based on an architectural experiment. I also want to share with you why we chose to redesign Polarr's brand and how we plan to deploy this new look and feel across all our applications.

What has been Polarr's design?

Polarr's design system has always embraced minimalism, choosing to favor function over form. When you look at Polarr's current design system you will see minimal use of line, the use of geometric flat surfaces and rounded shapes, legible typefaces, the combination of translucent and opaque objects, bold color choices which embrace accessibility and tested interactions that are always driven by high usability standards. When Polarr recently conducted a survey of its users it found that 36% of users felt ease-of-use was one of the leading factors in how they would describe Polarr.

Why do we want to stand out?

Whilst Polarr's design style has performed well, you could also argue that its lacks a unique flavor and favors tradition over experimentation. For example Bloomberg, a news website, is read by millions of people with various backgrounds. Their design system demands inclusivity and ease of use. They have carefully crafted each design element to not only achieve these goals but to add personality and character that represents who they are and what they stand for.

In 2019, Polarr's vision is to enable and inspire everyone to make beautiful creations using the power of A.I. Our technology we will be pushing the boundaries of traditional interface design and embracing the flexibility and convenience of A.I. Our design system will rely less on UI and more on modular A.I. driven experiences. As we move forward we will need to ensure that these elements maintain consistency and can be easily transferred across platforms and devices. Like Bloomberg, we need to embrace our traditional roots but strive towards crafting a design system that represents who we are and what we stand for.

How do we plan to do this?

We have a strong foundation of design principles and elements. We also know that our interactions work for many different types of users. To begin this next iteration of design, we decided to conduct a stocktake of all our elements and look at other designs styles that could be implanted into our current style. This way we wouldn't be starting from an empty page, our constraints would be in place and we could build upon an already pre-designed style. Our process involved 1-2 months of experimentation and prototyping.

We began this process through quick iterations of creating mood boards and implementing these discoveries into pre-defined mockups. This allowed us to move quickly and re-work the elements to fit new designs. We could also be experimental. For example we could quickly and easily experiment with line and shape such as creating objects with consistent and inconsistent lines and fills, overlapping objects and playing with translucency, adjusting type styles and continual exploration of color.

We tested this within our team and with external users. We even had one of our engineers experiment with how we could turn sound into distortion and show this visually across our imagery. We also designed across multiple mediums such as apps, websites, print materials and marketing assets. We built out interactions and prototyped high fidelity designs. Eventually we settled upon a style that worked with what we had and with what we wanted to evolve into. The style we landed upon was - brutalism.

Introducing brutalism

Brutalism was originally an architectural style that originated in the 1950s. The style often featured raw slabs of block-like concrete forms. The stoic creations produced during this time often created a feeling of architectural honesty. Similarly in art, brutalism is often referred to as art brut which translates to 'raw art'. This raw art can be categorized as anything made outside the teachings of academic fine art. No constraints - it is what it is. Graphic design embraces these same principles, choosing to strip back design principles to its simplest forms. Some good examples of brutalist graphic design can be seen in how recording artists, Beyonce and N.E.R.D represent their music and their brand. A consistent brutalist style can be seen in how they design their music covers, websites, to how they art direct their photo shoots, and visually represent their image on social media and speak to their audience.

Why Polarr is choosing brutalism as its base?

Brutalism is often described as anti-design because of its lack of form and a feeling of nakedness. The reason we chose brutalism is because it provides the perfect raw canvas for the art our user's create. Brutalism provides a defined set of guidelines that could successfully incorporate the principles and elements from our existing minimalist design system. For example we can take our flat minimalist toolbars and apply elements of a brutalist design style to how our icons are designed and presented, how our color is used across the UI and how our interactions successfully display selection and states.

Some inspiration we looked at when we first decided to move towards a brutalist design system was the wayfinding system implemented by the NYC transit authority in the 1970s. The NYC subway system prioritizes their uses primary goal, of finding the right train to catch, above aesthetic obligations. Effectively the design serves billions of users and it does so through clear, brutal use of a color system, legible typography, and flat graphics and iconography. Users can easily navigate the system combining typography and color regardless of nationality and language.

How we will redefine brutalism

We want to redefine brutalism to fit Polarr and to fit our users. Whilst we appreciate the honest approach of brutalism, we want to maintain order and ensure our usability standards remain high. Brutalism can occasionally be considered chaotic because of its raw, as is, portrayal. We are choosing to adapt the brutalist style, to adhere it to our current design and to constrain it to a modular design system that can grow with the company. We want to take the best elements of brutalism such as reduced distractions and clutter, but with all the affordances that our experiences demand such as color and consistency.

There are a few areas in which we have redefined the traditional brutalist style and combined it with our current design system. Internally we call this hybrid design style - Polarrism.

Curves

Brutalism is a style that quickly gets it point across. We believe curvature is a functional feature of our current UI and whilst brutalism embraces geometric shapes and right angles, we decided to bring together the two forms - curvilinear and rectangular shapes.

Colors

Brutalist designs often lack color. Color provides comfort, and brutalism often strives for a complete reduction in traditional design elements as a way to provide only the absolute necessities. We choose to use color for functional purposes. Color is used with absolute intention. For example our blog design relies on color as a way to divide our content categories and allow the user to successfully navigate through a wide array of articles. Another core need when selecting colors is contrast ratios. Our colors sit around 7:1 or higher and we plan on featuring multiple color themes that cater to every type of user.

Line

Similarly to brutalist designs, we use line to define shape and create boundaries between the objects. Unlike our current design style, the surface area lacks a fill color and is defined by the boundaries made from the consistent line drawn around it. Color and line weight is used to define selection and state.

Translucency

Translucency has been a large part of how we harness the best use of space on device screens. In the past, we've used translucent backgrounds to display tools overlapping the canvas behind it. This way the canvas that holds the edited photograph could take a greater part of the devices screen area. Brutalist style doesn't embrace translucent backgrounds, but we see this a necessary functional part of our design system that we want to retain in our applications. We also add color and various blending modes to enhance its function.

Space

We build tools for a broad range of devices with varying screen resolutions. Our smallest being the the screen of an iPhone 5 all the way through to a 27inch + monitor. We rely on a flat design with consistent spacing between shapes. This means that we don't use shadow or 3 dimensional forms in our design or overlap any of our structures. We rely on other elements like color and line to define our shapes movement and relation to the environment it exist within.

Fringing

As we broaden our design system's usage beyond application design and include additional touch points of our brand, we needed to incorporate a way to show imagery that embraces the brutalist approach and serves a functional purpose. If an image is required, traditional brutalist style would display the image in its most raw state. Our platforms allow our user's to experiment, explore and play with how imagery is edited and redefined which goes against traditional brutalism. We wanted to find a way to bring together distortion, A.I. and raw imagery. We did this through creating a glitch filter that harnesses the power of our fringing features. This allows us to distort any imagery, in an experimental, exploratory way. The brutalist intention comes through in the raw, automated way in which we do this. This action of fringing and distortion can be applied to any image using the Polarr QR code. This also enables us to have complete consistency in a unique way.

Where we are now?

We are currently crafting the first version of Polarrism, which includes fluid guidelines around typography, color, shapes, lines, space and form. Designs are being finalized and implemented such as the No Filter blog and website design, and branding collateral. We are still experimenting with how this design style will transfer across to our UI for our upcoming and current consumer applications and how we will maintain consistency across these platforms when we have unique, complex interactions in many of our applications.

Whilst there are still many uncertainties, we are confident in knowing that our process will continually evolve. We will continually rely on experimentation, prototyping and iterations as we define clear benchmarks for our design system.

As part of updating our new design system, we included our logo in the redesign. Our current logo follows clear guides. The former logo is thin, well balanced, and simplistic. We wanted to keep the harmony that is felt in the current logo form but make slight tweaks to bring it in unison with our new design approach.  To do this we brought together curvilinear and rectangular shapes and increased the line width to bring it inline with the current style.

Polarr's new logo.

Our timeline

You can expect to see the first stages of the design rolling out in the next few months. A total overhaul of the Polarr brand including our consumer applications will be completed by mid-year.

Subscribe to the no filter blog newsletter below to stay up to date with new posts and to learn when we complete our brutalist redesign.