Oi! This site is currently in WIREFRAME mode, flick a switch for full site. To see this site in WIREFRAME mode, click the switch.
EL SAMPO Digital.

CityShoppari - website & app

Website

Premise

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.

Work

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!

Shopify JS SDK integration was used for physical products. Product content fetched with Javascript to the main site, landing and campaign pages. Very beneficial when having the same product in numerous places and also have access to wide variety of useful tools within Shopify.

Search page is done (almost) purely using AJAX, even pagination. Search terms are stored in location hash part of the page url. Some page scroll handling was needed for users with smaller devices so that they can return to current scroll location after leaving the page instead of scrolling from top of the page again, and again, and again - history.replaceState did the trick. Also wrote CSS-class based Javascript object to enable/disable certain functionality depending on device screen size.

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!

Result

As always, it is a continuous work in progress. Nevertheless, I think it looks and works sweet:
www.cityshoppari.fi

  • Twitter Bootstrap 4
  • Shopify SDK
  • Mezzanine
  • Django
  • Adobe XD
  • FontAwesome
  • Adobe Illustrator
  • Webstorm
  • SSH
  • Javascript
  • HTML5
  • SCSS
  • CSS3
  • jQuery
  • Git
  • Google Analytics
  • Snoobi
  • TradeTracker

App

CS mobile app
Screenshot Screenshot

Premise

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.

Work

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.

Apple App Store (iOS)

Google Play Store (Android)

  • Mezzanine
  • Django
  • Adobe XD
  • Adobe Illustrator
  • Git
  • Android
  • iOS

Brands

  • Eurovision
  • HP
  • Microsoft
  • Philips
  • Rexel
  • Rubicon
  • Samsung
  • Switzerland tourism
  • TomTom
  • Tropical sun