LO1 - Conceptualize, design, and develop interactive media products
For this learning Outcome i will show you how i created engaging concepts and tanslated them into interactive valitdated media produsc by applyinguser centred design principles, visual design techniques and by exploring megering trends and developments in media, design and technoligies.
HoloSports
For the fast forward week we made Holo Sports, for this assignment I had to create something that will be revolutionary in the future. At first we were struggling to pick between the sports, food and entertainment category. So we looked at which one we liked the most and this was the sports category.
Discover
With the sports category in mind I started doing Reserach on current problems in sports or things that can help an athlete achieve better results. I looked at google scholar research for problems in sports. But I didn't really find anything.
But then I thought of using AI and Holograms in sports. The idea is that you can race against your hologram. This will keep you motivated to continuously break your own records. And you can race against other athletes as well to see if you can beat the best of the best.
Trend Analysis
With the sports category in mind, I started doing research on current problems in sports or things that can help an athlete achieve better results. I used trend analysis for this project to identify upcoming technologies that are potentially happening in the future of sports. By looking at upcoming advancements I was able to find the integration of AI and holo tech as an upcoming trend. So, then I could use these studies in our own project, such as maintaining athlete motivation and improving training efficiency. Trend analysis provided the base for a concept that is not only futuristic but also grounded in the potential of current and upcoming technological trends.
Define
The idea behind Holo Sports is to create a training tool where you can race against a hologram of yourself. This solution stimulates athletes to perform better to break their own records, and with the holograms they can see their own progress improving. By seeing their personal best in a hologram, athletes can look at ways to perform even better. Holo Sports offers an opportunity to compete against holograms of other athletes. For example, an athlete can run against the hologram of Usain Bolt. This way they can learn from the super athletes and improve their own tactics as well.
Develop & Deliver
To bring this vision to life, we started by sketching the concept to explore how the idea could be used best practically. Once the design was done, I used the laser cutter available in the makerspace to create the track. This went very well, and we were quite fast at making the whole track with hologram projectors. The result is a prototype that shows the concept’s functionality and how the idea is used in sports training. It is a visual of how holo sports can improve the whole sports training program. Here you can see the final research document.
Portfolio
Here I will showcase the proces of my portfolio. How I made all the design choisec and who i created this website. I will also explain what i learned from making this portfolio.
Gathering inspiration
When I began designing my portfolio, I wanted to create something that shows who I am, and I wanted it to give off a professional vibe. To start the process, I explored different websites to find elements that I liked. Among the many sites I visited, two stood out as particularly inspiring: PRISM and Franco Bollimonti Lessini. If you want to read more about my inspiration you can read it here.
Choosing my Colors
Next, I chose colours for my website. Picking the right colours is important because they can make people feel different things when they look at my work. Here you see the colors I picked and why i picked them.
Designing the layout
I started designing my portfolio in a program called Figma. At first, I just made a rough design of where everything would go. I showed it to my teacher for feedback. They told me it was a good start, but I should focus on the structure for now because I didn’t have all my content ready. That made sense, so I kept it simple.
When I shared my design with another teacher, Dirk,
he gave me a helpful tip. He said,
“You should start with a wireframe.”
(feedpulse 2)
A wireframe is like a simple sketch
of your website that shows how people will move through it.
This helps you focus on the layout before adding
colours and details.
Making a wireframe
To follow Dirk’s advice, I made a wireframe on paper first. Drawing it on paper was fun and let me try different ideas quickly. I could move things around, erase parts I didn’t like, and find the best way to organise my website. It was like solving a puzzle! Once I was happy with my paper version, I updated my design in Figma to match. It felt much better now that I had thought about how people would use my site.
Solaria Design
For the client project we had to create a studio, so we created Solaria Design. We had to create a logo, a brand story, brand guide and a Video. Below i will show you what and how we created Solaria Design.
Brand
For our brand we needed to create a brand story, so my team mates and i started writing down our core values. We put them on a board and started brainstorming about what we wanted to do with our brand. We saw soon that we are all adventurous and we love to explore the world. So we came up with the idea of Solaria Design, a studio that finds and explores people spark.
Logo
After we had our brand story I started with the logo. I wanted to make a logo that represented all of our core values. because we all like to explore i wanted to something with landscapes, like mountains or the sea. These are all things you see when you go exploring. Then I made a figma and finalised the logo in illustrator. If you want to read more about my logo process you can check it out Here.
Brand Guide
For the brand guide one of the group members made the First Version of the brand guide then we asked feedback on this. Created the second version where the feedback is incorporated. The first version was created in adobe express; my group member made the brand guide on vertical document.
Feedback
We asked for feedback from dirk and told us that he liked the design but that we should make the brand guide in adobe InDesign to keep the logo on the same position in every page. He also had the idea to make the brand guide horizontally because this would go better with our design style.
On the First iteration of the brand guide, I made dirks ideas come to life with adobe InDesign, it works great for making a sort of template (parent pages) to keep the consistency in every page. For this I also added the Logo do's and don'ts.
Iteration & Final
For this Feedback dirk Told me to make the do’s and don'ts of the logo’s clearer. He told me for example to add red crosses to make it clear that the user really should not use those. So I added the red crosses and made the do’s and don'ts more clear in the Second/final iteration.
Video
For the video I came up with the idea of our group standing in a space ship and we are flying through space. We are looking for the spark of people. in the video we say who we are and what we do. We also show our logo and stickers. We made the video in the video lab at fontys R10. For the video in the videolab we used the pixel playground for wich i made the 3d enviroment. In unreal engine i made the space ship were we would be standing. Video Process
Reflect
I had a lot of fun making the video, but I also had struggles. For example I didn't have a storyboard so I didn't know what to film. and I didn't have a really clear vision of what we wanted to make. Overall I am really proud of the result.
CBR - Partout
For the Client project we got our preference, of all the clients. We had to watch several presentations of projects we could do, and one of those was the CBR project. I like this project the most because when I first heard it, I liked that it was about the UX, and I really like to do user tests and make seamless website experiences.
Target Audience Report
In this part i will tell you how i created a target audience report and, what we learned from this. in this document you will find the target audience with their lifestyle, way of thinking and what they like to do in their free time.
Debrief
After we got the briefing from Partout I made a debrief to get all the information in one document. And sent it to the client to check in if our thoughts about the assignments matched. The client reacted that the debrief was good and he had the same idea about the assignment. Here is a link to the Partout presentation debrief. When we got the Idea of what the assignment was, we started doing research and asked ourselves “what is the real problem that drives students don’t pass the exam.”
When we got the Idea of what the assignment was, we started doing research and asked ourselves “what is the real problem that drives students don’t pass the exam.” We started doing research, for the research I made a market analysis and made a survey for the target audience.
Market analysis
I made the market analyis because it was important to know what the competitors are doing. And what the Keypoints of the CBR are. In the market analysis I wrote down what the most important things are that we must process into our decisions when making content for the CBR. Because CBR is a government company it was a bit harder to make a detailed analysis. This is because there weren't many similar companies where I could relate to.
Feedback
Good analysis, check with the other cbr group on the competitive analysis to get a good view of how they made it. A competitive analysis would be useful to get a real grip at what other companies or countries are doing to the problems CBR are facing.
Survey
For the survey I made several questions in tally. so, and got 27 responses to the survey. With this information we could pursue a problem definition, and we now have a good look at what the problem is. It is now easier to find a helpful solution.
Feedback
I asked penny for feedback on the survey questions and she told me that I should divide the theoretical exam questions from the practical question since these are totally different cases. And that the practical exam can be influenced by the theoretical exam.
Reflection
For the next survey I think it would be better to stick to google docs although it has some limitations regarding the logic of the survey. Google forms have more export capabilities and is a lot more structured to find the right answer.
Creating the concept
For the Concept of the project we all had different ideas. And We had to make a concept that was feasible for the client. So we did some brainstorming and came up with a concept that everyone liked and was with the target audience in mind. you can find our concept here.
Website Design
When we had a clear concept, we started creating a desktop website design. Figma. In the picture you see the design I made of the website design. I used a grid to get a more logical structure on the website. Then I added the content in a sort of timeline, this because then it is easy to read as you follow the step-by-step instructions and along as you scroll you get the sider that scrolls with you. This will result in the way you can access links that come up in the step-by-step instructions. You can read more about the design process here.
Mobile Design
For the concept our objective was to make a mobile wpa, so we needed a mobile design as well. This mobile design is a bit different from the desktop design. the navbar is at the bottom and there are some different changes. you can read more about the mobile design here.