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.
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...
…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.
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:
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:
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’:
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’.
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:
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.
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.
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.
Editor’s Pick at muz.li made our server cry and go down several times in the first 24 hours.
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 :).