Prototyping interfaces with code
Working hard to work less
If you have a different mindset, you will have a different outcome
— Jack Ma [Founder of Alibaba]
Usually the frontiers between departments are created when people with different mindsets work together and disagree. It's really usual to see designers complaining about developers, just because they think in a different perspective. Listening different points of view can amplify your perception and make you burst the bubble of your department.
Since the beginning of ContaAzul, we’ve been trying to keep interface consistency and have used many different tools to create a set of elements that works just like LEGO pieces when building interfaces. We've used Fireworks, Photoshop, Illustrator, Axure, Balsamiq and Sketch to try to organize this set of atomic components and none of these solved the biggest problem:
Prototyping with a design centered tools made us limited by prototypes that didn't communicate our thinking.
Actually, we’ve been working with sketch + Invision for a long time and found out that PNG linked prototypes didn’t help us to communicate with developers and simulate the “wow” experience we would like to delivery to our customers. In Addition to negatively interfere on our usability tests, because users can’t actually interact inserting infos inside inputs, for example.
On the other hand, we knew that we could prototype into Html+Css+Js, but always thought that it would take us a lot of time thinking about coding details, rather than user's feedbacks.
The investigation journey began
Talks with UXs
The first step we took was to discuss the problem inside the design guild. Our current prototypes didn’t help us to validate input interaction, was hard to iterate, wasn’t thought in a responsive or mobile first way and was completely static. At our weekly talk, we began to look for another tools and prototyping processes to improve the quality while reducing interface building time.
Talks with Fronts
We’ve figured out that the components we’ve coded wasn’t updated anymore, designer’s ui-kit (build inside sketch) was too far ahead from the production reality, and we were lost in our interface consistency. Frontend developers had a short time and alignment to build these elements. We’ve discovered at these moment that we have to think together about our components.
To do it, we’ve created the Front-UX group inside slack (sharing articles and discussing continually about components) and invited all front-end developers to participate on a presencial weekly meeting about components and interface.
Talks with Specialists
Looking for advices, we invited some front-end and interface specialists for some talks about the subject. Also, promoted a Monashees Ux’s talk about prototyping processes and tools. It was really important to understand that we were not alone with this problem (and this is why we are writing this article: to share what we’ve discovered)
We fell in love with Webflow, but it was just a quick passion.
After a wide benchmark about tools, we found Webflow. An online prototyping tool that helps designers do amazing HTML interfaces without knowing how to code. Basically it has pre-made components, structures and css atributes to prototyping in a front-end way of thinking. You can’t just drag and drop an element anywhere, you have to put it inside a container, inside a row, inside columns… and it is a good habit to have :)
So, it was a simple job to connect our existing branded components library into Webflow and start dragging and dropping elements inside columns. But the reality was much harder. It wasn’t possible to import code, to use it, we would have to create every element inside the tool. After exporting the code, it didn’t import it’s own file.
(I still recommend webflow if you are a freelancer and need to create a website or landing page, but if you are working on a complex interface, this isn’t the best tool for you.)
Back to the future
Bootstrap
ContaAzul is actually based on Twitter Bootstrap, at the beginning we branded their components to make it have our look and feel. Later, we’ve done some effort to make an independent theme and now we are in an half way solution (still too much work to be done). The good part about been a bootstrap theme is that it evolves with bootstrap's community, as a layer over the core bootstrap. Been independent of framework unties frontend developers to apply our styles over any scenary.
Bootstrap Studio
Frustrated with Webflow, we began to lose hope about front-ux interface designing. One week later, we found Bootstrap Studio. A visual tool to build responsive interfaces, dragging and dropping bootstrap components. Besides that, it accepts custom codes, integrate with external css/js, works offline, has an awesome control over DOM and code, each account can publish on 5 custom domains and have an once paid license ($25–$60) per designer.
So, everything was ready to test and try to create our components library inside Bootstrap Studio. To do this, we gave us 2 weeks to work less and make a structure to delivery better prototypes in 2017. We called it “big picture” events, where we can clean and improve our way of doing design.
Doing this we would have more interactive prototypes, more consistency between designers, more fidelity between prototype and production interfaces, go a step ahead about prototyping for responsive experiences and organize our elements, groups and pages in a reference page.
Elements > Groups > Pages
We've used atomic design concept to build the structure of Elements, Groups and Pages. Where elements are atoms like inputs, buttons, colors, typography, loaders, icons… Groups are fluid containers where you can put elements like modals, blankslates, tables, slimboxes(cards) and navigation. Pages are a composition of groups organized on the grid layout.
Draggable codes
Publishing real prototypes
Bootstrap Studio allow users to publish 5 prototypes on their custom domains and it’s also exportable, so you can put your code anywhere to validade with users. You also can insert Intercom, Fullstory, Hotjar to track your users while they ar testing your html prototype.
Responsive Grid System
If you build your prototyping respecting Rows, Columns and containers it will became much easier to have responsive prototypes to validate with your users.
The easiest way don't have to be the quick and dirt way.
So, doing this we’ve improved our design guild’s efficiency and now we are able to make better prototypes dedicating much less time. We won’t use Invision, Sketch, Frontify anymore (reducing costs), because now our frontend and ui process are closer through Bootstrap library. Our consitency will now be respected because everything comes from the same source. Usability validations have been improved and now our users can really interact with html prototypes.
Next Steps
Our components library still have to be improved with more elements and smarter components. Frontends are trying to get in touch with this new components library. We are willing to also use it for landing pages and campaigns inside our marketing department. Now that we are really prototyping for responsive we have to make it live on the product sprint by sprint.
We recommend :)
I hope that sharing this experience would help to improve our design community and make people work less to make more.
Comments are welcome!
