Polaris: A star shaped cookie-cutter, for apps?

App interface design has always been a challenge. When Shopify released Polaris at their 2017 Unite conference, we were excited at the prospect of a pre-rolled App UI, but apprehensive at the prospect of it being too prescriptive. So how has it panned out?

Polaris: A star shaped cookie-cutter, for apps?

Shopify Unite Conference 2017: Enter Polaris

Returning from Shopify's Unite Conference in 2017, we were all tired, visibly sunburnt, yet bristling with anticipation to start developing our latest app using React & Polaris, the UI design system and toolkit launched by Shopify a few days earlier.

Of the many releases announced, it was the Polaris design system that we were most excited about. Aimed squarley at Shopify App developers, the toolkit aims to encourage developers to build apps that look and feel native to the Shopify Admin area (which also received a fresh lick of paint), removing the additional learning curve required of Merchants to familiarise themselves with 3rd party App interfaces.

One of the main challenges we face when building Shopify apps is designing the user interface. An aesthetically pleasing and highly functional user interface that Merchants find easy to adopt does not come naturally to us. It's something that we spend an inordinate amount of build time on, which then continues as we introduce each new app feature.

We're not ashamed to admit that we're somewhat aesthetically challenged in the design department. We're most at home developing app architectures, connecting APIs and 'pushing data', launching early and then refining the design using a process of rapid incremental innovation. We effectively iterate design based on the feedback loop.

 So the news that Shopify had created a yellow brick road that led to a highly functional and intuitive app interface for Shopify apps was, well...awesome.

Adoption

As we started developing with Polaris, we found the array of components very easy to combine to create simple yet effective page layouts. We found the best way to take advantage of these components was to use React JS, a super fast JavaScript library used for building user interfaces, specifically for single page applications.

If you're not quite ready for React, then a css only version of Polaris is available for use in your apps. Just include the stylesheet, add in the relevant classes to your layout and bingo, you've got the slick Polaris design system at your fingertips.

As newbies to React, the code samples on the Polaris site were invaluable, alongside some of the core React documentation. We were soon flying through the build process, pausing only infrequently to solve a layout or navigational dilemma.

A traditional web application is typically built around forms and data validation, with the bulk of the app logic residing in the server side code. With React, we found that the front-end application will typically communicate with the server via an API. This means that apps built with React need to be aware of state, validate data, manage the communication to the API and handle the responses. Developing with React and Polaris will, therefore, require a significant step change for some developers (us included!).

The Results

Our first React/Polaris app, Happy Birthday Email, entered development a matter of days after Polaris was launched so it seemed like the perfect time to give it a whirl.

Whilst the React learning curve was steep, we were really impressed with how intuitive the Polaris design system was to use and how it allowed us to spin up the app in record time. We’re also excited rather than apprehensive about introducing new features.

Overall, we're really pleased with how the app has turned out, it feels right at home in the newly refreshed Shopify admin area and we've adopted this approach for each new Shopify app that we build.

Concerns?

Whilst Polaris has given us a blueprint for app design (for which we are ever greatful!!!) and Merchants appear to be happy with the apps that have adopted it, we're wondering what affect, if any, this  utopian design pattern could have on our business over the next couple of years.

Union Works is a recently formed company, but we've individually been working on Shopify in one way or another since about 2010, crafting our reputations as Shopify app builders, Shopify integrations experts, Shopify store builders etc. The apps we built were clearly emblazoned with our company names, our quirky messaging and unique colour palettes.

Merchants would come to recognise our company through daily interactions with our apps, however, when comparing other apps built using Polaris, it becomes clear that there is very little to differentiate the various app developers.

With Polaris, we seem to be standardising our app layouts, our colour palettes, our styles and even the terminology we use to inform and signpost app features and settings.

Could we in effect be removing one of our main lead generators for private work by becoming invisible to the merchant? Does it feel like we're now building star shaped cookie-cutter apps with little opportunity for adding sprinkles? Perhaps!

We are, however, going to keep using Polaris for the foreseeable future as the pros far outweigh the potential cons. Regardless of the logo or the colour palette or the quirky UI and messaging, if an app over delivers on what it promises, then it's a good app and we'd like to think that good things 'appen' to good app developers!