DHB hero image

Fieldays Exhibitor - responsive online news journal.

Fieldays Exhibitor is a print-based news journal created by Wintec staff and students across displines. This paper focuses on delivering the latest news and information from Fieldays - the biggest yearly agriculture event in the Southern Hemisphere for all the exhibitors and participants.

art director / UX designer MARK LIU | designer / designer / developer SIMON NICHOLLS, MEDIARTS RESEARCH TEAM

casestudy

brief

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.


casestudy

solution

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.

casestudy

deliverables

  • Art Direction & Project Management
  • Online Strategy and Research
  • Wireframing - informaton structure, content structure & layout structure planning
  • IA & UX design
  • Responsive web design
  • CMS / wordpress integration
  • xHTML + CSS development


where the story begin

Firstly, this project has been set up to meet the challenge that came from two new competitors - Waikato Times and Rural Press have decided to enter into Fieldays publishing war for better exposure on thie big event. Secondly, this is also a project that has been generated through the discussion on how today's audiences read their news.

Initially, Fieldays Exhibitor editors were looking for an online platform that simply delivered news and information, as well as integrating with other social networking plugins such as storify, twitter etc.

On the contrary, the design team was thinking of something much bigger than what the clients were looking for. They wanted to create a solution that not just aligned with the current reading habits of the target audience, but also with the possible future need of the audiences. As a result, the Mediarts design duo set themselves up with a huge challenge with a short timeframe - 2 weeks.

dynamic design duo

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.

researching, planning and curating

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:

  • They would use this project as a trial subject - to observe how users from both ends interact with the site and collecting all these data for the huge task for next year, when a total rebranding and restructuring of Wintec's online news journal - The Waikato Independent will take place.
  • They would like to make this a living design process - They needed to have the website ready before Fieldays, yet they have negotiated with the editor to keep this design and developing process "alive" after the deadline, so that they could make changes and evolve the site on a daily basis based on how users interact with the site.

Exhibitor process

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 :

  • They believed taking a minimalist approach on design / visual was the best direction, the reason being to let the contents of the website shine, as well as create a design that will be flexible to work cohesively with design influence from other medium.
  • The interface design needed to be content-driven in order to show as much news as possible in the viewable area of multi-platforms without compromising the design aesthetic.
  • A living / responsive interface design to ensure the website interface can adapt seamlessly between different platforms such as desktop, tablet and smartphone etc. yet still delivers the best user experience without any compromise.
  • Interface design should be showing some resemblance with the traditional newspaper - this would ease the transition for the users from print to web and meshing the characteristics between medium.

Below is an example of how Exhibitor homepage works on different platforms at wireframe stage:

Vodafone - logo variation

LEARNING from some of the best websites and EVOLVING from there would be the key elements for the success of this project.

design with reference

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:

exhibitor mockup

Features and highlights

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:

responsive web design

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.

vodafone infographic vodafone infographic

living interface and reading psychology

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.

Interested in what you reading, check out Fieldays Exhibitor site:

iphone experience
character design

Character Design

We had the opportunity to work with different clients to create a few characters that I truly loved.


go to behance
Ferrit conceptual sketches
behance project

Ferrit conceptual art

This was a series of concept arts that we created for Ferrit.co.nz for different purposes.


go to behance
racing yacht design

Racing yacht graphic

I had designed the graphic for seven racing yachts that compete around the world.


go to behance

Let's keep in touch

  • facebook
  • behance
  • pinterest
  • tumblr
  • twitter

Contact

Drop us a message -- hello@wearemark.co

give us a call -- +64 (21) 107 1600