Keeping up with the growing number of visitors on mobile devices.
In April 2013 around 20% of the visitors of the Batavia Stad website were on a mobile device, but because of the lack of a responsive website these visitors had difficulty finding what they were looking for. Therefore Keytoe approached Batavia Stad for filling that void by creating a mobile website, with the content of their WordPress website but the flexibility of a mobile website to prioritize the content based on the needs of a mobile visitor.
So the first question to ask was, "what are the needs of a mobile visitor?".
It all really depends on what they're doing at that moment. They can be sitting in a train, heading to Batavia Stad, shopping at Batavia Stad or hanging on the couch browsing facebook and clicking on some article Batavia Stad shared on their Facebook page. Maybe their even sitting on the toilet taking a crap and planning their day ahead. No matter what it is, it was our task to make sure the mobile website showed the content relevant to those users.
So we started off by brainstorming about the different situations and wrote down the necessities. From there on we prioritized them to later be included in the wireframes.
Wireframe + Design
Since we were making a mobile website and Batavia Stad has a pretty 'square' branding, I could easily combine the design phase with the wireframe phase. It wasn't even neccesary to open up Photoshop on this one.
After the first low-fidelity wireframes were created and reviewed, I mocked them up with some more color and flair. Making it easy for my collegues to use as guide during Frontend Development.
Since Batavia Stad already had a WordPress website it was pretty easy to build the mobile website alongside it as a child theme, meaning we could use the same URL structure and all the content already in the database.
We just added some extra functionalities in a plugin, which the regular site didn't have, like a shopping route, where users can save their favorite offers or brands and display them on a map so they can easily navigate through Batavia Stad.