DESN10799: Assignment 3 Device Overuse

The goal of most apps and websites is to keep the user’s attention for as long as possible.1 This benefits them because they can gather more and more data as the users use the app. If this is the goal for the company that I work for, then as an interaction designer, my goal is to create an app with endless possibilities and use as many social principles in my design as possible in order to keep user retention.

There should be many social aspects to the app as well as design fundamentals that will make them want to stay on the app. The more users the better, as many people thrive off social media use.2

I can apply the strategies and algorithms that have been proven to work well by companies such as Facebook and Netflix. They gather data on what the user likes and use other data, AI, and machine learning to predict what the user might like.

User retention is the most important part of an app for a company. This is because the longer the user uses their app, the more information they gather, and the more information they gather, the more they know how to keep the user around longer.2 It’s a cycle.

In the future, I’ll approach a design brief with the thought of user retention in mind. This can be through appeal (pathos, logos, ethos), and persuasion.

A good example is my approach to my Interactive Media coding project. When brainstorming ideas for the time of the project, I kept asking the questions such as “what is going to make people want to use it” and “how can we keep people using it”.

This led me to think of factors such as locations, what type of content, type of interaction, as well as the social aspect of it. If I incorporated a social aspect where users can possibly share their results or photos from the installation, this can lead to more social media promotion and others will want to try to the installation.

Another approach I’ll be using is a moralistic one. Seeing the effects that social media has on society, I will try to use solutions that benefit both society and business. The current state of social media and device overuse is damaging mental health, the innocence of children, social relationships, and democracy. 2

Companies are doing what’s good for their business, but not what’s good for society.3 The more we use technology, we are living the way they want us to live, not the way we want to live.2 There are still a lot of moralities and ethics to consider when designing.2

“The Need for a New Design Ethics – Tristan Harris.” Tristan Harris. Accessed April 1, 2019. http://www.tristanharris.com/the-need-for-a-new-design-ethics/.

“The Problem.” Center for Humane Technology. Accessed April 1, 2019. http://humanetech.com/problem.

Launder, Mimi. “The Ethics of UX: When Is It Good Design and When Are You Just Tricking People?” Digital Arts. Accessed April 1, 2019. https://www.digitalartsonline.co.uk/features/interactive-design/ethics-of-ux-when-is-it-good-design-when-are-you-just-tricking-people/.

DESN10799 Assignment 2: Scenario

In our scenarios, the improvement of the world depends heavily on the use of reengineered waste/plastic. Some scenarios involved a wasteland, a completely undesirable place to live, and some involved a paradise, where everything is great.

The common denominator to all scenarios is reengineering waste.

The most probable future is continuation, where recycling and reusing plastic will become more common, but will not drastically change because the technology for plastic has not been the most advanced in the recent years. I think that the least probable situation is the limits and disciplines where recycling plastics become unsustainable because there are no resources for it. There is so much plastic in the world that it will take many many decades to get rid or / turn into something new.

 

DESN10799 Assignment 1: Humanized Technologies

I think the humanizing tech has the most potential for both good and evil. Humanized technologies means that technology will adapt more to human characteristics.1 It has the most potential for good because it can be used to create companions for those with illnesses or creating machines to do anything humans are able to. It has the most potential for evil because it can be used to create machines that can develop its own minds or take over human’s jobs. Examples of these machines are robots and androids, which can be used for both good and evil.

As technology advances, technology is learning to adapt as humans evolve.2 Machine learning and artificial intelligence makes it possible for technology to adapt. Its potential for evil outweighs its potential for good. Technologies such as virtual reality or mixed reality has allowed  for extended and more empathic communication between people. 2 These technologies be used to manipulate those who are vulnerable.  Another example is facial manipulation. When a computer has gathered enough data on a person’s facial characteristics, it is advanced enough to be able to accurately place another person’s face on top of another. This can lead to extreme cases that can potentially end the world.

Technology is slowly taking over our lives. Rarely nowadays can we do something easily and quickly without the use of technology. Humans always feel the need to be connected, and rely too much on technology. As we continue to use social media (i.e Facebook) and other technologies, more and more of our information is gathered. Companies are taking advantage of this and monetizing it. Some companies analyze this data in order to “better” cater to society. While some attempt to make it better, sometimes the opposite happens.

Some of the newest innovations in technology are smart speakers, which are small wireless devices that have integrated virtual assistants. The tech used to make it work are chatbots, voice recognition, and language processing. 3 This is an example of humanized technology because it uses machine learning and AI to adapt the the user. Natural language processing is the software that uses voice recognition and data to adapt to the user’s speech. This is helpful for users who may not have English as their first language, the machine can quickly learn how the user pronounces certain words and adapt the recognition software to each user.

