A new marketing website plus admin panel design based on the Bootstrap framework, built on WordPress and coded in CSS3, LESS and HTML5, complete with custom 3D illustrations.
The guys behind Tabatoo have an unique offer for mobile app developers – an easy to use API that adds new real estate to their app. This allows for extending the existing functionality and offering new monetization options to free apps. Fast to set up and easy to use and customise.
Of course, having an unique product is not quite enough for a successful online business. That’s why the Tabatoo team contacted us. We were tasked with the design of their website, helping with the content and UI/UX design for their administration facility.
Web Design Prototypes with Bootstrap
It wasn’t quite clear what direction the visual design should take, so we started with several fast prototypes written in the Twitter’s excellent Bootstrap framework. The LESS variant, to be precise. This allowed for us to communicate ideas fast and go through numerous iterations in a short time.
Design had to be unique, but not quirky – something to stand apart from competing products without alienating anyone. The product already had a hot pink / red logo, which proved to be a solid basis for a dark colour scheme. Apart from the colourful backdrops and product images we decided to keep graphical UI elements to the barest minimum.
Custom 3D Illustrations
The star of the show is the product itself and to make it really shine, we created several 3D illustrations showing its usage and outlining its advantages. Everything had to speak of the myriad of options that Tabatoo offers to mobile app developers.
Possibly the trickiest part was the home page which on one hand had to be clean and simple, but also needed to explain what this product is and how it works. That’s why we came up with the “notes overlay” – when a visitor moves the mouse over the main image, another layer appears on top of it with hand written notes, explaining the elements and the benefits they grant. This captures the visitors attention and imagination, white saving us from having wordy descriptions or boring schematics.
WordPress Theme Development
When it was time for turning the interactive prototypes into a complete WordPress site, the whole process was quite simple. We already had most of the code and it was only a mater of creating some custom fields in WordPress and implementing the rest as a new theme. Keeping the original LESS files and doing all consequent design changes there makes adding of features and even future redesigns of the website a very fast and simple process.
UI/UX for the Admin Panel
With the marketing website in place we had to move forward to designing the user interface and user experience for the administration panel – The tool for managing user accounts, configuring the toolbar and its widgets, etc. Again, we started off with Bootstrap prototypes and through discussions and several iterations the final design was shaped.