Yesterday was a big day for Matomo (Piwik) – we released our brand spanking new Matomo Design and here’s an overview.
The making of the new open source UI design
We knew the limitations of Matomo 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 Matomo 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 Matomo message… and new updates!
We responded to your feedback, and made the “About Matomo” 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 Matomo.
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: Matomo 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 Matomo team, implemented a new feature: merging all Javascript and CSS files together into one bigger file. In the previous release, Matomo 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, Matomo 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 Matomo and participate if you can. Thank you all!
