Project 4

Kick-off

Project 4 started off with an introductory class welcoming us to the project and the purpose of it, as well as the opportunity to ask questions. It is aimed at engaging young adults between the ages of 20 and 25 to become more involved in charitable or volunteer work through digital products and, of course, more pracfical, detailed information.

As a group, we went to sit in a different area to talk about how we understood the project, fill out the team contract, risk analysis, interest analysis, and the SCRUM board. Here we also divided up the tasks among the group to see who would take on the roles of group leader, scrum master, etc. 

We knew that this was going to be a very challenging project as it not only involved coding, which many of us did not feel so confident about, but also an academic report, content creation, prototypes, etc. To tackle this, we also made a project plan, in which we made a vague plan of all the important dates and a general plan of the day for what we wanted to achieve and future plans.

Brainstorming Organisations

To start off the actual project, we did some individual brainstorming and research on which organisation we would like to work with on Project 4. I first started off with organisations I personally have worked with or know that are popular with people my age. I settled on 3 types of organisations (Red Cross, Playground of Hope, and Girl talk), two of which are active in Denmark and one of which was active back home in Japan. However, I thought out of the three, Girl talk seemed most relevant as it was situated in Denmark and has a great social media presence.

Other members of my group also presented their ideas, and we discussed how they could fit into our project 4. We dismissed Girl talk as they were already quite popular amongst young adults, they had good exposure on their media platforms, and there wasn’t much for us to do. After some discussion, we agreed that we would do several rounds of voting to find out which organisation we would work further with. We had 7 organisations to choose from, and at the end we settled with Game, an NGO striving to change society through youth-led street sports and culture.

We also discussed a little about what kind of media outlet we wanted to create. An app was one of our main contenders, as young adults typically use apps because sometimes websites just don’t do the job. However, we don’t really know how to create an app, so we opted for a responsive website instead.

Understanding Users

We don’t have many lessons this semester, but when we do have lessons, it is to help us with our project. ‘Understand Users’ was one of the first lessons we had to help us understand the users in different ways and at different depths. As practice, we created user matrixes, scenarios, and stories about the different groups of people involved or potentially involved with the game. We were able to dive deeper into the game’s demographics, tasks, stories, and scenarios.

On the same day we had this lesson, there was also the first PM meeting, which Rama and I attended. We gained insight into the progress and processes of other groups. Some groups have already started writing their academic reports, while others are nearly done testing. Here we realised we were quite behind, and we both agreed we needed to increase the pace of our process and plan and distribute the work accordingly.

Academic Report

Having understood that we were behind, we met online the next day to discuss a plan on how to move forward. We knew we needed to start on the academic report ASAP, so we split up the different tasks amongst the group. However, we couldn’t move forward if we didn’t have a concrete problem formula and sub-questions.

We were able to choose which area we wanted to work on for the academic report, such as primarily abstract, 5P approach, Budskabs design, content plan, and the organisation of the appendix. We also plan to create a prototype and some content soon so we can present it and get feedback on it. We all knew that we didn’t have the time to sit down together and write the academic report and that splitting the tasks and doing them individually would be most effective.

We also brainstormed questions, created a questionnaire, and sent it out on numerous social media platforms to collect data, which we will analyse to be used in our academic report. 

Halfway through our report-writing phase, we decided to start from scratch, as we felt as a group we all had different interpretations. We decided to wait until we had a meeting with our mentor to get clearer guidance and clarification. When the day came, he gave us the guidance we needed, but we also learned that the report wasn’t actually based on the product we were creating but on the organisation itself as an analysis and little on how we can create a product or content. He also advised us that if we were ever stuck and didn’t have the opportunity to ask a mentor, we should just stick with the most logical interpretation and go with it, especially when we didn’t have the time.

Once we got the answers we needed, we went back to working hard individually on our tasks in the academic report and asking each other for help when needed. We also analysed the data we got from our questionnaire, but we didn’t really use the processed data directly in our report. 

I struggled personally to connect the methods with the organisations, as most of the time while I was writing, I would stray back to our digital product. But creating an outline for myself to follow made it easier for me to follow and kept the text focused on the organisation. It also helped that I had my team members read my work to make sure that my text was on the right page.

We struggled with the academic report as we wrote way too much, and I think we did so because we wanted to make sure we explained everything to the best of our ability. Two of our team members also dedicated 12 hours to making the academic report on InDesign, so we were able to hand it in on time.

Questionnaire + Visual Communications

While the questionnaire was in the making, other team members worked on creating lo-fi prototypes of the website, both on desktop and mobile versions, style tiles, and a mood board in preparation for our visual communication. We presented all these things for our spirit pitch.

We mostly received positive feedback, and it was good to know we were on the right track, but we were asked a lot of questions based on design choices, which we didn’t really know how to argue for and for which we needed to improve. 

