There were several goals in this one. First, to update old somewhat responsive and low contrast WordPress website to a modern all-device, vibrant and fully functional website. Secondly, add registration, account, and payment functionalities to the site. Thirdly, we needed to add API for authorisation for the app and payment gateways.
We decided to go with "tech first" approach, which means that first we build back end, then front end and finally added polishing design on top of it all. After some R&D and discussing with the back-end guy, Mr Interesting, I chose Twitter Bootstrap as base for responsive build.
I kicked off by designing some simplistic wireframes with Adobe XD. Nothing seriously complicated, just some example lay-outs for the client, rest of the team and especially for the in-house designer to have a gander at.
After agreeing what should be there and what shouldn't I began the dirty work. Boldly started with Bootstrap 4, which was still in BETA at that point. Luckily it was released during this project so I had a stable base to work on. Phew. All-in-all pretty straight forward project setup with SCSS for CSS compiling, of course.
During last 15 years I have used a plethora of different Content Management Systems, Frameworks, Programming languages, Databases etc. BUT, I had never used Python based Mezzanine/Django. So, I rolled up my sleeves, and then pretty much started bugging Mr Interesting on daily basis, sorry. As there is very little documentation for total newbies, there was a quite of a learning curve on this. Also I am quite limited when it comes to SSH and using Terminal. So, I rolled up my sleeves even further and managed to get Python server running locally. First on my laptop and then bought myself Raspberry Pi3 and got things running there. Neat-o. Comparing to industry standard WordPress, Mezzanine is lightning fast. Blink! Loaded!
Normally I use my own PNG sprites for icons but in this project I went with FontAwesome-library. Just wanted to play it safe when it comes to maintaining this site in the future. I am a huge fan of :before and :after CSS pseudo-classes so the site is littered with neat tricks done using those. Surprisingly, FontAwesome icons can be used as pseudo-class content!
As always, it is a continuous work in progress. Nevertheless, I think it looks and works sweet:
Boy, we had so many talks about this. Never too many (HA!) and in the end we decided that this app should do one thing and do that one thing well. Show nearest discounts to user with minimal browsing. Even I will use this. Not a fan of discount cards by any means but this, why not! Real beneficial discounts directly from a smart phone or a tablet. E-a-s-y.
In-house designer and I made the initial drafts. I did interactive prototypes using Adobe XD and this helped to really see the app in action. The app itself was built by the wonderful people from Oikian.