What the design and development of ‘open source’ online applications looks like

This article was written within the section and conference WordCamp Croatia where you could read the first part: Why WordPress and ‘open source’ applications are a great solution for government online projects.

Technically, WordPress became a full-fledged online content management system in 2005 since its creators enabled the creation of static pages (known as pages) and customizable menus. With these elements you could create any corporate website, powerful enough to stand side by side to the, then popular, Joomla or DotNetNuke. It is this version of WordPress 1.5 (named after Jazzist Billy Strayhorn) that marks the distance from the blogging platform towards a comprehensive web publishing tool.

In the summer of 2010, a version of WordPress 3.0 (called Thelonious Monk) was released, allowing modeling and publishing any type of content, not just blogs and static pages. The technology that makes this possible is an integral part of the WP core, and responds to the name Custom Post Types and Custom Fields (otherwise, the name of the WordPress version called after Jazz giants is not a coincidence but the rule – each main developer responsible for the WordPress version chooses a name after his favorite improviser).

What are Custom Post Types?

Custom Post Types is an integral module of the WordPress application, and is used to define all types of content on the website. Government agencies and institutions are particularly suitable for flexible content modeling, due to their legal, operational or contractual obligations. Such a technological solution goes hand in hand with WordPress’s mission to democratize publishing.

Let’s take Hbor.hr as an example – Credit programs are units of content that should have their own custom look and design. They are related to interest rates, loan procedures, partner banks, related documents, graphic instructions and a host of other textual elements. The process of creating such interactive content follows three project phases:

• Sketching and joint elaboration of a rough content plan
• Detailed content design, elaboration of all its links, classifications and interactivity
• Programming a backend and front end layer that supports designed interactivity

What does the interactive content development process look like?

Sketching and elaboration is done within a common workshop, preferably at the physical location of the contractor. If virtual collaboration is the only option, tools like InVision, Google Sheets, and the RealTime board could assist in communicating the designer’s wishes and the client’s needs.

From the client’s perspective, the workshop should be attended by someone who understands how the institution’s marketing processes work and a person who is in charge of the website. This is the head of the marketing / PR department, since these professionals know the type of services and content that they communicate to the public. As far as the contractor is concerned, the chief designer and chief programmer must be present. The phase of sketching content and interactivity is the architectural phase and all decisions made will be reflected in the subsequent appearance and behavior of the website towards the end user – the public.

A set of questions and conversations serves to crystallize the need to publish various types of content. All conclusions are recorded in the official table of content architecture. You can expect 6 to 12 people to attend this type of workshop, and it is important that everyone has equal influence over content decisions. The contractor should thoroughly analyze and get acquainted with the existing content on the client’s website and educate the client about modern approaches to creating new content during the meeting. This concept of content development is in the very spirit of open source project development because it gives everyone the opportunity to express their point of view. The knowledge of the whole team about the market, user and product is built into the final application, and this is just a feature of open source projects (consensus, democracy, evolution).

Creativity begins with the creation of content

Real creativity begins when you get to the stage of describing the detected required content. Using WordPress around these techniques gives you a wide range of options. Custom fields is a WordPress function where you define its features for a particular type of content. For example, the average news story has only a couple of features – headline, main image, HTML content and a short description that is also used as an SEO meta description or excerpt.

Other content units may have far richer and more interactive features. The mentioned credit programs have special fields for entering the credit procedure, interest rates, related documents and bank contacts. In addition, each custom field has its own data type and possible relation to other content units. Thus, you can define the “Branch” as a unit of content and its custom fields – address, telephone number, latitude/longitude, name of the branch manager and possible credit programs that can be implemented in the branch. It is this last custom field that is actually the relation to other content units (credit programs).

What is the point of such architecture? With them, designers are free to define user flows and detailed definitions of all aspects of the User eXperience and User Interaction (UX / UI) models. For example, a typical user path starts from the front page >> the user “clicks” on the menu to find a credit program >> clicking on the credit program immediately consumes the desired content but wants to know more about the nearest branch >> clicking on the branch opens a special content section designed by the designer solely to depict a related branch.

On taxonomy and interconnection of content

This brings us to the third concept within WordPress – taxonomy (classification) and mutual (automatic) linking of content. Each content unit can be classified in several ways, and the national website of the National Center for External Evaluation (NCVVO) provides good real life examples. Namely, the editors of the NCVVO portal publish various news related to the finals. Some of them concern students, some teachers, and some exam coordinators. Such a situation is ideal for the creation of a taxonomy called “Persona”. The name of the taxonomy itself is arbitrary and depends on the proposal of the chief website designer.

When publishing the content, the editor simply indicates to which person the content is addressed. There can be more than one marked taxonomy… Another taxonomy developed for NCVVO is “School year” – 2015/2016, 2016/2017, etc. This gives the website really powerful options for searching and filtering public content. With just two simple taxonomies, the user can find all the posts related to the exam coordinators, which are also related to the school year 2015/2016. Important – taxonomies and their attributes can be as many as the designer wants, and units of content may or may not belong to these defined taxonomies.

