We never had a full-time product designer @Eliademy, yet we managed to build a service praised for its clarity and simplicity. This is a story of how small group of engineers did it by using modern UX middleware and few non-conventional development methods.
We started working on the first concept for what later became Eliademy in late 2012. Realizing soon enough that my Photoshop skills were not exactly top notch, we hired a graphics designer to visualize user stories. Most of the concepts looked fantastic and was greeted by greeted by the dev team as an engineering challenge. In no time, our then beta product started to behave like a very clunky monster (custom elements for everything) with lots of cross browser compatibility issues (let alone site being responsive). The problem was clear — a person with a great eye for design is not enough. We need someone with hands on experience build web pages. Someone who could “see” HTML layout for each before even opening the Photoshop. We could not find a person with mixed engineering and UX background on a short notice in Helsinki and decide to come up with a different approach which later turned into well functioning development model.
1. Find the inspiration
We were trying to solve the problem of overcomplicated and cluttered UI most the of LMSs had, thus I started to look for the service that would be simple enough, yet allow users to create content in any way the wanted. Evernote’s the just redesigned Mac client (circa 2012) came as the number 1 on my list. It had everything — panel based content blocks, clear typography, color accentuated branding, almost entire absence of control elements. Quora, with its incredible simplicity (circa 2012 too), came as number 2.
2. Find the middleware framework
We wanted Eliademy v2 to be responsive and spend as little time as possible to building basic components like buttons, dropdowns, alert boxes etc. There were only major free frameworks available in the end of 2013 — Zrub’s Foundation and Twitter’s Bootstrap. The later one seemed a bit more feature rich and had a built-in ability to change the look of all basic elements at once.
3. Define style guide
Knowing what framework we want to use and how service should look we hired a freelancer with an incredible portfolio in print media to draw a couple of web pages (after all, we were after replacing regular study books with online content). After iterating through several variation (note, a good designer will always give you few variants to choose from) we picked up one that looked the best and created a style guide out it — a set of constants that needed to be used for every product page (#4189dd to accentuate heading and links, panel-based design, default Bootstrap v2 buttons etc).
Typography was another very important part of this stage, we have gone through numerous variants and decided to choose Helvetica and Open Sans as a free alternative to Helvetica Neue. Essentially you need to find the font that is:
- Available on most of the operating systems
- Has supports most alphabets (Eliademy is localized to 30+ languages, it was a must)
- Free to use (Google Fonts is the best source right now)
Iconography — that was simple — Font Awesome. The advantage over tons of free icons you can find is that FA is a vector-based font, which allows not only resize and color elements on the fly but also stack them in any possible combinations.
4. “Steal” the layout ideas
The biggest benefit of being a startup product manager in now is that you rarely need to invite the bicycle. You simply can look at the interfaces that do work and at the ones that you need to improve. You need to build an admin panel or user management interface — looks at Google Apps. You need content authoring interface — check Apple’s iBooks. The truth is that most likely UX problem was already solved by a very large company who invested a lot in user testing. Don’t be the good artist, be the great one and “steal your ideas”. You will need to tweak them anyway.
For the bootstrap users, I can also highly recommend fantastic collection on small applets build from basic bootstrap components — bootstip.com. There are also lots of 3rd party extension libraries that cover everything from fancy load animations to large user management interfaces.
When it comes to design, a famous saying “familiarity breeds trust” works quite well. If you have a service that looks and works in the way people expect it — they will like it.
5. Mockups and UX flow
I have tried a lot of them — Fluid UI, Mockingbird, Easel, Jetstrap. All are good at something but have lots of limitations in other areas. What really worked to get the initial ideas with a pen and paper using freely available A4 template from UI Stencils. Using a fixed grid also solves the problem of specifying margins and offsets for developers. In most of the cases pictures like the one below were enough to a get testable prototype out. And, since we have brandbook in place, there is not need to specify lots of other details.
Making a very well documented UX flow is perhaps the most time-consuming part of the process. The more complex your product will become, the more interconnections each screen will have with another. Try to keep it all very well documented and always think what can go wrong (running product development without QA is another interesting topic).
The last touch is still manual flow testing and minor CSS fixes, but in most of cases you can do it yourself.
The last piece of advice is read and keep an eye on great design examples. As counterintuitive as it sounds (both written decades before Internet ever appeared) — two best books about design I have ever read were Edward Tufte’s “The Visual Display of Quantitative Information” and “The Design of Everyday Things” by Don Norman. As Kurt Vonnegut once said about people considering him an experimental writer:
“To be experimental, first you have to know how to use all the rules of grammar. You have to be an expert first in tradition.”
In conclusion, my last piece of advice for startup product managers — do the homework, study similar product, get you hands dirty and don’t rely on anyone but yourself to make a great product. If a talented developer/designer comes along, hire them on the spot — those are very rare breed. Good luck!