After the success of the Improve My City Joomla plugin we decided to create one for WordPress. This decision was taken due to many municipalities having WordPress websites, in order to integrate Improve My City easily and not having to re-train municipality staff in a CMS platform that they are not familiar with.

Apropos we thought it was a good idea to create a design language that would enable a unified experience across platforms, devices or screens in the future.

We got inspired from the Material Design guidelines, a set of rules that synthesize the classic principles of good design with the innovation and possibility of technology and science. It provides an emphasis on user actions that make core functionality immediately apparent and provides way points for the user.

Material Design by Google

So it was perfect for our use cases that involve people from the whole age spectrum with the goal to easily interact with a platform to report their neighborhood problems.

 

Platform quirks

Creating the WordPress plugin we witnessed many differences between the two platforms. A major one that would pose serious threats to customization and hinder our brand identity, was how the WordPress platform handles theming.

For the ones that are not familiar with WordPress, in an installation you can enable as many plugins as you want but only one theme at a time. This makes sense but what if a plugin has it’s own theme? If the styling and/or scripts loaded with the plugin are not set up or written correctly then many problems arise, both visual and functional due to overlapping styling rules or from an erroneous style loading priority.

“In WordPress you can enable many plugins and one theme at a time. What if a plugin has it’s own theme?”

So we created a theme inside the plugin that overrides all of the styles of our elements, while leaving all element styles of the active WordPress theme outside the plugin intact. Some visual bugs surface now and then but the modular nature of our theme makes solving them an easy task.

 

Content first approach

With today’s expansion of technology throughout the world, the paradigm of designing mobile-first experiences is insufficient. Α more appropriate way to approach experience design is to have in mind the ‘same application – multiple screens’ or ‘content-first’ rule.

Many devices have a browser now, to name a few: desktops, laptops, smartphones, smartwatches, TVs, game consoles, refrigerators, cars.
Subsequently any web application must be ready to show meaningful content and adapt user interactions for any screen size and orientation.

Today’s state of devices: All kinds of screen sizes everywhere

With that in mind we created a responsive theme that although somewhat restricted by parent WordPress themes, is independent.

As a starting point we used the lightweight Skeleton boilerplate, which is essentially one CSS file with approximately 400 lines of code that features a simple grid and styles the basic HTML components, tailoring it to our needs before building all of our custom elements on top of it.

 

Color

The use of color throughout the plugin is limited to decrease cognitive load and guide the user to actionable items. Background color is white with informational text having various shades of black that denote hierarchical importance.

There is an accent color that makes it clear to the user that the colored element can be interacted with. This makes it easier to quickly find navigational elements or buttons in every page.

The remaining use of color in the plugin is limited to the issue status colors and category icon colors, that the administrator sets for every municipality.

 

Typography & Whitespace

We relied on the use of typography and whitespace to give users the feeling of a more natural division of different sections.

We used the Roboto family of fonts throughout the plugin, that features friendly and open curves and allows letters to be settled into their natural width. This makes for a more natural reading rhythm commonly found in serif type fonts.

It is an open source font that supports English and English-like languages (Latin, Cyrillic, Greek, Vietnamese), and serves as the standard typeface of the Android platform.

Use of color, typography, iconography & whitespace to guide the user

 

Iconography

“A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.”

In the main Issue Overview page, in each issue there is an icon for votes, date and comments alongside textual information.

Empty states of the plugin also use large icons with respect to the background, filling the otherwise empty area accompanied with text that help users understand what they’ll be able to do on this screen once it has content.

 

Smart Geolocation

To ease the burden of typing an address when a user reports an issue we tried to automate the process, streamlining user experience.

First when dragging and dropping a pin on the map, the exact location address is calculated through the Google Maps JS API Geolocation feature, so the user doesn’t have to type anything.

The Google Places API in action

Alternatively the user can start typing an address inside a text input, where the Google Places API will suggest a list of actual addresses to speed up the typing process.

 

Future improvements

Design is the art of continuous problem solving and with that mindset we are continuously improving on our design implementation of the plugin.

Design is never done

Future improvements include:

  • Implementation of an intuitive version of the map view for smaller screens
  • More efficient use of iconography.
  • Make all information visible without extra actions from the user.
  • Work on the Joomla plugin and Android & iOS apps to apply a unified design language.
  • Support South and Southeast Asian and Middle Eastern languages with the introduction of a fallback font for these languages. Noto from Google is a good match suggested by the Material Design spec.
  • Add motion in the form of transitions or animations to specific parts of the interface to efficiently guide the user through it.

Want to try the plugin?

Demo | Download the plugin here.