The Coding and Content Phase

As soon as we hit the coding phase, we all sort of freaked out, as a lot of us didn’t feel confident in our coding skills. But we all knew we needed to organise ourselves and the tasks in order for the process to go smoothly. 

Alexandra took on the task of creating the basic HTML and CSS framework for the website, while I focused on finalising the videos for TikTok. Merveille and Rama also focused on finalising the prototype, and Cecilie focused on the map masks on one of the subpages. 

My work more specifically with creating content for social media was inspired from their own social media platforms. I realised they weren’t really active that much on their platforms which I thought was odd because its a youth-led organisation, and would’ve just expected more activity on their social media. However the content they did post seem out-dated or just too repetitive. Though in some cases their Tiktok videos followed some of the new trends, but the videos on other platforms were the same.

I liked the idea that they followed the trend on Tiktok because most of the time young adults discover or follow trends either through Tiktok or Instagram. I took this trend inspiration from a Tiktok sound that was currently trending on my own for you page. which was a British Rap which included lots of sport terminology. I decided to combine the music and royalty free videos of sports to create a small advert for their Tiktok page.

I also initially decided to make an animation in which I created a storyboard. However the more time I put into it the more I realised that I do not have the resources or time to make the animation I wanted. I wanted a high quality animation or stock footage that matched my storyboard, but the problem with it was that the storyboard was too specific for stock footage.

The final animation I did create looked like a complete joke, in which it seemed that is was a parody of some sort. I showed my video to my boyfriend and he mentioned that the video is so bad that its good, and its similar to how some videos on tiktok are baited to draw people in because maybe they are bad, playing dumb, weird actions, etc. Regardless it still draws attention but it wasn’t en’t the sort of attention we needed for Game.

With this head start Alexandra was able to give us, Merveille and Rama created a brainstorm list of a couple of Javascript elements we can choose to implement individually, and Alexandra made a small list of the HTML and CSS that needed to be completed. 

I took on the role of implementing the game logo on the navigation bar, their slogan on the landing page, and aligning the icons in the container under the landing page. I was able to do these relatively easy tasks, but two problems I encountered were locating the image. For some reason, I could directly locate the image through src=‘Game-Logo’ but rather through /.img. The image would also bleed to the navigation hamburger bar, which at the moment we do not know how to fix. I don’t know why I had to do this, and I should probably learn why for the exam. Another problem I ran into was the responsiveness of the icons. They were responsive the smaller the viewport got, but when you enlarged it, the images would bleed into the other container. Luckily,  Alexandra was able to fix it for me, which I am forever grateful for. 

In terms of javascript, I went for a similar element I did in the last project: a toggle button. But instead of toggling between light and dark modes, it would switch between English and Danish. The current problem I am facing is that when I hit the toggle button in Danish, all text disappears. However,  after lots of experimentation and research, I still can’t figure out how to fix it and am waiting for our coding mentor to help when he is available. 

One of the major problems I ran into while coding was the actual toggle button functioning. Every time I pressed the Danish button all the text just disappeared and I was so confused. I put my code into ChatGPT to see what I was doing wrong and I followed the advice and testing they suggested but nothing worked. I knew that Thomas had mentoring hours the week we had to hand in the whole project so I made sure that I woke up early to be the first one in line to receive help.

I presented him my problem and the things I have done to try and solve it and of course show him my code and the website under the inspect function. He took me step by step of his through process on how to solve the problem, and much of it was trial and error. My problem was quite vague in the beginning as the inspect function showed no problems in relation to my code.

One of the main key take aways is to make sure whatever is in the parenthesis need to match to the functions parenthesis, or just in general having input in them and not notes such as ‘change language’. Another one was to make use of console.log and alerts to test. I completely forgot about alerts, so Thomas guided me to put them in instead of console.log to ensure that a toggle is actually registering. The first couple rounds the alert could not register because no value was given to it, so therefore I added ‘en'(English) or ‘da'(Danish) in the parenthesis. Another important one was actually referencing to the correct file. I had two files name the same however they were in different files (Javascript & Projekt.4). But finally the most important fundamental rule was that javascript is case sensitive. The last part the prevented from my code from functioning was the capitalisation in of the the ID tags, the simple fix allowed everything else to go smoothly.

When I looked at my code and sat down to make sure I understood each line of code I wrote I decided I was ready to film my video in which I explain what it is. To prepare for this I made a presentation for myself going through the PENSUM and describing which part of my code had that PENSUM and what purpose it had. I also made some calculation on how much time I had for each slide and it came out to around 30 seconds each. I practised a couple times before recording and here is the final product:

When our groups JS deadline hit I realised that a bunch of new errors came in the inspector function. This wasn’t the case the day prior and I made the choice not to touch it because it highlights error in a specific part of my code that my JS teacher helped me with and I just made an educational guess that when other people changed their code it also messed up with how mine goes, though my toggle function still function 100%.