By the way, taxonomies have their most significant application in the eCommerce world, where the user is given the choice of filtering products by all kinds of features. The automotive industry is an ideal example where color, brand, type, country of origin, and year of manufacture make good examples of how taxonomies can be used to classify cars. On the other hand, the fashion industry allows the user to filter all the way to black pants the size of XXL and this is a prime example of the use of taxonomies in “their” eCommerce world (and some necessary New Year’s resolutions. :))

The presented holistic definition of content allows the state institution to model the desired interactive experience according to user needs, contracts or laws. An open source tool like WordPress here serves solely as a framework to guide designers and developers in creating a modern website. Unlike closed proprietary CMS tools, everything the public needs to consume can be designed in an optimal way without inheriting corporate concepts.

Design of open source online applications

As we discussed earlier, a project solution must not be a slave to a particular corporate technology. The organization’s business ideas, market context, content policies, UX, UI, content type architecture, and how editors will lead web development should be above the rules of the CMS itself. In modern web production, there is a rule saying that a good CMS enriches planned processes and interactivity. In this sense, WordPress provides only the basic building blocks, and it is up to you to create the look of all the content and thus produce the desired Internet site.

The content architecture is determined by the three mentioned WordPress technologies – Custom Post types, Custom Fields and Custom Taxonomies. We use them to model the type of portal, information website or eCommerce platform. But if you asked a designer and developer what determines the production of a web project, they would usually give you the answer – “The amount and complexity of templates!” Every open source CMS uses content templates, so WordPress is no exception (the previously mentioned WordPress “theme” is actually a set of all defined templates).

Templates are a significant WordPress concept, and technically they are a set of PHP files that process a user’s query and display one unit of content in a properly designed way – news, credit line, competition, document, multimedia, photo gallery, etc. Website production is planned around these files because they define most of the user experience – visual aspect, animations, interactivity, loading speed, amount of processed information and a bunch of other, relevant UX / UI elements.

WordPress version 4.7 also implements the option to define several possible templates for each unit of content. Then the editor is responsible for choosing what each content will look like, all based on designed predefined templates. And no worries, I haven’t forgotten about Jazz star… version 4.7 is named Sarah “Sassy” Vaughan!

Why are templates important?

Visual templates are created for each type of content – here is a mobile template for news list view, news grid view and the same template, but with the initial separate graphics, called Hero Unit. Notice that the two templates on the left show the same data set but are visually different. The editor independently chooses what the content will look like. This is possible from WordPress version 4.7.

Why are templates important to us? At the previously mentioned meeting, it was said that all WordPress sites look the same – the statement is actually related to the mentioned stigma of the blogging platform. Templates are a tool where designers can design and produce any kind of modern web interactivity and the desired look using standard languages ​​such as HTML, CSS, JavaScript and PHP. The only real limitation they need is a properly arranged content architecture.

After the analysis of the content is finished, you can start making rough sketches – Lo-Fi Wireframes. This is also the first visual step in creating a website. The designer now finally has content analysis in front of him and can begin to sketch user paths, menu types, and rough web schemes. The emphasis is on the word sketch because it is the idea of ​​wireframing to develop the most meaningful solution with as many ideas and options as possible.

Later, in the process of making detailed sketches (Hi-Fi wireframing), “bad ideas” are discarded and the client is presented with a detailed sketch of the website. The whole process is repeated for each unit of content and each type of template. You probably recognized this process from the concept of brainstorming – first a lot of ideas are generated (creation phase), and then lower quality ideas (elimination phase) are discarded.

Pencil and paper ideation releases more ideas and enriches collaboration with the client. This allows the project owner to incorporate the opinion and comments into the very foundation of website development. After making a detailed sketch, the production of the User Interface kit (a set of graphic elements that visually describe the website) follows. Some would (correctly) say that this defines the “DNA” of a website. A detailed visual solution for the WordPress project can only be created after you have completed all the specific actions. Upon completion of this process, you will have a ready-made WordPress theme tailored according to all client and team requirements.

The user should get the desired data with the least possible friction

The common mistake of clients, as well as designers, is that they define the final visual appearance of the website at the beginning of the project. Some state public tenders go so far and require registered teams to submit design preview projects. Such requirements, while unethical, make no business sense because they ignore everything we said so far – content analysis and architecture, rough sketching, detailed elaboration of project templates, detailed sketches and sugar in the end – eliminating bad ideas. Read more about this issue at www.nospec.com.

Properly developed user experience is directly related to the goal of public services to enable the efficient consumption of interactive information. State Matura at NCVVO, credit lines for young entrepreneurs at HBOR, energy tenders at ENU.hr are examples of public information where the user should get the desired data with the least possible friction. In addition, public data has a note of greater importance – HBOR’s interest rate or ENU energy certificate are more important to you than the GIF of a dancing cat. The concept of designing public websites should therefore be free of excessive marketing messages and bad design practices. A state like this is desirable in terms of design, and a WordPress tool that allows a multidisciplinary team to work in a clean open source transparent environment.