Interactive Media
You orient in the relevant tech, media and design landscape and create interactive media products that you have tested with users and stakeholders.

Branding Project: Website UX, User Research & Content Strategy

Our Client is a painter from the North Brabant area who wanted to find out about her target audience and have a brand as an artist. Then, we ended up with a brand guide (which you can check in the design learning outcome), website prototype, target audience study, and content strategy. Below, you can check my participation and achievements regarding LO1.

User Research

Our user research was based on: surveys, interview with another painter, analysis of competitors. I made a presentation for our client to show her the results of our survey regarding her target audience and to discuss her thoughts about it.

I also conducted an informal interview with a painter to get more information about how to grow in the oil/acrylic art field nowadays. The information and results of researches based on it are inserted in the content strategy document below.

Website wireframe

The website wireframe sketch was made after our user research. I included elements I saw in other competitors' websites, and results of the survey.

Content Strategy

I was the one leading the contents and writing most of the content strategy document, like all section 1, research of section 2, and all section 3. Together with my team, we created a full guide about social media content strategy, the clients' target audience, user personas, and research.

Media Campaign: User Research, testing with Survey Flyer & Drinking coaster

User Research & testing with Survey Flyer

Thinking about exploring in depth our chosen target audience (tourists), we created a survey with a product Ellyshia Tan suggested: a wallet flyer. The wallet would be an illusion to grab the attention of the user and then (maybe) they would access the survey with the QR Code in the flyer to answer the questions we needed to know to develop our traditional marketing products.

I built a paper prototype together with Ellyshia Tan to understand how the user would interact with the material, (like an origami that you unfold), so we could design based on that.

Drinking coaster

Although we received positive responses in our survey about our wallet flyer, the client didn’t think this product would be a good match because the city of Breda is focused on sustainability. Which means, these flyers could ruin the image of the website by polluting the environment instead of attracting people to access it. Therefore, based on UX Lessons with Jo-an, I had an idea of products that:

  • Could be 100% recyclable;
  • Would be more than just a flyer that goes to trash after, but a freebie of Breda City.

Projext X

For the project X, a survey with patients of the practice was implemented. You can check it here. After that, following Jo-an's recommendation, I did a competitor analysis, and then built a sketch of a website wireframe.

After approval of client, I built a more complex wireframe using FIGMA.

And then, the user testing video:

Reflection

This learning outcome can be very interesting for me as I can be very creative and use this together with research (either for inspiration, analysing data or tutorials). As everything is about the target audience, I understood that empathizing with the user and figuring out how to reach them is very important. Building prototypes, brainstorming, going after inspiration, knowing how products work, etc, made me understand how design is important in our daily life, as a bad design makes our life more difficult or a product doesn’t do what’s supposed to because of this.

In this, I also received a group feedback about the sustainable idea for the drinking coaster that made me realize it is all about selling the idea and how I’d have to sell it, which means, for me, this learning outcome is siding completely with Marketing strategies. For me, this is interesting, but something I would rather not go too deep, as it’s not my focus.

Development
You explore front-end development languages, you write code and document in a version control environment.

CSS3 & HTML5

First step on this semester was to study in deep the CSS3 and HTML5 markup languages. The pokemon you're seeing in the picture is a representation of an assignment our class had to make: build a pokemon of our choice in 45 minutes using only HTML and CSS.

For me, this assignment was fun and I had to use my creativity and previous knowlegde to accomplish it. Some choices I made based on the lectures were:

  • Use flexbox for the alignment and responsiviness of the pokemon;
  • Use position: relative and absolute for the "clouds";

JavaScript

Tic tac toe game

One of the exercises we had in school was to fix and implement features in the tic tac toe game after a winning. My approach was to analyze the code, find the mistakes, and then asked AI to help me explanning the functions and what they do.

Development group project

For the development grou project, I was in charge of making the MUST SEES SECTION appear with javascript, and link the like button of the divs with our account page. I used local storage to do that, as you can see below, but this code wasn't the final one.



const saveButton = document.getElementById('like-icon');
const contentToSave = document.getElementById('contentToSave');
		  
saveButton.addEventListener('click', () => {
const content = contentToSave.innerHTML; // Get content as string
localStorage.setItem('savedContent', JSON.stringify(content)); // Store securely
});

Also, I changed the filter in the account page, so everytime you visited a location, you could mark, and it would appear in the "visited" section.