Recognition software (facial, vocal, etc.) can potentially be used for evil because the data and information gathered can be used to steal someone’s identity. The barrier between technology and humans are breaking down, and technology is becoming a part of our identity.3

 

 

“Trend: Humanized Technologies.” Extend Limits. https://www.extendlimits.nl/en/trends/onderwerp/trend-humanized-technologies.

“Humanized Technology.” Artfutura. November 20, 2018. Accessed February 4, 2019. https://www.artfutura.org/v3/en/humanized_technology/.

“Why Humanizing Technology Is the Next Logical Step.” Guided Selling. November 19, 2018. Accessed February 04, 2019. https://www.guided-selling.org/humanizing-technology-next-step/.

Design Fundamentals 2: Project 3 Part B

Link to site – http://ixd0076.firebird.sheridanc.on.ca/assign1/designfundamentals2/project3/importance.html

 

The typographer I was assigned was Eric Gill.

I wanted to go for a more minimal look, and I used his font, Gill Sans. I also used the font Cormorant Garamond, which is a serif font that works nicely with Gill Sans. The Garamond font reminds me slightly of his non-typographical work, because of the details on its letters.

My first idea was to use a red hue picture, but it didn’t work well with the design.

A lot of his earlier work (drawings/paintings) are black and white, and he always had a lot of white space, so I decided to go for a simpler theme, with simple details to help bring out the layout and design. I decided to use a black and white colour scheme with a dull red as the accent colour.

Below are some layouts and designs that I tested out.

I also tested out having the quote overlap with the text, but I saw that it did not work very well, and worked better without overlapping the picture.

 

Below is the final design for the header. I used similar tracking to that of his book, An Essay On Typography. Wider tracking, that helps with the readability of the letters.

The biggest challenge for me was trying to differentiate the background from the foreground. Designing a background that did not distract the viewer away from the subject was tricky, but I just lowered the opacity on the background and it helped bring emphasis on the content. Instead of a jpg/png image, the header above is coded (text on top of picture), which was challenging at first, but quickly resolved using position: relative and position: absolute attributes.

 

Typography Project 2

Letterform Construction

Scans

Choices

Final choices

Uppercase – Before

Uppercase – After

Lowercase – before

 Lowercase – after

 

Paragraphs of Type

I chose excerpt #2 because it seemed like an article I would read in a newspaper or a news site. Most news sites and newspapers use Serif fonts for their articles, so I chose the font Bitter.  I added a line height of 1.5 em to show a bit of distinction between lines, as a long article with a lot of words can look overcrowded. I also chose a narrower width, to give it a more news article feel.

The settings I used:

           Column width: 25em;

            Font-family: ‘Bitter’, serif;

            Font-size: 1em;

            Leading: 1.5em;

            Tracking: 0em;

Trying out different column widths:

100em

45 em

 

35 em

25 em

Expressive Type

To find different ways to express words, I wrote down what I saw/visualized when I read the word. I tried my best to show what I visualized without making it look like an illustration. I started with just using the words, black type on a white background, but when I started expressing the word popcorn, I thought of the red background with yellow type – this can help visualize popcorn as this is the stereotypical popcorn picture.

I decided to use a serif font for the word popcorn, because when written in lowercase, the serifs almost look like kernels. I also liked the look of a modern serif typeface, it gave the word a playful look, which can be associated with the word popcorn because of movies, fun, and entertainment.

I used different shades of yellow, to show value. Another reason is that not all the popcorn in a bucket will be the same colour. Some will be bright yellow and some will be light yellow. When I added the red background, it started to look like a logo for popcorn. I also like how the dark red background brings emphasis to the bright yellow text.

Instead of placing the text on a straight line, I piled it all together, rotating a few letters. This gives the illusion of popcorn, like it was put on top of a table.

Final Product

IxD Navigation: Fortune Teller

View project on browser

For this project, I decided to do a fortune teller. When I was looking through the choices for this project, I knew I wanted to do one of the fortune teller choices, but I wanted one that will challenge my design skills. I decided to go with my own rendition of Zoltar, a fortune teller machine, that gives the same responses as a magic 8 ball.

The target audience of this are teenagers and young adults. It is for entertainment purposes, but it can also help those who are having a hard time making a decision.

Below are pictures of Zoltar for inspiration.

I decided to name my fortune teller Morgana, based on a character from the game Avalon.

My final design for Morgana:

CODING

To start my project, I first coded the basic HTML elements. Then I coded the JS functions to tell the fortune.

Whenever I clicked the button, the page quickly refreshed and I did not get a chance to see the result. To fix this, I added the prevent default action.

When I first coded, it kept giving me the same answer.  

