Tumgik
Rationale
Rachael Archer
For my kaitiakitanga project, I wanted to tackle the issue of face mask pollution, and encourage viewers to reduce waste by using fabric face masks instead of disposable masks.
My persona became a creative type, someone who cared about plants and nature and would be keen to make their own personalised mask, but may just need to be informed on mask pollution and encouraged to take the time to get creative for the cause.
My website is colourful, illustrative, and fun, while still clearly conveying the underlying environmental issue. It serves to capture the attention of viewers and educate them, providing resources such as mask templates and instructions to make their own. The website also has helpful tips on wearing a mask and how to care for a fabric mask, so viewers feel comfortable committing to this option, and see that the convenience of disposable face masks is matched by the fabric counterpart’s versatility and eco-friendliness.
0 notes
0 notes
0 notes
week 6: Thursday 27 May
Final exhibition today!
Tumblr media Tumblr media
0 notes
week 6: Monday 24 May
Continued work on coded website.
Tumblr media Tumblr media
0 notes
week 5: Thursday 20 May
Today I worked on creating the desktop version of my site and completing the mobile version. Translating the design from mobile to desktop was quite easy, as all the refining had already taken place through critiques on the mobile site.
Tumblr media Tumblr media Tumblr media Tumblr media
In between classes I also took some photos to display on my websites.
Tumblr media Tumblr media Tumblr media Tumblr media
0 notes
week 5: Monday 17 May
Another formative critique today!
Tumblr media
Here you can see I have made many changes to the website based on the feedback and critiques I have recieved. Namely:
Developing other pages. Now I have designs for the tips page and DIY masks page. I decided to not include a "shop" page that advertises places that sell eco-friendly masks, and instead have my website focus on DIY and creativity to fit my target persona.
Adding subheadings to the main page. This breaks up the text and makes it more easily digested.
Removing the text box border from main page. This better fits the easy, free, and organic layout of the site.
Incorperating my persona illustration for a more emotive quality to the site. Adding this illustration of a happy masked person, as well as another new one I've made, gives something for the viewer to identify with and generally adds a more personable quality. This was also done for the social media ad.
Removing the "mindfulmasks" logo from the insta ad.
Moving the "about" page link to the bottom of the menu. This puts the mission at the forefront instead of the particular organisation.
Changing the links in the footer to social media icons instead of text, these are more recognisable. I also removed "about" from the footer as it can already be access through the menu and doesn't fit with the social media links.
Tumblr media Tumblr media Tumblr media Tumblr media
The mindfulmasks logo has also had a bit of a facelift. You can see how I've more strongly referenced the font Far Out! by Midnight Grim (most obviously evidenced by the shape of the letter A). This new logo is more balanced and easily readable as the letters are more recognisable.
Tumblr media
Here is the feedback I recieved from classmates. Luckily most of these are points I agree with and was already planning on doing. Some of them directly contradict other feedback I've recieved, such as regarding the order of the main menu.
Tumblr media
0 notes
week 4: Thursday 13 May
Tumblr media Tumblr media
In today's class, I started coding the mobile website design of my website. It still needs a bit of work, but I'm sure it will change anyway as my design develops.
Tim also taught me about inline and block displays, as I was having some trouble with auto-margins between my footer bar and footer image.
Tumblr media
I also recieved feedback from both Jason and Matt regarding my design so far. These I will definitely apply before the upcoming critique.
Tumblr media
0 notes
week 4: Monday 10 May
Tumblr media Tumblr media
For today's class I practiced my coding and eventually created the demo website featuring Suzy the cat. I really enjoyed this coding session, and even added a few of my own features, such as a hover effect when mousing over the button at the bottom of the page.
You can download and view my coded website here.
0 notes
week 3: thursday 6 may – interim
Compulsory formative critique today!!
Tumblr media
Now I have created a social media ad for my website, displayed on Instagram. As for changes to my website, the placeholder text is still there, but now I've added a new page. This will be a "tips" page with helpful points on how to look after your DIY face mask, and how to be responsible using masks in general. I also added small textural lines to the face mask vectors on my pages so they are more obviously masks.
Tumblr media
Here are the notes I took after my critique session with Matt:
Tumblr media
I strongly agree with the note that my design needs more of an emotive quality to it. Adding in illustrations of people for viewers to identify with will be very helpful for this.
0 notes
Tumblr media
Here is my updated persona based on Jason's critique. No longer Business Charles, now Creative Friend! PDF version here.
While creating this persona, I was thinking about the typical art student. Young, passionate, creative, enthusiasic, but busy.
I feel like this persona sets me up well to develop my website.
0 notes
week 3: monday 3 may
Tumblr media
Today we had critiques, with my two design concepts on the wall for a few of my classmates to give feedback on. Lecturer Jason also came by and was there for a few of our presentations to share his thoughts too.
Below are the two design concepts I produced for my website, along with the Pinterest moodboards I created for them. You can find the boards here, along with the source links.
The deisgns below are still using sourced placeholder text, this will be updated.
Tumblr media Tumblr media Tumblr media Tumblr media
I decided to name my website's brand/organisation "mindfulmasks" to emphasise the awareness and empathy that my site looks to provide.
The first design direction is more of a serious approach, with professional-looking photography and a clean, structured layout. I added in some faint mask shapes to tie the whole thing together. The second concept is a more illustrated, whimiscal style. This one focuses on a positive, encouraging theme rather than a hard-hitting educational one like the other design.
Tumblr media Tumblr media
The "mindfulmasks" logo I created was inspired by this Face Mask Vector by timonko, and the font Far Out! by Midnight Grim.
Below is an image of the illustrations I created for this design, inspired by my moodboard. I wanted them to have a loose, fun feeling to them, with a focus on nature to show the eco-friendly values of mindfulmasks, as well as juxtaposing the mask drawings to illustrate the littering of disposable masks.
Tumblr media
Below is what notes I took from my critique. One other thing I forgot to note is that for my illustrated design, the mask lineart grpahic kind of looks like a bowl or a pot, so I should add more detail to make it less ambiguous.
Tumblr media Tumblr media
Jason made a good point in noting that my ilustrated design was the most unique and strong, but that an artistic-type persona might be better for this theme as opposed to a city business person. This creative person would also be a better target for the DIY masks.
0 notes
week 2: thursday 29 april
In class today we learnt about the persona and creating profiles for our target audience. I was assigned Festival Briony and created a profile for her. You can read a PDF version here.
Tumblr media
I then created a persona profile for my target audience, Business Charles. The idea is that I will be targeting business people who commute to work on the bus, where they need to wear a mask. They already care about the earth and do some small eco-conscious thungs, but they may not know about disposable face masks or consider them an environmental issue. PDF here.
Tumblr media
After this we did tests of our website wireframes. My test went well, the layout made sense to my tester and they likes the hamburger menu and the clean layout. I'm excited to see how I can translate this wireframe into an actual website.
Tumblr media
1 note · View note
week 2: monday 26 april (ANZAC break)
website wireframe
Here are my initial wireframes for the mobile version of my website. The menu is a classic hamburger dropdown list that links to the four pages: the landing home page, the about page, a page with diy mask templates and instructions, and a shop page that lists sellers of eco-friendly masks.
I also created wireframe pages to indicate to the user that they are being taken to either a downloadable file or an external link.
Tumblr media
I also wrote my text to go on my website's home page and about page:
home
Face masks have become a necessity in our day-to-day world, since COVID-19 changed our lives and efforts to contain it became a priority. However, an increase in the use of disposable face masks is causing negative impacts on our planet, without proper information on how to use them in an environmentally conscious way. As Jenny Yeh reports in her article for Greenpeace, "Undoubtedly, face masks are now an environmental, as well as social, phenomenon." Masks can save lives, but alternatives to single-use face masks will be key in maintaining the health of everyone, including our planet.
Mindfulmasks is here to offer some of those alternatives, and raise awareness of these issues. We’re here to show that we don’t have to sacrifice the planet’s health to protect our own.
about
Face coverings have become a part of our daily lives, and have become a requirement in many places around the world. But even before they were strongly enforced, disposable masks were littering our streets, landfills, and oceans. In an effort to get face coverings to as many people as possible, disposable face masks were sold in bulk as the most accessible containment of the virus. But despite this, guidance was not given on how to properly dispose of these masks, or resources for alternatives to these disposable masks. As lockdowns lift and in-person events resume, the consumption rate of single-use face masks will increase rapidly. This is why use of reusable, washable, and eco- friendly face masks is more important now than ever.
Mindfulmasks is here to raise awareness of these issues and provide information to reduce the amount of face-mask waste in the world. We provide DIY mask instructions to make masks of your own fabric scraps, and tips to follow so you can care for your mask and avoid adding to earth’s mask pollution. Thank you for considering alternatives to single-use masks. Have a browse around our website for resources and more information.
Parker, Laura. “How to Stop Discarded Face Masks from Polluting the Planet.” National Geographic, 15 Apr. 2021, www.nationalgeographic.com/environment/article/how-to-stop-discarded-face-masks-from-polluting-the-planet
Parkinson, Justin. “Coronavirus: Disposable Masks ‘Causing Enormous Plastic Waste.’” BBC News, 13 Sept. 2020, www.bbc.com/news/uk-politics-54057799
Young, Nick. “How to Make a Reusable Covid Mask and Avoid Plastic Pollution.” Greenpeace Aotearoa, 7 Aug. 2020, www.greenpeace.org/aotearoa/story/how-to-make-an-upcycled-reusable-fabric-covid-mask-and-avoid-plastic-pollution
Yeh, Jenny. “Where Did 5,500 Tonnes of Discarded Face Masks End Up?” Greenpeace International, 14 Aug. 2020, www.greenpeace.org/international/story/44629/where-did-5500-tonnes-of-discarded-face-masks-end-up
0 notes
week 1: thursday 22 april
For my Great Website, I chose Dribbble, a "self-promotion and social networking platform for digital designers and creatives."
It serves as a place for artists to host their portfolios and for clients to easily recruit work.
You can view a PDF version of this analysis here.
Tumblr media
I also tested my initial wireframes for the updated Google > PDF > Massey Enrolment journey with my peers, and tested their work.
The test went well without any confusion or unexpected decisions, but could be made better by specifying what the text says instead of just using squiggles to indicate text.
Tumblr media
0 notes
Website Theme and Research
During the break between classes I decided to do some research into a topic I thought I could use for my website, reducing waste by using fabric face masks instead of disposable masks.
Here are the sources for my research:
Centers for Disease Control and Prevention, “How to Store and Wash Masks​” Centers for Disease Control and Prevention, 28 Oct. 2020, www.cdc.gov/coronavirus/2019-ncov/prevent-getting-sick/how-to-wash-cloth-face-coverings.html
University of Southern Denmark. "Face masks and the environment: Preventing the next plastic problem." ScienceDaily. ScienceDaily, 10 Mar. 2021, www.sciencedaily.com/releases/2021/03/210310122431.htm
Adyel, Tanveer. “Accumulation of Plastic Waste during COVID-19.” Science, 11 Sept. 2020, https://science.sciencemag.org/content/369/6509/1314
Parker, Laura. “How to Stop Discarded Face Masks from Polluting the Planet.” National Geographic, 15 Apr. 2021, www.nationalgeographic.com/environment/article/how-to-stop-discarded-face-masks-from-polluting-the-planet
Parkinson, Justin. “Coronavirus: Disposable Masks ‘Causing Enormous Plastic Waste.’” BBC News, 13 Sept. 2020, www.bbc.com/news/uk-politics-54057799
Kassam, Ashifa. “‘More Masks than Jellyfish’: Coronavirus Waste Ends up in Ocean.” The Guardian, 8 June 2020, www.theguardian.com/environment/2020/jun/08/more-masks-than-jellyfish-coronavirus-waste-ends-up-in-ocean
Roberts, Keiron Philip, et al. “Face Mask Pollution Could Lead to an Environmental Disaster.” Mic, 25 Aug. 2020, www.mic.com/p/face-mask-pollution-could-lead-to-environmental-disaster-32135830
Young, Nick. “How to Make a Reusable Covid Mask and Avoid Plastic Pollution.” Greenpeace Aotearoa, 7 Aug. 2020, www.greenpeace.org/aotearoa/story/how-to-make-an-upcycled-reusable-fabric-covid-mask-and-avoid-plastic-pollution
Yeh, Jenny. “Where Did 5,500 Tonnes of Discarded Face Masks End Up?” Greenpeace International, 14 Aug. 2020, www.greenpeace.org/international/story/44629/where-did-5500-tonnes-of-discarded-face-masks-end-up
Seladi-Schulman, Jill, and Debra Sullivan. “How to Make a Cloth Face Mask with a Filter.” Healthline, 8 June 2020, www.healthline.com/health/how-to-make-a-face-mask-with-filter
Seladi-Schulman, Jill, and Deborah Weatherspoon. “Can Face Masks Protect You from the 2019 Coronavirus? What Types, When and How to Use.” Healthline, 2 June 2020, www.healthline.com/health/coronavirus-mask
Lindberg, Sara, and Debra Sullivan. “How to Make Your Own Fabric Face Mask.” Healthline, 23 Apr. 2020, www.healthline.com/health/how-to-make-a-mask-out-of-fabric
Williams, Zoe. “How to Make a Face Mask: 3 Ways to Sew Your Own.” Gathered, 20 Jan. 2020, www.gathered.how/sewing-and-quilting/sewing/how-to-make-a-face-mask-2-ways-to-sew-your-own
“How to Make a Face Covering.” Unite against COVID-19, 7 Oct. 2020, www.covid19.govt.nz/health-and-wellbeing/protect-yourself-and-others/wear-a-face-covering/how-to-make-a-face-covering
“Wear a Face Covering.” Unite against COVID-19, 23 Feb. 2021, www.covid19.govt.nz/health-and-wellbeing/protect-yourself-and-others/wear-a-face-covering
“How to Wear a Face Covering Safely.” Unite against COVID-19, 7 Oct. 2020, www.covid19.govt.nz/health-and-wellbeing/protect-yourself-and-others/wear-a-face-covering/how-to-wear-a-face-covering-safely
0 notes
Between classes I decided to edit an actual website experience, as I felt that the Google and PDF user journey didn't suit our brief as well as a website experience would. Plus, I just wanted to see what I could do.
So, I decided to tackle the user experince of enroling for courses on the official CoCA website, adding in the ability to learn about courses and electives to fit the task of "finding what VCD electives CoCA offers for 300 level."
The original website screenshots are shown in the left column, and the edited website is shown in the right column.
Tumblr media Tumblr media
We begin on the home page with the animated banner, clicking on the category "Study" in the header bar.
Tumblr media
For the original user journey, the dropdown menu for "Study" is ordered alphabetically, not my dicipline. The overall degrees are shown at the same hierarchy as the individual diciplines within them.
In my re-designed user journey, the degrees are shown in bold, with their respective diciplines underneath as subheadings. I feel this better organises the menu and better explains the degree structure and categories.
Tumblr media
In the original user journey, clicking on the "Visual communication" option in the menu takes you to the top of the Design degree page, the same destination as just clicking "Design", or any of the other diciplines' links within the design degree. You then have to scroll down through images to a menu from which clicking on the "VISUAL COMMUNICATION" option scrolls you to the VCD section.
In my re-designed user journey, clicking on the "Visual Communication" subheading will take you straight to the VCD section of the page (clicking on "Design" will still take you to the top of the Design page"). We can read about the VCD dicipline before moving on. Here I have added buttons that link to pages where you can apply, learn about electives, or learn about courses for the VCD dicipline. These are shown as thin bordered rectangular boxes to match with the clean minimalistic aesthetic of the existing CoCA website.
Tumblr media
In the original user journey, we have now made it to the VCD section of the page. Here we'll have a little read about this decipline.
In my re-designed user journey, we have clicked on the "Electives" button in the VCD section and it has taken us to a new page about VCD electives. I've designed this page to fit the exiting website, with a description, photo, and te reo Māori translation of the title.
Tumblr media
In the original user journey, we can scroll down to click on the "Apply to Visual Communication Design" link, but there isn't resourse supplied to read more about the specifics of the course before moving on to applying (in my re-designed journey, I would keep this link at the bottom as well as the buttons).
In my re-designed user journey, you can scroll down to a menu that shows the different year levels as seperate categories. This menu is modeled after the menu on the design degree page, to match with the established aesthetic style of the website. Clicking on a category will auto-scroll you to that year level's elective list.
Tumblr media
In the original user journey, clicking on the "Apply to Visual Communication Design" link will take you directly to the enrolment page, without an oppourtunity to read about the dicipline's courses, electives or requirements. You can read a list of all the VCD electives in one of the tabs, but they do not go into depth here.
In my re-designed user journey, you can read in-depth about the VCD electives, clearly laid out and described. Colours and alignment have been chosen to match the website. I've added an "Apply" button that matches the buttons I've included previously.
Tumblr media
0 notes