SportsWashing
Unit Time Plan
Initial Project Thoughts
This project was initially going to be centered around the political soft power games that appear to be being played out by the warring states involved in the gulf crisis. Those states being being Qatar and the collective states of the UAE, Bahrain and Suadi Arabia.
The gulf states are sovereign ruled, unlike the UK, and most western countries, there is no political democracy, the royal families power is absolute.
The tension between Qatar and the other gulf states has been a long running saga. The current Emir of Qatar's political and personal ethos is said to be in conflict with the collective ideologies of the other states, and this is sited as the main reason for the breakdown of good relations between the gulf co-operation council. Then in June 2017, the UAE, Bahrain, Saudi Arabia and Egypt broke political ties with Qatar, halting all trade in and out of Qatar, closing all flight paths that crossed over the neighboring nations and withdrawing all military presence. Any persons of non Qatari origin were given two weeks to leave and return to their mother state.
The UAE and its political partnering states cited Qatars apparent support of terrorist organisations, Qatars increasingly close political relationship with Iran, and the Qatari owned Al Jazeera news network, as the reason for the break. The UAE made a list of demands including the shut down of AL Jazeera, in order for Qatar to rejoin the GCC. No resolution to this conflict is yet to be found.
SportsWashing
When researching into the GCC crisis, I came across the phrase 'Sportswashing', which as of 2018 is an Oxford dictionary recognised phrase. The phrase refers to nation states with often appalling human rights records and laws using sport and sporting figures in an attempt to mask and 'wash' their negative reputations, particular in the eyes of the western world.
Qatar, The UAE and its neighboring nations are prime examples of what is considered sports washing in action, and have been for some time, with the relatively recent investment in Manchester City, PSG and global sporting events like the Formula 1 racing, the WWE and the 2022 world cup.
The beginning of the GCC crisis in 2017 seems to have amplified these sports washing attempts, with the warring nations appearing to be attempting to 'one up' each other.
Project Thought Process
Why this topic?
With this being my first self initiated project I wanted to focus it around a theme I was personally interested in. That being sport. Over the last couple of years investment into sport, particularly by middle eastern states and countries has intensified. I was aware of this, and could obviously see all was not what it seemed in relation to these investments, but very much uninformed as to any real detail or history. I thought this project would be a excellent opportunity to carry out a project around I topic I am passionate about, whilst also learning and understanding the wider and often hidden implications of it.
From initial research it was clear that the topic of Sport-swashing was beginning to gain more main stream attention, but this was mainly from a journalistic point of view. Words only. story's. I felt I could really experiment with the visuals and aesthetic of 'sports' to create something both informative, yet visually appealing.
It was also clear from my research that the practices and events that sportswashing was attempting to mask were truly horrific and outrageous in equal measure. This is a topic of relevance and of importance. Sport is one of biggest industries in the world, consumed by billions, yet I assume very few people, particularity casual viewers would be aware of this somewhat hidden dark side to sporting investment. My project will be a small attempt to bring some of these issues into the light.
What form will this project take?
Sportswashing is a complex, tangled web of moving parts, and with little 'statistical data' currently available. I feel picking out key stories and moments in the middle Easts relatively short history in sporting investment and positioning it in comparison with some of their controversial behaviors and practices (the practices and events that the glamour of sport is intended to 'wash' over or away) will result in a project with elements of shock value and impact.
My intention for this project is for it to be informational at it's core. So I feel a data visual journalistic exploration of the topic would be effective in this. This will allow me to practice, expanding and explore my data visualisation skills.
Although this topic could be, and elements will be, playful, the topic of Sportswashing is a serious one, and I want my project to reflect that.
The Pudding Visual Research
For the first part of my visual research I refereed to The Pudding. - https://pudding.cool/
The Puddings tag line is "A digital publication that explains ideas debated in culture with visual essays."
Essentially this is perfect for my topic and the form I want it to take. The pudding deals with both trivial and serious topics, so I selected some examples from both themes and began to pick out elements that I liked.
Although not a 'serious' topic, the article I was most drawn to was that of the English Pub Crawl. The visuals which incorporated the map I felt were very effective. I feel if my piece was to use a map it would help bring a geographical grounding to the issue I am dealing with, but also show the complexity and reach of the middle Eastern sporting investment.
Pudding influenced Sketches
Tale Of The Tape visual research
When planning my idea of creating a journalistic, The Pudding , data vis exploration of my topic it was discussed how these visual essays are very linear, there is a beginning and end to there narrative. This lead me to think if this was truly the correct form for my Sportswashing project to take. It is an on going issue with no clear end in site, so would a piece that wasn't linear provide a more appropriate medium. This is where I began researching into the visuals of a 'tale of the tape'. Often used in combat sports like boxing and UFC, but applicable across the board of all sports which involve a competition between two individuals or teams, the tale of the tape posses one against another, exploring key stats, previous performances and honors, and there overall sporting record.
I felt that this visual may be an interesting way to juxtaposition the image of sport the UAE and Qatar invest to much money to present to the world, next to the images and events towards individuals they very much do not want in the public eye.
This would be an interactive piece that would allow the user to explore different stories of both sportswashing and human rights abuses from the UAE and Qatar. When positioned next to each other, it would allow the user to see the polished, pristine imagery of Sport for what it is, that being a reputation facade.
Tale Of The Tape Initial Sketches
Wire-framing, Mock Ups and Design Aesthetic Experimentation
I began creating some simple wire frames to try and work out how my Interactive Tale of the Tape could potentially look. Using a previous project (Concrete Data) as an example, I purposely built my wire frames around the measurements of a screen. As opposed to the previous data vis project in which I created a data vis intended for screens but was very much set up for print.
Coding my digital web app using HTML and CSS
For this piece to work best I feel it would be most effective as a live, interactive web app. A very strong prototype of this could be created using a content creator however, I feel that trying to develop a new skill whilst also producing the outcome would be a lot more beneficial for me personally. So the decision has been made to attempt to code this using HTML and CSS.
additionally in previous project I have been drawn down to the path of creating high fidelity mock-ups or prototypes of my works, with very little experimentation or work going into to creating a live version. I feel this project is a good opportunity to attempt break this pattern of work, and create something which is live and accessible online.
I began this by watching beginner tutorials and really trying to focus in what I wanted to achieve with my project. Below is a list of tutorials I watched and carried out:
HTML Crash Course
https://www.youtube.com/watch?v=UB1O30fR-EE&t=2s
CCS Crash Course
https://www.youtube.com/watch?v=yfoY53QXEnI&list=WL&index=4&t=3270s
CCS Grids Crash Course
https://www.youtube.com/watch?v=jV8B24rSN5o&t=1317s
Screen grabs of coding process
I began with crash courses on basic HTML and CSS, then with this foundation in place begin channelling my learning into CSS Grids. Below is a screen grab of CSS Grids being applied to my tale of the tape web app and the basic structure can start to be seen.
As I understand CSS grids it is a way of coding which allows you to code web page layouts far easier than previous ways of working. On the screen shot below my page is laid out using 7 blocks. The top 'Sportswashing' heading being block one, three blocks below, and then an additional three below those. These blocks can then all be targeted independently when accessing the CSS. My intention going forward is to code one screen of my Sportswashing web app to the highest fidelity I can, then add user interaction options like drop down selection menus, and hover-able graphic.s
CSC Grids and Project Evolution:
As I began to become more comfortable with CSC Grids, I began building my Tale Of the Tape. I began adding images in to add extra aspects of design that were perhaps still beyond my current skill set, and out of reach in relation to the project time scale.
I initially had issues when centering and resizing the main image of the two figures, as this took a considerable amount of time to resolve. However realizing that to they has to be tarted via the 'text-align' syntax was a simple fix and I could size them and align them appropriately.
Shaping of the page - Letting the content breath via margins and padding
Initially my project started to become quite narrow and felt squashed. I then worked on spacing out the system more. adding padding and margins, all the time whilst keeping the project responsive using the VW syntax when adding sizing elements.
The Grid In action
Below is image where I highlighted the stroke of the numerous containers within the grid. This provided an easy way to spot potential layout issues, but also gives a good example of the CSS Grid in action.
Prototype animations
Using Figma, I created some prototype animations of the Tale of the Tape Interface. The first video also shows variations in content, changing to a different pairing in the Tale of the Tape.
Design Variation
Once I was happy with the layout and sizing of the different elements of the tale of the tape, I began experimenting with design via the site CSS. I felt my project needed more dynamism, it felt a little basic and the colours did not fit with each other or the overall theme of the project. It left it all feeling a little flat.
I tried out added a size increase and colour gradient to the .hover of the statistics displayed in the centre of the scree. These are the important stats, and I felt they should hold more weight/impact in relation to other elements on the screen
Final Styling and Content Spill issues
I made the decision to strip back my Tale of Tape in terms of colour and styling. This more to a darker aesthetic was done in an attempt to better represent the theme of this issue, which is one of mistreatment and human rights abuses. I felt this stylistic move also helped to better highlight area's of the design whilst also not losing the impact of the rest of the content.
One of the issues I ran into next is shown below, as I replaced place holder text with my own content the screen began to increase in response. I needed a way to contain the contain, without losing vital detail.
I decided to employ contained scrolling to each of the content boxes, allowing a the page size to still contain the content correctly without losing any project details.
Final crit and response
In the final presentation group critique of this unit of project work, it was suggested that the Tale Of Tape needed some form on introduction. The point was raised that jumping straight into the tale of the tape without any context into what Sports washing as a process actually is, left the user with a lot of initial guess work. This is something I agree'd with and tried to adapt my project in response.
Below is a screen shot of the final layout and added intro home screen of my project.
Live Site Link
Below are the files containing the full HTML and CSS, and also a live link for this project.
Project Evaluation and Reflection
This project felt like a big risk. Having very minimal experience coding and programming, I was apprehensive to attempt to code what I felt was a really solid idea. Initially the coding process seemed daunting and little progress was made for a while, then it began to click, as I persevered with CSS grids things began to make more and more sense, leading to the begins of experimentation, rather than simply coding for the most viable project for my technical ability.
Although this project does not sit as the most aesthetically pleasing piece of work I ever carried out, and I realise there are still some design flaws on the site it's self, the site is fully coded by myself, responsive, and does although admittedly, very basically, do what I wanted my Tale Of the Tape to do. Frustratingly there is also a slight lack in content variation, this is due to time restraints and the coding learning process taking slightly longer than I envisioned, but that learning process could be considered just as important as creating further content for the Tale of the Tape.
I view this project as a big learning curve, both in the research I have carried out, which I feel is extensive and thorough, and also in my HTML and CSS coding skills. Although I do not feel that high level coding will be something I will look to seek in relation to future job prospects or further projects, I feel it has given me a good grounding and a basic knowledge of the coding process which would at allow me to speak to somebody with a good knowledge of coding without feeling completely lost.
If I was to take this project further, I would obviously attempt to code my piece to a higher fidelity, both technically and aesthetically. I feel the project has an important topic at it's core, and also a solid idea in taking what is a vast and complex issue, and making it refined and understandable.
The projects overall aim is not to contain the same amount of information I discovered whilst researching sport swashing, but to highlight the key details in order to produce feelings of shock in the user at the two very different opposing sides.