Awwwards. is a professional web design and development competition body. It aims to recognize and promote the finest of innovative web design. The best year-round submissions are awarded at the Awwwards conference and prize-giving ceremony.
‘Sites of the Year’ dashboard is one of the side projects developed when I participated in the data visualization community, Planit. Using the raw data collated from the award-winning websites at Awwwards, I created visual representations of this data in a dashboard format so that digital designers can gain inspiration in a glance and obtain a clearer insight into the interpretation of the dataset.
RAW DATA
Collecting data from Awwwards.
Awwwards. is a web design-inspiring service familiar amongst most designers. Whilst exploring this platform, I was compelled to discover the nature of each awarded site of the year by Awwwards, which nominate 4 websites a year.
I inspected the available information pertaining to the 28 award-winning sites, which included country of origin, award date, website category and the average ratings given to each site based on a multi-category rating system. Information was also available regarding the technology employed by each website. I thought all the information accessed could be collated and organised into a dataset.
Web-scraping to obtain and organise the raw data using Google Spreadsheets was not successful from Awwwards. To rectify this issue, I input and arranged the data manually.
Sheet1. Organising dates, country of origin, average ratings, rating categories and URLs
Data Sheet1 listed the raw figures relating to award date, country of origin, website category, and the average rating for each awarded website.
Sheet2. Organising technology utilised by each award-winning site.
The following is an overview of the technologies utilised by the award-winning sites. Multiple technologies were employed by each individual website and so the data in Sheet2 was arranged in such a way that would facilitate the ease of identifying those technologies that were most commonly utilised across all 28 award-winning sites.
DATA JOINING & BLENDING
Problems in joining data
Data collated in Sheet1 was combined with the data of Sheet2. In the figure below, Table1 lists the country of origin, award date and the average rating for each site, whilst Table2 lists the technologies utilised per site.
Joining these two data sets together did not prove to be a seamless task. As depicted in the table below, the resulting dataset after the merging of Sheet1 and Sheet2 displayed unnecessarily repeated information for each site. Using Google search engine, I simply entered a search using the phrase ‘remove duplicated data in Tableau’.
Solution
Fortunately, Tableau help centre provided detailed solutions for the issue at hand. The solutions 1 and 2 depicted in the figure below are simply treating repeated data as an average or distributing it as a number of iterations, both being appropriate simple methods applicable to measurable values. Solution 4 is also useful but relies on knowledge of SQL for it to be beneficial.
However, In my case, solution 3 offered by Tableau seemed most appropriate. This is because I needed a fundamental way to solve the problem of repeated strings in my dataset that contain descriptors such as names of countries rather than containing measurable values. So, what is data blending like?
Data blending
Data blending, solution 3 offered by the Tableau list above, is performed on a sheet-by-sheet basis and is established when information from a second data source is used in the view. Data blending is different from data joining in that data blending does not truly combine two datasets together but instead maintains key data from both original sources and merely visually displays information from one data source together with another. This is ideal for when the data has different layers (rows). This was the solution I decided to adopt since the Sheet1 data contains one information layer for each respective site whilst Sheet2 data contains multiple information layers per site.
DATA VISUALIZATION
Wireframe
Prior to full-scale data visualization, I was tasked with working out how to configure the dashboard. Wireframing allowed me to visually project the data that would comprise the dashboard and served as a preliminary draft of sorts.
Ranking by website rating
Putting information into Tooltip
“Tooltip” appears next to the website ranking list when hovering on “Detail” on the dashboard. I added information to this section regarding the different category-based ratings, website category and country of origin for each award-winning site. This information is accompanied by the addition of an image thumbnail and website link to the original site. The rating categories of creativity, design, usability and developer’s perspective were colour-coded for differentiation.
Interaction
The detailed information is organized in such a way that hovering over “Details” triggers a pop-up containing more detailed information of the selected site.
Insights
Ranking 1 : Because Recollection (2015)
‘Because Recollection’ is a website created to celebrate the 10th anniversary of a French music label. This website has been ranked number 1 over a period of 8 years with an average rating of 8.7. In the review category of “creativity”, this site received a high score of 9.3. Users can consume the music content dynamically whilst controlling the site through a keyboard or mouse click. Interaction and animation designs create a playful and entertaining atmosphere.
Ranking 2 : A Journey Through Middle-Earth
‘A Journey Through Middel-Earth’ is a website inspired by The Hobbit: The Desolation of Smaug, a fantasy adventure film. This website, unfortunately, is showing an error message upon attempting access. However, “creativity” and “content” scored highly, with a rating of 8.83.
Ranking 3 : OUIGO — Let’s Play
Coming in 3rd place is “OUIGO,” an online pinball game. However, this website is not just purpose-built for online arcade lovers but doubles up as a platform to promote France’s national state-owned railway company, SNCF. This site also received high ratings for creativity.
Ranking by Country
Implementing filter features
I applied a filter to the dashboard linking countries with website name, website category, website rating, the technology employed and awarded date. This country-specific information is displayed on the dashboard whenever an individual country, designated by its flag icon, is selected.
Interaction
Filters are immediately applied upon clicking each country’s name or flag so that award-winning websites’ rankings and ratings are displayed with the relevant country of origin.
Insights
1. The country responsible for the most award-winning websites on Awwwards was France, with a total number of 6 sites. Coming in a close second was the Netherlands, with 5 websites hailing from this country.
2. The top-ranked website in France is ‘Because Recollection’, which is also the number 1 ranking website overall when considering all countries.
3. France won primarily in the industries of Game, Music, Business and Sports. In 2017, two of the award-winning websites came from France.
4. The number 1 website in the Netherlands is ‘Fan Hals Museum’ (2018). The museum is said to boast both classical and modern art characteristics in a unique and colorful way. It ranks sixth (8.2) in the overall website rankings.
The most frequently used technologies
By clicking on the website name in the ranking list, you can see which technology each website used. I couldn’t figure the proportion of the technology, but I was able to see the key technologies used, so we can see which technologies are currently employed by trendy websites.
Insights
1. WebGL was the most frequently employed, with 11 websites using this technology to craft their websites.
2. Following WebGL, in order of most frequently used were CSS3, HTML5, jQuery, reactive, PHP and three.js.
What I’ve learnt
Reflecting back on this project, I found collating and arranging raw data from the Awwwards website into a meaningful and visually interpretable dashboard was insightful, challenging but also very rewarding. The pitfalls I faced in arranging and combing the raw data led me to learn once foreign concepts of data-joining and blending, skills that are transferrable in future projects.
The Awwwards website allows users to select the awarded websites through search filters and extract information about each website, but I found I was able to gain more meaning from the raw data I collected from each website and then visually display this information in a way that is easily accessed and interpreted by users.
Rather than walking away from this venture focusing merely on the surface work of visualization, this project provided me with deeper insight into how I will interpret, transform, utilize and visualize data in future product design projects.
Thank you for reading my article :). I will appreciate any comments and feedback below or just feel free to contact me via hello@vivishin.com.
☝️Korean Article is here.