This made me realise that we really need to be concrete and organised on our process of coding. I had 100% of my code written the first weekend when we had to finish our html and css because I wanted to give myself the time to fix the errors if any should come up which they did. I spent the time doing research and trial and error to fix them but I ultimately went to my coding teacher for help. Giving myself good time allowed to me understand where I went wrong but also understand how I can do better next time.

In terms of working as a group, it was quite frustrating with the code. Firstly our Github was acting very weird due to several of us working on the same document and same line at the same time and Github could not register it and had major conflicts resulting in lines of code to be deleted.

PDF Document

I was assigned specific tasks to complete in relation to the PDF document we have to hand in. My responsibilities were analysing the website in relation to CRAP principles, the log-book with visual process, user-flow, and copywriting.

CRAP Principles

I knew instantly what to do with CRAP principles and how to present it. In my first exam project I made a presentation with colour coded before and after on how I can improve my website I created, so Im taking those characteristics and implementing them in a different way.

The before would be the original website created by Game and the after would be our improvement and solutions. I first wrote on a piece of paper each points I wanted to make. Take for example this one I did for CONTRAST:

According to each point I made a slide on google slides to address each point with a before and after and some commentary.

Logbook with Visual Process

At first I was not the one responsible for creating entries in the logbook, however one of team members just kind of forgot to do it? So I took over.

After every meeting we had I wrote down what happened pend and what we discussed either right after or in the evening and if not I make notes. However one of the things we sort of sucked at doing was taking photos of us working. We do have actual evidence and screenshots of our progress but not so much of us together working on the project. I always tried to remind myself to take random photos when we were together.

User-flow

With all honesty I had to look up in my notes about user-flow for a little refresher.

Based on my notes and a little refresher I opened up our website on XD because we have more pages there than on the actual coded website and made the following:

Copywriting

In terms of copywriting I just took a screen shot of different areas I made copy write and my team members created a lot. I made the the copyright for the social media posts on TikTok and instagram while my team mates did the ones on the website. All of the copywriting was based on our research and analysis in the academic report in which we followed the 5P approach, Budskabs design, and Content Sweet Spot.

Overall Reflection

This project has been extremely challenging in so many ways not only with personal skills I struggle with such as coding but also team work and understanding. This project 4 has taught me that planning, communication, and time management are key to ensure deadlines are met and mis-communication is avoided. I was fortunate enough to work with some people in my group who upheld doing their tasks on time as I do because it ensures the whole process runs more smoothly, but there were many times I felt very frustrated because it seemed that other group members to not hold themselves accountable for the tasks they do which holds us back.

One of the most important things to take away to communication. To talk about things you don’ understand, to gain common ground on how we interpret certain things, how to tackle different problems etc. I made sure to ask for help when I needed it, both from friends and the teacher available. Take for example with the writing of the academic report, we all had different understanding in how to write it. I had the perspective we should write as if we were presenting our product, while had another perspective on analysing the organisation itself. We did reach a common ground at the end with the help of a teacher, but these conversations are important because we cannot assume what other people think.

Another thing I wanted to touch on was surrounding yourself with people who have similar work ethics and goals as you. At times throughout this project I felt exhausted because some people just do not want to do their part of their work but ride on the backs of others to achieve good results. I am not saying I am a perfect student with perfect grades, but I do work hard towards my final grade because I want to learn as much as I can and put it into practise. I know that in the real world people like this will always exist and that I can’t do anything about it, but I also don’t want to be the one reminding them all the time of their tasks and their responsibilities because thats not my job. If they don’t want to do it then fair enough, but they shouldn’t be dragging everyone else down who has put in so much work and effort in the project.

I learnt so many useful skills not only in relation to coding but also with time management. We used MONDAY first and switched to Asana but platforms like that to manage and organise things so much simpler and make life and project easier so I would for sure want to implement them in future projects.

Presentation

We finally had our last portion of project 4 which was to present our solution to the client, in this case Rasmus. We met the day prior to make the presentation and figure out who will take which section and practise.

Naturally I took our content we made for social media as I was the one primarily making it and therefore think I can best explain the process and foundation of the posts.

I based my quick speech over what I wrote in the academic report and my creative process while making it and put it on note cards. Usually I do not need cards to help me remember what to say, but since I was presenting in Danish, which I haven’t gotten comfortable with I was very nervous.

You could hear very clearly that I was very nervous, and I think the primary reason for that is due to one word ‘beskrivelse’. The night prior I was practising how to say it but I just can’t and kept thinking about tit over and over again.

When we actually finished the presentation, we received very good feedback and not so many questions compared to the other groups. Rasmus told us that the way we present our information and product is efficient and easy and that we could be followed as an example which was very nice to hear.