New Piwik Design overview (Screenshots)

Yesterday was a big day for Piwik – we released our brand spanking new Piwik Design and here’s an overview.

The making of the new open source UI design

We knew the limitations of Piwik UI from our experience using the product, and the great community feedback via the forums and in-product feedback form. We built a short list of key things to improve:

• A more professional and ‘feel good’ design
• Increased usability for particular elements: calendar, website selector, and report tables footer icons

Thanks to the support from our sponsors, we were able to hire Marcin Gałęcki, a talented UI designer from Poland. He produced a set of concept mockups with new colors and a refreshing new style.

Marcin worked on making the mockups pixel perfect and realistic, redesigning the menus, calendar, selectors, reports, widgets, icons, etc. Once the mockups were finalized, we submitted them for feedback on this blog and got some great constructive feedback. After a final set of changes to the mockups, the new design was ready to be implemented.

Stepan Sukharyna, sponsored by German Agency Vorwärts GmbH, implemented the pixel perfect mockups in an efficient manner, quickly fixing all bugs that we reported.

We hope that the new design will make it easier for all Piwik users to analyse their Web Analytics reports, and spend more time improving Websites and Apps.

Calendar selector

Now much more visible and easy to use, the calendar lets you change the date and period of the reports you are looking at.

About Piwik message… and new updates!

We responded to your feedback, and made the “About Piwik” box a lot smaller and discrete.

However, when a new release is out, you won’t miss it! As it will look like this:

New menu

New widget style

Notice the icons have been updated, the little arrow now shows which view you are currently looking at.

New report table design

Clearer and easier to read, the new report table lets you focus more on the actual data. You can easily switch from the basic report to the “All columns” table which shows: visits, unique visitors, actions per visit, average time on website and bounce rate.

New table design  for Page reports

The Pages report lets you expand and collapse your Pages. Categories are created when a character / is found in the URL.

Export Report data in two clicks

At the bottom of all report tables, you can click the Export icon, and export the current report in any of the following formats: CSV, TSV (CSV for Excel), XML, JSON, PHP or RSS. More information in the Analytics API doc page.

Create and track goals

The “Create a Goal” form has also been updated. Use it today to create and track your Goals using Piwik.

After creating your goal, you can view reports segmented by users who converted your goals. For example, which country had the most purchases? Which keyword resulted in higher download conversion rates?

All websites dashboard

Get a quick summary of how all your websites are doing: Visits, Pageviews and Unique Visitors. Check the Green/Red indicator, and if the last 30 days (or weeks, months) are decreasing… or aiming high!

Add a widget to your dashboard

The new widget selector is just too cool!

We also added a bonus feature: Piwik dashboard now remembers which view (table, pie chart, All columns) you selected last in the widget, and will restore it next time your reload your dashboard, saving you time.

UI Speed improvements!

Last but not least… we have also been working on the UI speed for this redesign. Julien Moumné, new developer in the Piwik team, implemented a new feature: merging all Javascript and CSS files together into one bigger file. In the previous release, Piwik used to make 1 http request for each JS and CSS file, resulting in more than 20 http requests to fetch css and js. Now, Piwik makes 2 requests only (one for CSS and one for JS file).

Summary

We are proud that this project was made possible by our sponsors, team members, community feedback, and is now ready!

Please spread the word on your blog, twitter, use Piwik and participate if you can. Thank you all!