Fieldays Exhibitor is hitting into its nine years anniverssary. This event newspaper has been a truthful and honest news journal for the Fieldays since 1994. While this print-based publication gets stronger and bigger both in size and contents every year, it's also facing the challenge from online media that is able to provide constant update to feed the audience's appetite for the latest news. As a result, they needed a new platform to engage their audience to provide them with the most current news from the event.
This project required a good website that would be a web platform for easy news browsing purposes, and this is the ideal solution to engage audiences whoever is interested in agriculture development.
Having a good website won't fully achieve the best outcome for this project. As a result, the team set a much higher goal - a solution that not just work for web browser on your laptop or desktop, but a solution that will perform equally good on the tablet or smartphone, thus a responsive website that will work on all platforms.
Mark Liu, a design lecturer in Wintec as well as owner of Mark & Co worked hand in hand with Simon Nicholls, also a design lecturer in Wintec to accomplish this mission - Mark served as the art director and usability and user experience leader for this project while Simon focused on web development and was a wordpress guru, and Nikita Smith, design student who worked as an intern web designer and administrator. Together they worked with Wintec's journalism and photography staff and students, who were the stakeholders and content providers as well as backend users of the end product.
Keeping in mind that that there would be 40+ pieces of news and features with multiple images, short video clips and soundbite flowing into the site everyday, the design duo needed to build a website that was very flexible to handle all the different formats and contents throughout te dynamic backend and frontend environment. On top of that, the team was told they would not be able to change the habit of how journalism students used their wordpress backend for data entering and publishing due to the deadline constraint.
With all these restrictions in mind, the design duo needed to plan rapidly and strategically in seeking the best approach for this project - firstly, they needed to observe the data entering process of Journalism students, understand how they worked with the current online journal they owned - the Waikato Independent. These steps helped the design duo map out the workflow of this process and were able to customise the wordpress CMS that would both work with the habits of journalism students and yet translate all that data into a responsive web environment for frontend users / readers.
Secondly, they needed to investigate and decide on a suitable design direction, interactivity and technology that would enhance website usability and user experience. In order to understand how readers interact with online journal nowadays, the design duo needed to research into multiple national and international online news and journal sites for inspiration. What they have learned throughout this process greatly benefited them while they were wireframing and planning the info and content structure for this website, although with the time constraint, they felt that they had to kick-start the project even though they would have preferred . to have more time for testing and planning.
For the process of designing and working on this website. there were a few goals and parameters they have set up for themselves:
With all the research and studies carried out, as well as the parameters and goals in mind, they have decided to go ahead with these approaches for the solution :
Below is an example of how Exhibitor homepage works on different platforms at wireframe stage:
The challenge of this design was to create an interface that would not only give readers an opportunity to make the transition from traditional medium easier, but also create a website and interface that would respond to the platform and rearrange content structure that is aligned with the reading habit of users on different devices. The design duo realised that this is a big task with a tight two-week timeframe, and as a result, learning from some of the best news site and evolve from what they have were the key contributor to the success of this project.
They have reference through the site "BostonGlobe.com", which designed by one of the responsive web guru and author of Alistapart, Ethan Marcotte. They used the Boston Globe site as their gold standard, builded their info structure, content structure and wireframe for Fieldays Exhibitor with the learning outcomes from the Boston Globe. They believed that through this learning and referencing process they were able to produce a winning formula in a super tight timeframe.
Below is the final mock-up of the homepage that was presented to the clients and stakeholders. The design reflected a strong resemblance with the traditional look and feel of a newspaper, yet functioned properly on the chosen medium. Everything on the page was carefully crafted to enable the best reading experience for the users / readers:
This particular project was very challenging. The design duo needed to cope with the complicated interface design process and coding of responsive web, while also creating and inserting a multi theme templates for an existing site. Moreover, the interface needed to serve as a bridge to help readers transition into a new era of reading medium.
There were a couple strong features in this project that are worth mentioning:
This was one of the features that was suggested by the design duo that had blown clients away.
For once the design duo had not only created something that was what the clients initially wanted, but they created something that the clients actually really needed. To create a website that is fulfilling the need and face up the challenges from competitors is exciting, but they believed that if they wanted to be visionary web designers they would need to look beyond the present and create a a solution that will assist client to face the future challenges - as a result, a cross platform idea is born.
While they wanted to extend the project into tablet and smartphone platform, they also understood that time was not on their side. As a result, instead of creating a website plus apps for iPhone or Android, thy created a responsive web solution, in brief, one stone many birds. They concentrated on creating one solution that would flow through all devices, so they would have more time to spend on crafting the best user interface, thus providing better user experience for the users.
To create a cross platform design is not just simply making your page / website shrink or shuttle in different devices. Instead you need to study how readers react toward different platforms.
The first challenge was to introduce users / readers who were used to the print format to web format. By trying to recreate a close look and feel of a print version into web the transition was made easy. Of course, it didn't mean literally copying the look a newspaper onto website, but to understand the unique look and feel of a newspaper and to recreate them in web terms.
Another challenge was to attract new users / readers who own devices such as iPhone or iPad. In order to achieve this target, the duo researched into how users interact with the devices and custom-built the interface that will suited the reading habits of users of iPhone and iPads.
In many ways, they have achieved a "living" interface or multiple interfaces according to what today's technology can offer.
We had the opportunity to work with different clients to create a few characters that I truly loved.
This was a series of concept arts that we created for Ferrit.co.nz for different purposes.
I had designed the graphic for seven racing yachts that compete around the world.
Drop us a message -- firstname.lastname@example.org
give us a call -- +64 (21) 107 1600
mark & co is the trading name of e.i. Studio Ltd (experimental . implementation) | © 2012 mark & co (aka e.i. studio ltd). All Rights Reserved.