const sourceDiv = document.getElementById("sourceDiv1");
const targetDiv = document.getElementById("targetDiv1");
const hideButton = document.getElementById("hideButton");


hideButton.addEventListener("click", function () {
// Hide the source div
sourceDiv.style.display = "none";

// Show the target div
targetDiv.style.display = "block";
});

You can check the website below:

Responsive & Web Accessibility

The Project X aims to follow UX principles, web accessibility, and responsiviness. The website is still under construction, but some parts of the code are already mobile responsive (430px), and with the aria labels.

PHP

Although we don’t have PHP in our learning outcomes, I decided to study a course anyway because I was observing the web development vacancies around Linkedin and some other career websites, and they require it sometimes. I also had previous experience with PHP, so I wanted to practice.

You can check my certificate and some of the exercises I’ve done using XAMPP here.

Full-stack project

This portfolio is my Full-stack development project for the semester. Although it was only required to be an static website, my goal was to use a CMS tool and learn more about the back-end using Node JS, Express JS and EJS.

Furthermore, in terms of programming language, this portfolio only uses javascript. For the debugging and changes in real time I'm using Nodemon.

Since I learned FLASK, I got really curious about setting up servers, therefore, although this was quite a challenge, I enjoyed a lot. In the server, I use EJS as the view engine set up, and JSON as the database method, using a for loop in the HTML to load the information of my dictionary.

The resources I used for this were:

This portfolio has a repository in GitLab and you can check it in the button below.

Reflection

For me, learning new things about software development is really interesting, and it’s what I like to do. I felt free to expand my knowledge and use my creativity and problem-solving skills to overcome challenges. I want to keep trying and studying because this learning outcome is the most important in terms of technical skills I want to have to build my future career.

Design
You explore and use professional design tools and you iteratively design visual works.

Branding Project

This branding project for Nathalie Silverentand-Houben, we needed to come up with a logo and a brand guide. We had some sketches for the logos, made by other members of the group, but when we applied the user testing with surveys, we didn't get the response we were expecting. After a lot of research, I took the change to come up with three final products for our client to choose.

The sketches were done using Adobe Photoshop and Clip Studio Pro. Every product was made by thinking of the feedback my group got from professors, the client and the target audience. The client chose the number 2 based on our research, advise and also her personal preference.

For the brand guide, my team worked first in building stylescapes to then come up with a final design we could follow. Being the one designing the final version of our client's brand guide, I made sure to follow templates and brand guides such as UBER, McDonalds, etc. The tools used were Adobe Photoshop, Illustrator.

Overall, thinking and elaborating these designs contributed a lot to enrich my persception of what the target audience and client may want vs what they need.

Some resources for inspiration and research:

Media Campaign: survey flyer

We need to grab attention to the product itself so people would access the survey (or not). Although my design wasn’t chosen by Professor Barry in a feedback, I finished in Adobe Photoshop, using Freepik resources. The colors used were based on the website of explorebreda.nl and the wallet was edited in a way that could give the impression of a used one, a little bit dirty and old.

Personal Portfolio

I want to begin this topic with a nice fact! All the drawings in this portfolio were made by me. Having an experience as black and gray tattoo artist, I wanted to translate this artistic side of my in this portfolio. That's why the color palette plays with black & white contrast, but also adding a playful 3D effect as this is a virtual space.

For the logo, after a lot of research for inspiration, I came up with sketches of an idea that could represent: Adaption, Creativity and Persception. That's why a chameleon, where it reflects this essence of mine. According to Tinga Tinga Art Website:

"In African cultures, the chameleon is often seen as a symbol of embracing change and thriving amidst diverse circumstances. Just as the chameleon changes its appearance to blend in or stand out, humans are encouraged to embrace change and adjust to new situations while retaining their essence."

All the drawings were made with Clip Studio PRO and adjusted in Adobe Photoshop.

Projext X

After interviewing the stakeholders and applying a survey on patients, I started a competitor's analysis. GP or clinic websites from Cape Town South Africa were analyzed to find out: the structure of the website, responsiviness, content, color palettes. You can check some websites I went through here:

Futhermore, I went on a research on professional UX/UI designs for Health Care websites.

After coming up with sketches, I then went on a research of a color palette. As Jo-an suggested, I used Adobe Color based on the logo my client already had. I then gave my client three options of palettes in a meeting for her to choose.

