Launching Interfaces.pro

UX, PM, Product Design

Interfaces.pro is a living brand-focused collection of UI design examples, the project we launched in June, 2017, mostly for 3 reasons:

1. We wanted to streamline our UI process.
2. We wanted to see what it takes to build a niche resource with a high traffic potential.
3. We wanted to emerge ourselves into our own product environment (as an agency, most of the time we are busy with client work).

It took us roughly 6 weeks to go from a bunch of paper wireframes to a release. So this is how it all started.

The idea

Back in the freelance times, for a UI self-learner like myself, it’s never been easy to create decent designs while maintaining good $ marginality. It takes time to create nice UI. I used to spend hours on a search for UI inspiration/ practical implementations of screens/components and, of course, pixel moving. In 2017 though they said building a digital product MVP is easier than ever. So easy, it may even feel like everything is the same...

Image Tobias

…if only every other startup could make it to Oscar, Intercom or Lattice bar of quality. I would love to get that kind of ‘generic’ designs quickly and cheaply. Many would love that idea too. Meanwhile, tons of so-so design are poured in the web daily. And the demand is still there. Okay, I believe in drastic UI automation (~2027?). But so far our best automation shot was thegrid.io hype. So how can you get things done quickly, cheaply and looking good enough?

Learning is an obvious option. And when it comes to learning UI, practice means a lot. I had some connections at the largest UI design education hub in Minsk IT Park, Belarus. This organization is a pipeline of resources for huge international IT businesses like EPAM, Itransition, Exadel, Wargaming and many more. I had a chance interact with many of design trainees and graduates to run a number of polls.

Polls Image

Interestingly, 84% of those ‘practice’ guys also said inspiration was an integral part of their process. The vague ‘inspiration’ appeared to be passive or goal-driven ‘consumption’ of UI design-oriented materials, mainly design examples. Respondents used multiple sources for inspiration, the most popular ones were:


  • Dribbble
  • Behance
  • Awwwards
  • muz.li
  • Google search

Observing the UI process in juniors, I saw people wasting hours, frantically searching for catchy images and jumping into Sketch/PS to recreate things. The ‘inspiration’ process was mainly not organized. People found it difficult to formulate what they need or didn’t formulate anything at all. Taking a closer look at the main inspiration resources I saw many problems:


  • Dribbble - piles of shots often isolated from reality
  • Behance - more like a showcase, too broad
  • Awwwards - too sophisticated to reproduce
  • muz.li - super broad
  • Google search - takes too much time, piles of old stuff

So.
I did some UI stuff myself.
I delegated dozens of UI projects to my team.
I observed UI process in juniors/seniors.
And I made my own definition of producing MVP UI.

“Creating a ‘good enough’ UI design is all about applying existing approaches in a right way”.

Yes, it is not always about creativity. Putting it really simply, to produce a nice design with limited skills/budget you have to find existing things and fit them into what you build. On the scale of ‘good copy, great steal’ I saw the upcoming project sitting closer to ‘steal’:

interfaces chart

How to create great UI: beginner’s guide

The problem is that there’s so much noise that even finding a suitable thing to steal can take hours and be stressful. This is where we wanted to step in – build a well-structured living collection of diverse design examples that have a set of heuristics characterizing ‘good UI design’.

The implementation

Our solution had to address multiple problems:

1. Poor or no formulation for desired inspiration search results
+ I created a semantic core from a Google search exploration to come up with the list of content categories.
+ I’ve designed a content plan that covers a range of heuristics describing ‘good enough’ design (from general, like color, type and animation, to platform-related, like reproduction difficulty, traffic estimation and etc.).

2. Searching for UI examples takes too much time
+ We were set to create a smooth browsing experience with straightforward navigation based on Single Page Application technology.

3. Searched examples are too broad/isolated/tough to reproduce
+ Our plan was to focus only on UI examples of live, mobile-friendly websites with ~1,000 visitors daily, representing aspiring/existing brands.

I pictured the average user located anywhere in the world, sitting primarily on >1200px desktop screen and mainly landing from referral resources. I was happy to see expectations becoming a reality:

audience
device
sources

In the process it helped us save a lot of time on building mobile experience (we invested more time into optimizing the layout on larger screens), and my plan to acquire traffic through niche resources and aggregation hubs worked out.

interfaces

12 revisions to finally come up with the landing page — the foundation of the entire website.

We have been using a living document for accumulating quality UI examples for a long time. This structure laid foundation for accumulating the content on our new website.

Bitmap

Bold = screenshot generated and uploaded, - = no example, pink = priority posting.

We chose WordPress as a website platform as it met nearly all our technical requirements and allowed to automate lots of manual labour with existing 3rd party add-ons.

The implementation


What worked out

  • In the first week the project got some nice press (interfaces.pro was featured as editor’s pick by muz.li), ~30k traffic and ~1,000 subscribers.
  • We received dozens of ‘thank you’ messages in 12 languages through the Crisp chat. Bounce rates were at ~60%, not bad for MVP. 65% are returning users.
  • We met all the budget and timeline goals.
  • We keep on using interfaces.pro internally and working on a version 2.0 with way more content and a premium membership.
pick

Editor’s Pick at muz.li made our server cry and go down several times in the first 24 hours.

What didn’t work out

  • The API’s for automated screenshots capturing we relied on produced only 62% success rate even after multiple tweaking — plenty of manual labour still remained. Partially because of that many automated marketing tools I envisioned were not built. Further scaling was a too risky move.
  • The project was gradually taking more and more of our time, so we had to lower its priorities, which is always hard to do when you are so excited :).

Instead of PS

While building Interfaces.pro we met a lot of great people, designers and marketers. The team was happy to test themselves in product design setting. And we are super-excited about our next release :).

Let us help you create amazing things.

Get in touch