Food for Life: Mobile Site
High Fidelity Interactive Prototype
During my Co-Op term I worked with the innovation accelerator program to help local organizations within the Halton Community. My group and I were given the opportunity to help Food for Life, an organization committed to providing free and healthy food for their community. We were tasked to research, develop, and pitch a method through which Food for life could better meet the needs of their patrons.
Our proposed solution was an updated redesign of the preexisting Food for Life website, formatted for mobile use, with some new added functionalities. The high fidelity prototype I created in Adobe XD served to demonstrate some of these new features, such as
Additional Language functionality, an Account based order system that can remember your preferences, and a new selection of Pre-Packaged food options intended to meet a wider variety of dietary preferences, including vegetarian, vegan, halal, kosher, gluten-free and more.
Click Here to try out the Interactive Prototype!
Interactive Public Service Announcement Poster
This piece was a collaborative effort between myself and two other designers. We aimed to create a public service announcement poster to raise awareness of the benefits of supervised injection sites as well as the detriments of criminalizing addicts.
The poster functions both as a concise standalone advert, and as an informational video.
When using the Zappar App, your smart device will recognize the unique zap code in the bottom right corner of the poster and will display an Augmented Reality video that will overlay and track the poster.
The base poster was created in Adobe Illustrator, then professionally printed onto a glossy 14x14" artboard. The Informational video was a collaborative effort, featuring three separate persuasive animations, created in Adobe After Effects, and finally compiled using Adobe Premiere Pro.
We decided to address the issue in two separate ways, in order to utilize each medium to its fullest.
Because the poster has limited space to work with and can only display a single visual, we decided to make an emotional appeal to the viewer. An emotional appeal requires the least amount of arguments and elaboration to effectively persuade audiences. It is also likely the most widely effective in persuading and engaging an audience. The video overlay serves to elaborate further on the issue while providing a deeper understanding to the viewer through facts and explanations. This ensures that the poster reaches a wide audience and functions on both a shallow understanding, while providing a deeper explanation for those who wish to view it. As video is a much more dynamic medium than static illustration, the visuals quality and scale were increased.
Conceptual Product:
Synesthesia Goggles
The Synesthesia Goggles are a product conceptualized and designed with the purpose of providing those with auditory accessibility the means to experience music and sound.
The Synesthesia goggles would function as a prosthetic of sorts. The microphones positioned on the front of the goggles would take in and process sound, then generate a unique visual display to accompany the sound, live as it happens.
The design of the goggles was based on a variety of preexisting tools and technology. It first started as a basic Virtual Reality style headset, with microphones positioned identically to industry standard handheld audio recording devices, and adjustable fit like modern construction helmets.
However, in order to market the product beyond simply function, it needed a visual identity to both convey the purpose of the product, and look good while doing it. My group and I took inspiration from early 20th century opera glasses, as my product shares many similarities with them. Both would be used to visually enhance the experience of music or theatre. In order to improve the user experience of this product, we determined the goggles could be slimmed down to more closely resemble eye glasses; this ensures easy transportation of the product.
By examining the most common and popular colour schemes typically used for opera glasses we lastly coloured and decorated the final design of the proposed product. The wider shape and thin profile of the goggles lends to the image of a mask one would wear to a masquerade ball.
This was the visual inspiration for the golden decal and the yellow and black striped tassels.
Light Activated Alarm Clock
An experiment with laser cutting, friction fitting, and Arduino processing, the Light Activated Alarm Clock serves to wake the user not at a specified time of day, but rather wake the user with a pleasant melody triggered by the rising of the sun each morning. By simply placing the Light Activated Alarm clock near an unobstructed window, each morning the melody of "Morning" by Peer Gynt will be played to wake the user.
The wooden casing contains one Arduino Uno microcontroller, a speaker which peers out the top, and a small light sensitive diode. When the diode detects a certain amount of light higher than a predetermined level in the code, it triggers the speaker to begin the song.
The casing for this project was constructed under the restriction that no adhesives or fasteners, such as tape, glue, nails, or screws, could be used. The structure was required to stay together by friction fitting the pieces. After establishing the function of my product, I decided to model the shape and size after popular home assistants such as Amazon Echo or Google Home. Instead of a cylindrical shape, however, I reduced the number of sides to a simple six, in order to reduce the total number of parts, and to aide in a simple laser cut.
Lastly a proposed decorative leaf pattern was to be laser engraved into the wood. Because the casing of this product was wood that was burnt into shape, the visual identity I wished to attribute to it was that of Autumn, as it reminded me of campfires.
The blueprint designs were created using Adobe Illustrator. The code was written and executed using the Arduino Integrated Development Environment.
Wind Energy in Canada
Infographic
This infographic illustrates the amount of energy that is generated through wind turbines from each Province and Territory in Canada. It serves to persuade Canadian citizens to consider wind farms as a more accessible option for generating renewable energy.
This project demonstrates the development phase of my design process. To begin my data visualization process I first used Microsoft Excel to generate a simple bar graph of the dataset. This provided me with a general sense for how the data is distributed. I then began my ideation process by creating three typeset tests. This allowed me to determine the optimal font choice for, the Title, any Subtitles, and the Content.
Alongside the typeset tests, I also collected various colour schemes I felt matched the subject matter thematically, going for lots of blues in reference to the sky, or using summer colours to invoke a feeling of a warm breeze.
This piece went through three drafts before it reached the final product.
The first draft took the form of a vertical bar graph, where the bars were stylized to resemble wind turbines. This draft was scrapped do to it being unclear where the top of the bar is actually represented, it could be interpreted as the top of the pole, the center of the blades, or the highest tip of each blade. The second draft I implemented the data as a scatterplot, using rolling hills with a small turbine at each peak, to represent the data. While visually stimulating this draft was also scrapped due to possible confusion. As shown in the final image in this gallery, throughout multiple iterations, small changes were made in order to optimize the experience. However, in the end, the second draft did not meet my expectations so I tried something different for the third draft. The final draft uses a simple pie chart in the center of the image. The layout of the final image is much stronger as it more effectively conveys the information to the user. The infographic utilizes a four column layout, the first column housing the title and two block of text, the second and third columns house the main graph, and the fourth column holds secondary information and follow-ups. This piece demonstrates an effective use of compositional flow. The user either first views the center of the page, containing the main visual and bulk of information or by standard western reading practices starts in the top left of the page and first reads the title before working their way either down or to the right, leading to the rest of the piece.
These pieces were made using Adobe Illustrator and Adobe Photoshop.
Google Doodle:
World Blood Donor Day
"A Google Doodle is a special, temporary alteration of the logo on Google's homepages intended to commemorate holidays, events, achievements, and notable historical figures of particular countries."
When presented with the opportunity to design and execute a brand new Google Doodle I first had to determine the reason for celebration. I wanted to pick a topic that was important to me as well being a topic plausible enough that Google could choose it for a real Google Doodle.
I have been a frequent blood donor for several years and I wanted to bring more attention to the importance of donating blood. I chose to create a Google Doodle to commemorate June 14th, World Blood Donor Day. Through this Google Doodle I aimed to encourage more people to try giving blood at least once.
This project was difficult because I had to make very deliberate design decisions to delicately work around imagery that might make users feel squeamish or uneasy. The cursive writing of the word, "Google" as well as the motion of the blood flowing through it, is meant to invoke imagery of nostalgic childhood experiences, such as silly straws, or waterslides.
Simply watching the path the blood takes from the arm to the empty heart waiting at the end was a deliberate choice meant to distract and enthrall. The needle in the donor's arm is small and kept off to the side to avoid any attention that may cause discomfort at the sight of blood being drawn.
This piece was made using Adobe Illustrator, Adobe Animate, Adobe Photoshop, and Adobe Premiere Pro.
Conceptual Product + Prototype:
Self-Care Matrix
The Self-Care Matrix is a customizable reminder system made to improve physical and mental health while working at home during the pandemic.
A wooden case housing, a 32x16 matrix of LED lights, a light diffusion panel, an Arduino Uno microcontroller, and for power a terminal strip connected to a USB cable. The idea behind this product would be to utilize a wireless microcontroller such as a Feather Huzzah, to transmit and receive information sent from the users computer over Wi-Fi. In this case the user would access the Self-Care Matrix website and choose reminders to be displayed on the device, as well as the frequency of said reminders.
When prompted, the device will display messages, images, and short animations reminding the user to practice healthy habits, such as, instructing the user to do calming breathing exercises, take breaks from work, to stretch, go for a walk, or drink water.
It's a designer's job to solve problems and to create new things that make life better. Conceptualized and constructed during the pandemic, the Self-Care Matrix was designed to solve those problems. The product was designed and constructed at home, for home use. This shows through its function and build. The Self-Care Matrix is constructed out of components that were mailed in, and a wooden casing constructed out of scrap pieces.
This project was made using Adobe Photoshop for animation planning, and website mockups, Adobe Premiere Pro for video editing, and Arduino Integrated Development Environment for writing and running code.
Proof of Concept
Infomercial
CONTACT
If you have any questions, comments, or opportunities, please don't hesitate to contact me.
Email: djclaessens@hotmail.com
Tel: 1-519-949-1712
Or message me directly through Wix with the form to the right.