After the chosen color palette, I designed a responsive website for my client in FIGMA according to all previous user research, competitor's analysis, wireframe creation and color palette analysis. You can check in the button below.

Portfolio: user testing

Testing the wireframe of this designed portfolio.

Reflection

With this learning outcome, I could explore more design tools such as Adobe Photoshop, and Illustrator for example. It made me grow as a designer and think about the target audience when planning something. I already liked drawing a lot, so searching for references, taking into consideration empty spaces, etc, wasn’t very much of a challenge, but it made me realize I could always grow more by learning with user research, and the 10 usability heuristic concepts.

Professional Standards
You apply professional practice, both individually and in teams, in the areas of project organisation, communication with stakeholders, exploratory research, and reporting.

As project leader

Communication with team mates & stakeholders
For the branding project, I was in charge of direct communication with our client in behalf of the group, understanding our client's needs, wishes, challenges and passing the message for the members. Our communication were both through e-mail and group calls. With my team, the communication was clear and open both face to face and through our group in Whatsapp and Teams. You can see some of the examples of communication with stakeholder and more details here.
Quality assurance
During the Nathalie Silverentand-Houben Branding Project, as the project leader, I had to make sure we were delivering quality products, specially in terms of the Content Strategy document. Therefore, I formatted the texts and made sure the document followed a more professional standard. You can check an example of it here.
Solving conflicts
Fortunately, we didn’t have major conflicts in the group. However, we did have a situation of a member who was always absent and wouldn’t communicate with us. Understanding that he could be going through a hard time, I had a conversation asking what’s going on and how we could help him. It was communicated to us that he was having a conflict of time because of his full-time job. Therefore, I worked together with him in the Marketing and Content strategy, as he was more comfortable and had a lot to add to our group because of his expertise.

He also started to communicate better on our Whatsapp group if he would be joining the meetings or not.

Managing a team
The team was managed according to the tasks assigned for each member. We used the system os tasks on Teams. We also followed our Team Charter.

Team player

As a group member, I had the chance to understand the difference between collaborating and cooperating. Both are important to do. Collaborating on something gives me a chance to challenge myself and deliver a work that can match the expectation of our teams and stakeholders, at the same time as adding my ideas and skills to the group. On the other hand, cooperating gives me a chance to learn with others and make our bond stronger as a team to improve our deliverables.

In every step of our group decisions, I tried to make myself as presented as possible, hearing their ideas, taking into consideration their own way of envisioning things, so we could combine everyone’s ideas to develop something bigger.

First thing we did as a group was the team charter exactly to get to know each other better. Bellow, you will find my profile and a button to download the full charter.

Name Strenghts Weaknesses
Yasmin HTML/CSS, Photoshop, Illustration, Figma, Clip Studio PRO, PowerPoint, Presentation, Communication, Organization. Not always present on meetings face to face / lateness, Overthinking, Anxiety, Tired because of amount of work outside University.

Project Plan & Design

Branding Project

I made the template of this project plan, assigned people to write their part and corrected and formatted to the final version. My parts on this include: Problem Statement, Risk assessments, Deliverables.

Project X

Since this project was entirely made by me, the whole document of project planning was my creation as well. Before completing the project plan, though, I had two interviews with my client to understand her story, challenges, wishes and needs regarding the website.

Presentantion & Reporting

This semester, I learned how to use Canva which I used to build professional presentations for report and visualization of design options for clients.

Research Methods

Branding Project

For the Nathalie Project we used the DOT framework.

  • Investigating the stakeholders' wishes: interviewing with client, communication through email for feedback, and updating her on our next steps.
  • Choosing the most appropriate technology for a (part of) ICT system: in our Content Strategy document we researched about the kind of social platform would suit our client's needs better. We then figure it out about the ads system.
  • Investigating the usefulness of a certain technology or framework: You can also check how the social platforms and ads system and SEO work on the Content Strategy.
  • Testing the quality of an ICT product: my group and I made a user test for the website. Also seeked for feedback in every step showing how our products worked.

Media Campaign: Development

We also used CMD methods searching on competitors. What do other competitors have in their website that explorebreda.nl doesn't have?

  • Go Vilnius: account creation, personalization according to preferences.
  • Visit Seoul: weather feature, recommendation of events according to seasons.
  • Visit Washington DC: detailed articles according to preferences, like "budget places to eat".

Qualitative Methods

