During the personal project, I made a personal portfolio in the form of a working website. The portfolio is used to show how I reached the learning outcomes, which research methods I used, the results and the conclusions. Besides the portfolio, there needs to be a reading guide for quick and easy navigation through the portfolio.
For that reason, I came up with the main research question:
How to create a scalable portfolio to present the projects to stakeholders and teachers in a visually appealing way?
During the international project, the whole class visited the Dutch Design Week and collaborated with students from Humber College, Toronto (Canada). The goal was to get inspired by the different exhibitions and come up with a creative concept for the narrative 'Products & Craft Design'.
We also travelled to Malaga (Spain) where I attended the 2-day WeWeWeb conference, where several speakers spoke and shared their UI knowledge and latest design trends with the audience.
During this project, we were put in a group of 6 advanced Media Design students. And we had to choose a project to work on, our choice was the 'Grip on Sound' project. The project aims to make PE teachers in primary and secondary schools aware of the long-term excessive noise level in gymnasiums. This leads to concentration problems, hearing loss, headaches, and even tinnitus. A previous ICT Advanced Media Design group has designed a smartwatch app to give teachers insights during lessons. It is up to us to design a mobile app that works with the smartwatch app and provides a more comprehensive insight before or after gym classes. This project is led by Dennis Kirsch and involves several groups from other ICT specialisations.
To get a clear understanding of the project, I wrote a project plan. This describes the scope, research questions with research methods and overall planning for the first 3 weeks.
To answer the main research question, the sub-questions had to be answered first. To answer the first sub-question "How can users easily navigate through the portfolio?", I researched the focus group. In combination with a literature study, I was able to conclude the different types of navigation options that could work for this target group.
In order to answer the second sub-question "How to make a portfolio scalable?", I found out more about frameworks through a literature study. Through an expert interview, I concluded that it takes too much time to learn a framework properly in one semester and therefore use Vanilla JavaScript.
To answer the third sub-question "How do I make a portfolio visually attractive?", I conducted a literature study to find out more about the latest design trends, typography and visual attractiveness. Through benchmark creation, I got the inspiration to create two different wireframes through sketching. Co-reflection gave me new ideas that were applied in a high-fidelity prototype. This prototype was tested in a usability test with people from the target group. The results of the test have revealed improvements that could be made to the design. It has also given new insights that can be added for a better user experience.
To deconstruct the portfolio website, I use the C4-Model. Through literature study and a peer review, I was able to visualise the structure at a container level 2.
To develop the portfolio, I used HTML, CSS and JavaScript to create a proof of concept. This allowed me to test whether all functions could be realised or whether another alternative had to be found.
To learn more about JavaScript animations, I followed the broken car challenge. Through tinkering, I was introduced to Vite and GSAP.
To look back at how I acted during the personal project, I wrote a reflection using the START methodology. This allows me to know what went well and what I would do differently next time to become a better media designer.
To come up with a concept together for the Common Grounds project, we came up with a concept through literature study, ideation and storytelling. We pitched this to the other groups through a video.
To come up with an idea for the narrative “Products & Craft design”, we created an inspiration wall of everything we saw during Dutch Design Week. This helped us get an insight into what everyone saw. To visualise the concept, we used a paper prototype. We pitched this concept in the form of a video, which allowed us to receive feedback.
To learn more about UI and the latest design trends, I participated in the WeWeWeb conference. Here, I heard the best, good & bad practices from various speakers. This has given me new knowledge and insights.
To get a clear understanding of the project, we wrote a project plan. This describes the scope, research questions with research methods and overall planning for the entire project, which ensures that we are on the same page as the stakeholders.
To answer the sub-question “How can the app’s UX/UI be optimised for both Apple and Android users?”, I did a trend analysis to know the latest UX/UI design trends for mobile apps to improve the user experience and put you one step ahead of competitors.
To answer the sub-question “How can we test the UX/UI of the app?”, We did a literature study to know which different UX/UI Testing Methods exist and what would be the best method to gain the most useful results.
To know which requirements should be reflected in the design, we added up a requirements list. As not all items are equally important, we used the MoSCoW method to divide up the requirements.
To answer the sub-question “How can we test the UX/UI of the app?”, I conducted an A/B test with the target audience. By using the A/B testing method, we now know which design creates the most awareness.
To present our idea to the stakeholders, we created an interactive prototype through sketching and prototyping. This allowed us to explain exactly how the app should work.
To answer the sub-question "How can we ensure that the app maintains a good UX?", I conducted a usability test. The usability testing is needed to validate the design.
To make good progress, we did a scrum stand-up with the group daily, and with the stakeholders every other week. As a result, we knew exactly what everyone was working on and where extra help was needed.
To effectively reflect on our work and project progress, we held retrospectives and peer feedback sessions at the end of each sprint. This has ensured that I know what goes well and what can be improved next time.
To present our project, we did an expo of our proof of concept for visitors at Innovation Insights to experience what it feels like to be in a room with a lot of noise pollution just like the gym teachers also experience. We did this by playing a loud sound of playing children in a gym hall and showing a live dB meter with an icon where decibel levels are equal.
To transfer the project in an organised way, we have prepared an advisory report. This contains the research methods we used, results we found, conclusions drawn and the follow-up steps to be taken to reach the next TRL.
To look back at how I acted during the personal project, I wrote a reflection using the START methodology. This allows me to know what went well and what I would do differently next time to become a better media designer.
During this project, I did a lot of research to make better design choices. The planning of the project plan was well pursued and therefore I am very satisfied with the result. I am glad that the research has made me decide not to use a framework for now, which has allowed me to broaden my knowledge of Javascript first. The use of JSON during this project ensured clarity and less code. But it also brought limitations. That's why I want to look for other alternatives in the future. There are still points for improvement. But overall, I am very satisfied with how the project went.
Reflection Personal Project, for a more detailed reflection.
During the international projects, I had a short time to get to know the international students, which we immediately started working with. The communication was easy, and we were able to create a nice concept in a short amount of time.
Throughout this project, I worked independently and collaboratively with several people in the group to design a smartphone app. Working with scrum allowed us to make good progress and everything was finished on time and a satisfied stakeholder. Unfortunately, it was noticeable though that towards the end, the group became less and less motivated this was, in my opinion, because we only had to deliver a design for the app. Despite this, I learned a lot in the field of Figma in which I also wanted to improve before starting my graduation internship.
Reflection Group Project, for a more detailed reflection.