LEARNING OUTCOMES

LEARNING OUTCOMES 3

You present the successive iterations of your creative process, and the connections between them, of your methodically substantiated, iterative design and development process.

READING GUIDE FIGMA -> INDESIGN

I got feedback from Josh that using Figma to create my reading guide was not good. It was hard to navigate trough since it was a one-page. I agreed with his feedback and I decided to recreate it in Adobe Indesign.

Gitwiki about reading guide iterations

Summary of the explanation

I recommend that you view the detailed documentation since on there there is an image of the before and after side by side between versions with feedback and why it is an improvement.

Since I display the feedback that I got from my teacher with a screenshot, it makes it easier to simply view the detailed documentation.

CONTENT ON PORTFOLIO

After validating my media products and getting feedback, I changed and improved my portfolio design multiple times, then got feedback again and the proces repeated. In my opinion there were no major changes and not a lot since it is the first couple of weeks but I am still happy with the improvements my prototype has gotten.

Gitwiki about content on portfolio iterations

Summary of the explanation

I recommend that you view the detailed documentation since on there there is an image of the before and after side by side between versions with feedback and why it is an improvement.

Since I display the feedback that I got from my teacher with a screenshot, it makes it easier to simply view the detailed documentation.

PERSONAL PORTFOLIO

After validating my media products and getting feedback, I changed and improved my portfolio design multiple times, then got feedback again and the proces repeated. In my opinion there were no major changes and not a lot since it is the first couple of weeks but I am still happy with the improvements my prototype has gotten.

Gitwiki about portfolio iterations

Summary of the explanation

I recommend that you view the detailed documentation since on there there is an image of the before and after side by side between versions with feedback and why it is an improvement.

Link Between Learning Outcomes (LO) and What I Did:

You present the successive iterations of your creative process...

First Successive Iteration

The feedback that I got from Josh was:

  • Make the blue waves background darker, put an extra layer with opacity on it.
  • Add a "read more" button after each project.
  • Finish the footer.
  • Layout, colors, way of showing work was all good.
  • Change email to my name.fontysict mail.

Before and After: Is on the Gitwiki.

After Feedback:

  • Made the blue waves background darker, put an extra layer with opacity on it.
  • Finished the footer.
  • Changed the email to school email.

Second Successive Iteration

The feedback that I got was:

  • Stand and Dirk told me that the percentages on the skills page have to change and it would be better if it were things that I like, enjoy, or what I could improve on.
  • Make it clear for myself what I want in the project slider.
  • Explain clearly on the project what I did and how I show the learning outcomes.

Before and After: Is on the Gitwiki.

After Feedback:

  • Percentages have changed into things I enjoy and things I want to improve on.
  • Finished the project section.
  • Finished the learning outcomes page.

ITERATIONS BRANDGUIDE

Me and Minh worked on the brand guidelines. We have showed our work to the teachers a couple of times to validate it we got positive iterations after feedback. We wanted to make the guidelines more attractive and fun so that It would help us with our identity and pitching it later on the the client.

Gitwiki about brand guide iterations PDF inside Github

Summary of the explanation

I recommend that you view the detailed documentation since on there there is an image of the before and after side by side between versions with feedback and why it is an improvement.

Link Between Learning Outcomes (LO) and What I Did:

You present the successive iterations of your creative process...

First Successive Iteration

The feedback that I got was:

  • Colors were too business-like, which isn’t what our studio represents.
  • Add mock-ups to give life to our company.
  • Try to make the brand guide more fun and eye-catching since this is what our brand stands for.

Before and After is on the gitwiki

After Feedback:

  • Colors were changed to a different tint and backgrounds were updated.
  • Added mock-ups that gave off a business-like vibe.
  • Changed background, mock-ups, and text effects to make it more fun.

Second Successive Iteration

The feedback that I got from Dirk was:

  • The title on every page should be like on the first page with multiple layers and colors.
  • Remove the puzzle pieces from the title text.
  • Add more fun mock-ups. (Dirk recommended a cap, a mug, and a billboard/poster.)

Before and After is on the gitwiki

After Feedback:

  • The title on every page has the multiple layers and colors effect.
  • Removed the puzzle pieces from the titles.
  • Added more fun mock-ups, which I made: a mug, cap, and billboard poster.

LOGO ITERATIONS

It was my task to create a logo for our game. I went looking for inspiration and I searched on the web which animal represents upcycling and a hermitcrab came out on top. I tought it would be fun to have the crab have a clothing piece as a shell since we have a upcycling game with clothes. I used AI for inspiration, made a moodboard, sketched, did an A/B test and made it in Illustrator.

Gitwiki about the logo iterations

Summary of the explanation

I recommend that you view the detailed documentation since on there there is an image of the before and after side by side between versions with feedback and why it is an improvement.

Link Between Learning Outcomes (LO) and What I Did:

You present the successive iterations of your creative process...

First Successive Iteration

The feedback that I got was:

  • I should remove the whiskers and the socket thingy so it becomes more simple and because the thingy on the right does not have meaning so it can be left out.

Before and After: (Details on the Gitwiki)

After Feedback:

  • Removed the whiskers and the socket thingy.

Improvement Because:

  • Image is more clear and simpler, which can improve readability.
  • Whiskers and socket thingy were unnecessary and didn't have a function, so they can be left out.

Second Successive Iteration

The feedback that I got from Dirk was:

  • Don't make it too childish since our target audience is young teenagers.
  • Keep the same style as the game.

Before and After: (Details on the Gitwiki)

After Feedback:

  • Adjusted the design to avoid being too childish while targeting young teenagers.
  • Maintained the same style as the game for consistency.

Improvement Because:

  • Our game does not have a black background but a darker tint of the color next to it, so the same style improves the overall consistency in styling.

PASSION PROJECT

In this section I explain and show a side by side comparison of iterations that I made based on feedback from my stakeholder. I also explain why the change is an improvement.

This fits the following learning outcomes: LO3.

Gitwiki about lo3

Summary of the explanation

I recommend that you view the detailed documentation since on there there is an image of the before and after side by side between versions with feedback and why it is an improvement.

Since I show the feedback that I got with screenshots from my stakeholder as well as a side by side comparision between versions, you should really visit the detailed documentation for the best experience.

CODE AND README ITERATIONS

Josh gave me really good feedback on LO2. I had at first comments used as explanation and for stucture. My readMe was a txt file at first and after feedback I changed my comments into an explanations and I made the Readme in Markdown. For the readMe I got inspiration from open source readme's on github and I searched on google how to make it look good.

Gitwiki about code iterations Commits ReadMe

Summary of the explanation

I recommend that you view the detailed documentation since on there there is an image of the before and after side by side between versions with feedback and why it is an improvement.

Link Between Learning Outcomes (LO) and What I Did:

You present the successive iterations of your creative process...

Code Successive Iteration

The feedback that I got was:

  • "Use comments not just for structure but also add an explanation of what it does, is it responsive etc."

Before and After: (Details on the Gitwiki)

After Feedback:

  • Comments now explain what the code does and avoid being just about the structure.

ReadMe Successive Iteration

The feedback that I got was:

  • "List of requirements (can be no further requirements needed or needs to load HTML pages, CSS, and JS)"
  • "Everything that's important for the user to get the project running."
  • "Take inspiration from GitHub open source."

Before and After: (Details on the Gitwiki)

After Feedback:

  • Made it into a markdown file instead of TXT.
  • Added requirements and took inspiration from online sources (markdown, styling, etc.).

Improvement Because:

  • More clear and unique format.
  • Improved readability because of markdown.
  • User now knows how to get the project running on their system.

RESEARCH METHODS & AREAS

I defined a general guideline of which research methods and areas that we will be doing. Inside the research plan you can find which research areas and methods we will cover in each phase of the Double Diamond. We decided that we would be able to change this plan so we can be more flexible.

Gitwiki about research plan

Summary of the explanation

Discover Phase:

Research Areas:

  • User research: Who are the users? What are their needs?
  • Market research: Who are the competitors, what are the market trends?
  • Problem discovery: What’s the root cause of the problem?

Research Methods:

  • Interviews/surveys: To gain insights from users.
  • Personas: Based on interview/survey results.
  • Primary research: Conduct new research.
  • Secondary research: Conduct already done research.
  • User observation: Observe users in fast fashion shops.
  • Brainstorming: We did brain writing and lotus blossom.

Define Phase:

Research Areas:

  • Problem framing: Converge data into a clear problem statement.
  • User needs: Define and prioritize user needs.
  • Validate assumptions: Make sure our assumptions align with user needs.

Research Methods:

  • Journey mapping: Which steps do our users take to accomplish a goal?
  • SWOT analysis: Define strengths, weaknesses, opportunities, and threats.
  • Co-creation: Sit down with the user and collaborate to guide the design process.

Develop Phase:

Research Areas:

  • Ideate and create a concept.
  • Prototyping: Create low to high fidelity prototypes.
  • Usability testing: Test the prototypes for feedback.
  • Iterate and improve: Make iterations based on feedback.

Research Methods:

  • Usability testing: Test prototypes.
  • Prototyping: Create prototypes for testing.
  • A/B testing: Test two different versions and compare results.

Deliver Phase:

Research Areas:

  • Track metrics of success and key performance indicators (KPIs): Measure project outcomes.
  • Refinement and validation: Fine-tune based on feedback and testing.

Research Methods:

  • Pitching to the client: Presenting the final solution to the client.
  • Usability testing: Continue testing for final improvements.
  • Code review: Review code for quality and optimization.