One of the methods I used for my Project X was interviewing stakeholders: with the client and their receptionists and facilitor manager. You can check a piece of the transcription in the button below.

CMD: Usability test

For Project X, you can check a video of the user testing in the video below.

Reflection

This learning outcome made me realize how refining research and reporting is important for organization and sticking with the plan. I know I have a lot of room to grow as a professional, and I want to keep this motivation to work with future clients, learning more how to deal with challenges and hardships.

Personal Leadership
You take the initiative in asking for, and reflecting on, feedback. You identify your own core values as the basis for your study career and professional development.

Core Values

Identifying the core values I have to figure it out my own "brand", and, mostly important: to identify the kind of path I want to take in my professional and personal life.

  • Respect: respecting others, their culture, their beliefs (following the principle of the paradox of tolerance), their story, and having self-respect.
  • Empathy: empathize with others, offering kindness and patience to the unknown.
  • Achievement: being ambitious and making achievements to reach goals and develop my growth as a human being.
  • Creativity: exploring art and being open minded to ideas that can in some point get together to find solutions.
  • Professionalism: showing the professionalism side, understanding the emotions and challenges behind.
  • Curiosity: remaining curious to explore other perspectives and expanding my knowledge.
  • Sincerity: being sincere about my feelings and to my values so I don’t get lost in the process.

Career Prospective

My initial goal was to be a Front-end developer or UI developer, because I’ve always liked web development, but especially the client-side part. Right now, I don’t feel like I’m stuck with this idea, as I’m exploring other programming languages, being more curious about the server side. With that, I can say I’m open to a Full-stack development career as well.

As one of my goals is to learn more programming languages, I’ve been searching and applying for front-end internships, but I’m also learning more about other careers such as DevOps or Data Analysis and AI, for example. I feel that this is important so I can try as many subjects as I can during University to find a career I like.

Furthermore, I could explore more of Marketing, which is very interesting, but I’m not entirely sure I would like a career in that. I already had an experience as a Sales Coordinator, this was when I heard I should only care about the sales. "Business is business", which is something I don't entirely agree. I do believe there are a lot of room for good Marketing and Sales, but this is something I'd rather not explore further if I have the opportunity to do so.

You can check some articles I've been reading, or some example of jobs, or a sneak a peak of my CV here.

Next Semester

For my next semester studies, I started to talk to professors and other students about options. I then applied to an open learning as I want to explore more about Software engineering and AI. Furthermore, after Career Day and exploring some features of Fontys ICT studies, I’m thinking about going to an AI or Smart Mobile specialization.

Although I heard a lot of things, I'm ready to fight stereotypes. I'm a woman, I'm mature, I'm caring different experiences, I'm from a developing (or how some people like to say, third world country - which is wrong btw) country, but I'm also that girl who grew up building websites, exploring programming languages without any kind of support or materials; I'm that girl who's capable of studying anything, who's capable of overcoming challenges. If AI will take jobs away, I'll be the one knowing machine learning and AI. If there are only man in business, I'll be as twice as good as them to open my own opportunities. I'll be a woman in tech, and I'll have my place.

Self-development goals

Technical skills

  • Exercising programming languagues in the front-end. Get better as JS and dive into frameworks such as React, Vue.js, and explore back-end languages such as Java.
  • Learn about database with MySQL, and more about data analysis.
  • Exercise Maths and logics with apps (Duolingo, etc).
  • Know more about art in general, update myself in the AI x Art issues, challenges and opportunities.
  • Take notes about the projects I'd like to work on, such as sustainable projects, or education related ones.
  • Get to know how to use simple AI, how to start with it, deep my knowlegde of python with a course provided by Harvard.
  • Improve my analytical skills by researching more, reading more official documents of companies, like reports.

For now, my approach has been to use these two apps to make programming language always fresh in my head:

sololearn
enki

Professional/soft skills

  • Improve my communication skills. How to ask direct questions, how to develop my “train of thought” to express myself better.
  • Get rid of the late culture. Unfortunately, it’s a thing in my culture, so it demands exercise and planning.
  • Writing more reports.
  • Using better tools to organize myself in my daily routine.
  • Improve my socialization to develop more networking skills.
  • Get more feedback on my work.

Reflection

This learning outcome has helped me understand where I want to be in the next semester. Also helped me realize how my core values are important to link with professional standards. I always want to be able to grow and learn with others, so at my pace, I’m figuring out different paths with diverse perspectives.