LEARNING OUTCOMES

LEARNING OUTCOMES 1

You create engaging concepts and translate them into interactive validated media products by applying user-centered design principles, visual design techniques and by exploring emerging trends and developments in media, design and technologies.

CONCEPT DOCUMENT

We split up the concept document trough our group of 7 and I had to write information about the Target Group, Wrote the research question and made a summary of the survey findings.

Gitwiki about the concept document

Concept document and summary
Concept-Document

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

...applying user-centered design principles, visual design techniques...

Understanding user needs for user-centered design: The survey provided data on target audience behaviors, motivations, and situations. This insight is key to shaping the concept and making design choices that align with user preferences. For example, if users are willing to pay more for sustainable fashion if it’s cheaper than fast fashion, we might implement a discount or reward system to respond to their needs.

Based on the answers, we can identify the target audience’s preferences: If 90% of the target audience is female, we could tailor the design to appeal to that demographic. However, if the split is close to 50/50, it’s beneficial to incorporate both male and female preferences in the design.

PORTFOLIO WEBSITE

I made sure to show my work to the teachers and validated it and created iterations based on feedback. I made sure to apply UCD principles to ensure an engaging and user-friendly design. After testing and doing card sorting I managed to spot an error in my design and improved it.

Gitwiki about the portfolio

Summary of the explanation

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

Exploring Emerging Design Trends:

I researched popular designs on Pinterest and found gradients and bold text to be an engaging trend. Inspired by this style, I chose a blue-to-black gradient with bold white text. After feedback highlighted readability issues, I improved text contrast by dimming the background.

User-Centered Design Principles:

  • Consistency: Uniform layout across all pages.
  • Plain Language: Short, clear explanations for easy understanding.
  • Reduce User Effort: Added intuitive buttons with icons for navigation to Gitwiki and Figma.
  • Provide Feedback: Interactive hover effects on clickable elements.
  • Simplify Navigation: Enhanced navigation by adjusting buttons and the footer.

Visual Design Techniques:

  • Color Theory: Blue conveys trust and calmness, helping users focus.
  • Typography Hierarchy: Bold titles guide attention; lighter body text improves readability.
  • White Space: Added margins for better readability and a cleaner look.
  • Contrast & Emphasis: Dimmed backgrounds to make white text stand out.

BRAND GUIDE

Before choosing our client, we had to create a brand identity for our studio. After brainstorming with sames and voting, we went with UXYNERGY. We recieved feedback on our name that people could read it our as UXY. Sadly, there is already a media company with that name, so we kept it as a fun nickname.

Me and Minh worked together on the brand guidelines. Inside the PDF you can find our studio colors, typogrophy, our icons and way of using our logo as well as mockups to visualize our brand in the real world.

Gitwiki about the brand guide Brandguide PDF

Summary of the explanation

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

You create engaging concepts and translate them into interactive validated media products:

What makes the brand guide engaging, useful and/or satisfying? And validation:

Our brand guide is attractive because we use a well-thought-out color scheme, which is bright and playful. The typography has a unique multi-layered, colorful text effect on each title, making the guide pop more.

Validating through testing: Minh and I conducted an informal A/B test by showing two versions of the brand guide and color schemes to teachers and students to gather feedback.

Visual Consistency: We ensured the design remained cohesive with consistent fonts, colors, and logos across all materials, like our brand pitch video, matching the brand identity.

UX Decisions: Our brand guide is easy to navigate, readable, and aligns with our brand personality, keeping consistent design elements like the title text effect to improve user satisfaction.

LOGO FASHION GAME

I had to create a logo for our game. I made a moodboard with images I found on Pinterest and using AI. Made a lot of skectes with testing different ideas. And did A/B testing to ensure that the logo was engaging and validated by our target audience.

Gitwiki about the logo process

Summary of the explanation

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

You create engaging concepts and translate them into interactive validated media products:

What makes the logo engaging, useful and/or satisfying? And validation: The logo has a unique story behind it, making it meaningful for the intended purpose. It has a 2D, simple, and fun design, which we determined best suits our younger target audience through research.

Validating through Testing: I performed A/B testing with two logo versions to see how our target audience felt about each design.

How I Conducted the A/B Test:

  • Target Audience: I tested with people aged 15-24, including friends, students, and family members, all within this age range.
  • Groups: Group A and B had a similar age range, each representing a mix of individuals from the target audience.
  • Test Strategy: I presented Group A with one sketch and Group B with the other. The participants were asked to share their feelings, describe the sketch, guess its purpose, and rate its visual appeal.
  • Outcome: The goal was to identify which logo was better for further development. Although the results were close, the feedback indicated which design was the most engaging.

Was it a success? Yes, although the difference was not huge, the results were helpful in identifying the more effective logo for the game.

...exploring emerging trends and developments in media, design and technologies:

Using AI: Since this idea was quite unique, I had difficulty finding inspiration or reference images. I used AI to help generate ideas for which clothing piece to use as the shell, where to position the text, and to explore color combinations.

PASSION PROJECT

In this section I explain the inspiration that I found for my design and the moodboard that I created for it. I also explain the visual design techniques that i implemented and which ucd principles apply to my prototype.

This fits the following learning outcomes: LO1.

Gitwiki about lo1

Summary of the explanation

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

...exploring emerging trends and developments in media, design and technologies:

Fitness apps: Often include features like sleep tracking, fitness, and nutrition.

Personalization: Light and Dark mode is a well-established trend in app design.

Gamification: Features like badges, ranks, and progress bars keep users engaged.

Exploring emerging design trends:

You create engaging concepts and translate them into interactive validated media products by applying user-centered design principles, visual design techniques:

User-centered design principles:

  • Keeping it consistent: I maintained consistent color combinations across all pages, including using the same green in both light and dark modes.
  • Use plain language: I wrote all the content in simple English, like the motivational lines, to ensure clarity.
  • Reduce user effort: Navigation is simple, such as finding the weight measurement button with a large plus icon and easily switching between light and dark modes.
  • Provide feedback: I incorporated animations for clickable elements, and I am considering implementing popups for additional feedback.
  • Simplify navigation: I designed 5 navigation buttons and ensured users couldn't access the calories page directly from the dashboard's calories section.

Visual design techniques:

  • Color Theory: Green represents success, progress, and positivity, which aligns with the app's purpose.
  • Typography Hierarchy: I used larger fonts for important features like weight loss/gain and workout stats.
  • White space: I added white space around the edges and in cluttered areas to focus attention on the app's content.
  • Contrast & Emphasis: I reduced the blue's contrast, allowing the white text on a muted green background to stand out, emphasizing the content over the background.

READING GUIDE

I made my reading guide in Indesign, because for my internship they use Adobe a lot. I took inspiration from the example in Canvas but I really implementing my portfolio website styling.

Gitwiki about the reading guide

Summary of the explanation

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

...exploring emerging trends and developments in media, design and technologies:

Exploring emerging design trends: I applied the same trends explored for my website.

You create engaging concepts and translate them into interactive validated media products by applying user-centered design principles, visual design techniques:

User-centered design principles:

  • Keeping it consistent: I ensured consistency by using the same styling as my website, which is already consistent in itself.
  • Use plain language: I wrote in simple and understandable English, adding bullet points where needed to improve clarity.
  • Reduce user effort: Bullet points help reduce effort in finding valuable information. I also used a heavier font for titles and a lighter font for body text.
  • Provide feedback: Every link is underlined or has brackets around it. On hover, it gets filled, providing feedback for interaction.
  • Simplify navigation: The table of contents is clear and simple, as well as the version control.

Visual design techniques:

  • All the same as my portfolio website: This was already explained in "LO1: Portfolio Inspiration, Creation, and Validation".