So I added the formula (see var fortuneTold) to give 20 responses in random order. The code worked!

While testing, I realized that even if there is nothing in the form, it still gave an answer.

So I added an if/else statement to only give a fortune if there is text in the form.

When I was designing, I noticed there was always a margin around my body. So I used the * selector to make the default padding and margin 0, and the white border disappeared.

I also noticed that the CSS animation played whether or not there was text in the box, so I added the same if/else statement to the animation  toggle function. I also changed the style colour of the text to be red if there is no text in the form.

 

The hardest challenge from this project was the animation of the arms. I needed the arms to rotate on the corner, not the middle of the picture. After research, I found that transform-origin moves the anchor point, and the arms rotated on the origin point I gave it.

Project 1: Tip Calculator

Link to project uploaded on Firebird Server:

DINNER CALCULATOR

For this project, I wanted to do either a grade calculator that will automatically convert your number average into a GPA, or a tip calculator, which will include evenly splitting the bill between the group.

I created the tip calculator. I started by writing out the HTML and CSS for the file. I first decorated it with a yellow rectangle, but soon I got the idea of making it look like a receipt.

Before -> After

I made a light blue background, with ragged/ripped edges. I kept the  light red button to add some contrast. I also modified the results area to be clearer and easier to understand.

When I was writing the Javascript code, I kept getting error results such as NaN, Reference Error, Syntax Error, undefined, function error, and event error. While it was tricking trying to get it to work properly, I found quick solutions by looking over my code and looking for tips online.

The most challenging part of this project was getting the arithmetic operations to work. I looked the code over and over again, yet it kept giving me $0.00 or NaN. I decided to write out the formulas, then I found that I am missing a few parentheses for the formula. After fixing the code, the calculator finally worked!

One of the reasons I was getting the NaN result was because my variables were not being recognized as values. I added .value to the end of the variable, and it worked for some formulas, but one of them was still NaN. I found out that sometimes, the variable in the formula won’t be recognized, and a quick fix is to multiply the variable by 1. I had to be careful in adding the extra operations because making a mistake like putting one extra or one less parenthesis will spit out an error.

After looking at my “final” product (see the After picture above), I felt like it needed something else. I decided to take what we learned from the CSS animation (the ball) and create a printing animation where the paper rolls up from a printer. Unfortunately, it didn’t work the way I hoped, so the final product looks like the printer is going down instead of the paper rolling up.

I used some of the code we learned from the CSS animation, but changed the styles and timing. For the animation, I used translateY for transform to make the printer move down.

When I first added the animation, the printer svg file was stuck to the left side. I tried adding margins, but it stayed 30px to the left of the window whenever I resized the browser. I fixed it by adding position absolute to the printer and position relative to the background.

Another problem I came across was the animation. It kept resetting after finishing. I solved this problem by adding animation-fill-mode: forwards which will stop the calculator from resetting

Below is what the calculator looks like after clicking “check”.

Project 3: Ad + GIF

 

Part 1: Brainstorm

Below are some idea I had for brand and the ad/gif:

  • use toy car and edit to make it seem like a full size car (maybe a sports car – ferrari, etc.)
  • powerade – hand grabbing it, light streaks to show “power” coming from bottle into the hand -> “feel the power”, “power up”
  • apple vs windows – long waiting lines for help or on hold w tech support vs not waiting bc system is good
  • gatorade -> hand grabbing, thunder connects hand and bottle -> “fuel like a god”, “god fuel”

I really liked the idea of taking something small or miniature then editing it to look like a full size object.

Part 2:  Process Work

Here are the original photos I used.

I originally planned on using this picture:

But trying to remove all the lines would take too much time. I tried cropping but it was too low resolution. I found an old picture I took in NYC which had really nicely shaped clouds. It was a high resolution photo, so cropping that area worked(A). However, using only that small part did not show symmetry and balance, so I copy and pasted it to create radial balance, and using clone stamp tool and brush to  make certain parts look different. (B)

A

B

Since I did not have a full gatorade bottle, I decided to edit the picture to look full. I used the pen tool to create the lightning bolt shape then filled it with dark orange, then brought down the opacity, and did the same for the logo on the bottle.

BEFORE

AFTER

When I first started the gatorade ad, I began with a hand grabbing the bottle, and a lightning strike (A). I wanted the sky to be a background to give a heavenly effect (reference to god), but the light from the thunder blended in with the blue skies so I inverted it.(B) I made the background black and white, and I achieved the look I got. While working on the final touches, I remembered about the painting, “The Creation of Adam” by Michelangelo. It represents God and Adam. I decided to change the hand gesture from grabbing the bottle to one similar to God’s in the painting.

Final Products

AD:

GIF: