UPDATE: New design has been released in Piwik!!!

click here for more information

Over the last 2 years, the Piwik User Interface has not changed much in terms of design.

We are now excited to announce that the time has come to give Piwik a makeover – a new and improved look and feel designed to meet the following objectives:

  • The new design should make Piwik more appealing and give it a more modern and professional touch
  • The new design should fix the issues with the current UI
    Some features are hard to use in Piwik. For example, the calendar and period selector is confusing and the website selector doesn’t scale well with hundreds of websites.

With these objectives in mind, Marcin Galecki has been working hard alongside the Piwik team on mock-ups of the design. These mock-ups haven’t yet been implemented, as this is still a work in progress and your feedback is important to us.

Note: click on the images to view them full size.

Dashboard


The dashboard mockup displays most new changes on the design:

  • New menu
  • New controller’s style used for the Calendar, Add a Widget
  • New style for the website selector and language selector
  • New style for widgets: colors, the footer, and tables scrolling to the right when there is too much data to display. We tried to improve the widgets’ footer to make it easier to access the other reports that Piwik provides: Advanced view to show all columns, ‘Goals’ view to see conversions for each segment.

Example ‘Referers > Overview’ report

This is an example of the “Referers Overview” report using the new styles.

Pages report

This mockup shows the style of the expandable data table, used in the Pages URLs and Page titles reports.

About Piwik message

By default, the message displayed would be short and sweet, and on Hover would display the full message.

Add a Widget selector

The “Add a widget” tool is now better integrated in the UI and re-uses the same styles as other selectors.

Website selector

The website selector currently does not scale if Piwik manages hundreds or thousands of websites and this new design would fix this usability issue. Only the first 10 websites (or 10 most recently used) would be displayed, and you could “Search” for websites (matching names and URLs).

Calendar

The calendar is a major usability issue in the current Piwik UI. In the dashboard mockups (see above), you can see that the calendar is now more visible. Also, the concept of Periods (day / week / month / year) is now directly integrated within the calendar selector itself, which makes more sense and makes it easier to use.

Icons set and widgets footer

Here are the full set of icons used in the mockups, and a detailed example of how the footers work.

Your feedback!

Piwik is currently used by more than 40,000 users, all with different backgrounds and objectives. The User Interface must accommodate the needs of every user from the most basic through to the advanced.

What do you think about this proposal? What do you like, and what could be improved?

Your feedback is really important to us – please send us your comments and suggestions via the blog or the forum thread and we will gather your feedback and contributions over the next 10 days or so. We will then work with the designer to prepare the final version of the mockups, which will then be implemented.

Thank you!


Matthieu Aubry

While studying in India in 2006, Matthieu had the idea of creating an open source web analytics alternative to Google Analytics. In 2007 he released the first public beta version of Piwik. Matthieu now leads the project from New Zealand, where he likes to spend his days coding new features from the Piwik Roadmap, and helping users and customers use Piwik effectively. Find him on twitter or github.