EasySend.io is a collaboration project: your's truly & Awesome
Looking only on this project's wireframes, one would not even begin to understand the complexity and sophistication needed in order to execute the final design. The project was consisted of multiple phases, which at the end of formed a scalable, designed, complex website.
Going over the wireframes Awesome's designers handed over, assessing scale, pin-pointing optional difficulties and understanding general site structure. The original site map had over 30 static pages and a couple more dynamic templates. After a few sessions with the client, Awesome's designers and project manager we decided to start with a more condensed version of the site, which will be easier to Design, Build and QA. Publishing a new website with 40+ pages all at once is a potential trouble source...
Awesome handed over a beautiful yet complex design. multiple nested and referenced CMS collections, filters and search options, global symbols, mega navigation bar, multi-languages and custom made elements (tabs, dropdowns etc...). On top all of that, the decorative elements had to be dynamic, interact and positioned in relation to content (sometimes in relation to content and the edge of the screen).
Most of my project begin with either Homepage or Style Guide development. This one wasn't.
The first thing we began developing was the CMS collections (databases). Since those were intricate, had to follow strict SEO rules and reference to each other, we figured that the foundations should be exact.
The 'Resources' collection is composed of 2 different items - Customer story & Blog post.
The Customer story item had to have references by tags, and conditional visibility on several items in the template page.
The Blog post template page had a few challenges:
Table of Content - We needed that the content editors will be able to automatically create a ToC according to the post body. So a third party plugin was used combined with custom JavaScript in order to have a list of links from the post body headings. This link list was later styled and edited:
In the 'Resources' lobby page we used {finsweet's CMS library in order to combine lists. This way the filtering and search are all performed on one list.
The real challenge was the "Form builder examples" collection and the way we presented it. This CMS collection consists of hundreds of items that needs filtering, sorting, and grouping.
On that page we have a search bar, with autocomplete. For this element we again used {finsweet's CMS library together with an autofill plugin. Next, is the multi-select live filters, which once clicked, hides the custom CMS featured items slider. Last, but not least, are the dropdown elements containing the CMS list, sorted by category.
To conclude, EasySend.io is one of the most interesting and stimulating projects I've ever worked on. I learned a lot during, and enjoyed the process.