Designing Communications for Interactions Studio: Project 1

Project: “…create two digital pieces that communicate the definitions of a pair of heteronyms (words that are spelled the same but differ in meaning and pronunciation) or homographs (words that share the same spelling and pronunciation but differ in meaning) by engaging your audience in meaningful experiences using only the letters in the words you’re defining, time, motion, sound, and interaction.”

Key skills: typography, animation, storytelling

1/15: Introductions and First Words

We started our first class exploring Stacie’s collection of wind up toys.

Image for post
Image for post
This reminds me of Toy Story, when all the characters freeze.

I think what I found most amazing about them was how old some of them were (I think the oldest was from the 1940's), but they still seemed current enough for their function. As in, I felt like I could maybe guess what time period they were from, but I could also easily believe they were more current. Maybe this is because the traditional design of a wind up toy is constrained by a non-electric motor, so when compared to more modern toys they seem to fill a nostalgic category no matter when they were manufactured. Stacie did point out that this powder pink color (below) was very popular in the 80’s, so that was a good clue for this little dog.

This dog was surprisingly fast, loud, and could tackle relatively diverse terrain. She was able to climb up a little ledge where 2 tables met. I was impressed.

We had a discussion about the different characteristics these toys had and how they contributed to our opinion of them. I thought it was fun and refreshing to continually answer the question “Do you like him?”, since often times we have to avoid the word “like” when critiquing work. Also, we would talk about how we thought the toys were going to move and sound before we wound them up and watched so see if we were right.

Image for post
Image for post
He’s broken, but he looks like he was a lot of fun in his heyday.

This guy (above) was my favorite. He didn’t even work, but I admired him because he seems poised in a fun position: like he’s about to boogie or something. All of the toys that could move had clues that indicated their capacity for motion: room for legs to move, hinged joints, etc. I like that he has a lateral motion as well as his forward walk, since his head and hips also move. And I don’t know why, but I like his cheap plastic blue. Maybe it’s nostalgic to the toys I would get from coin machines at Blockbuster when I was little.

Overall, it was interesting to look at these little toys as a set of characters in a way, instead of just toys that stand alone from each other. I could see the consistencies in their form that communicated what they would do, and then unique qualities that distinguished them from each other.

Onto the beginning of our first project: picking a word. I was late to sign up, but I settled on the word “digest.” It’s two meanings:

noun /ˈdīˌjest

  • a compilation or summary of material or information.

verb /dəˈjest,dīˈjest/

  • break down (food) in the alimentary canal into substances that can be absorbed and used by the body.
  • understand or assimilate (new information or the significance of something) by a period of reflection.

Google dictionary provided a cute little diagram of the word’s origin here:

Image for post
Image for post
From Google Dictionary

Digest is both a noun and a verb, which I chose on purpose. I’m not yet sure if it will be more challenging or less challenging to communicate that difference.

Visually, the word appears relatively balanced. I like that it starts and ends with ascenders, and in lowercase it has a lot of round glyphs. I’m imagining opportunities to animate or format this word that plays with the balanced appears conflicting with the different enneciation depending on the meaning. I decided to brainstorm

Image for post
Image for post
Playing a little with different emphasis

As a noun, digest broadly means a compilation of material. I immediately thought of Reader’s Digest, Architectural Digest and all the other digests I would see at my dentist’s office. Wikipedia told me that digest size for a magazine means 5 1⁄2 by 8 1⁄4 inches, which is smaller than a regular magazine size but larger than a paperback book.

Specifically it seems that most magazines with “digest” in the title are a summary/compilation of material on the same topic, often providing shorter recaps and versions of recent events. It sound like it’s the news on a certain topic, but digested down to fit within the small size of the publication.

  • the sound of something really quickly paging through a book
  • the sound of heavy books or documents falling
  • long stacks of data, either in paper or books or just words

As a verb, digest means either to literally break down food (like digestive system), or to understand something after a period of reflection. I like that this verb has more than one technical meaning, but it’s all related to the same idea.

  • dissolving (maybe the characters themselves, into nothing)
  • shrinking
  • fading out
  • stacking up against each other and being pushed through something
  • stomach noises (ew…..but could be effective)
  • the sound of something petering out, like when pacman dies in a video game
  • the sound of swallowing
  • the action of swallowing
Image for post
Image for post
www.giphy.com

This is a little goofy, but I’m ideating around the motion of taking in something and then absorbing it until it disappears or gets smaller.

The verb part seems like it will lend itself better to motion, whereas the noun may be easier to represent just with scale or static image. But I’m often wrong about what I think will be trickiest, so let’s see where “digest” takes me.

1/17: Connotation + Denotation

This Thursday we jumped straight into typefaces.

Similar to how we evaluated the wind-up toys, during class we looked at and compared differed typefaces based on how they made us feel. It sounds obvious to me as I type this, but looking at typography as “form + content = meaning” is a really clear way to break it down. This equation treats type like any other design problem: I’m now thinking about the parallels between choosing a certain serif typeface for a specific word (say, Baskerville) and picking a certain material for a specific wind-up toy (say, metallic-painted plastic).

Image for post
Image for post
A part of the lecture I thought was interesting. It feels obvious, but I think it’s interesting to point out.

Interesting how the same words take on SUCH different meaning depening on which typeface their printed in.

Christine and I tackled a couple typefaces, first comparing both serifs and sans-serifs, and then analyzing them within their category. I realized it was easy to come up with words that felt familiar to describe a typeface — classic, modern, narrow, playful, casual, serious, etc. — but more fun to think of descriptors that came more from our gut reactions. For example, we wrote down “children’s book, ‘the good kid in class’” for Filosophia.

Image for post
Pinning everything up at the end was a good way to examine the harmonies between typefaces.

From this understanding of connotation, I feel a little more confident about figuring out how to math typefaces. I often get stuck in that dark whole of font-choosing when I have to use different ones for different headers, copies, captions and other stuff, I realize that after matching up x-heights and cap heights and x-widths, you can find complementary pairs when you pay attention to the connotations these typefaces have. This exercise made me wanna go into Illustrator and play!

1/18–1/20 Starting Semantic Differentials

Now it’s time to revisit my word. I’m having second thoughts about it, but I think it’s too late for that. Here we go, digest.

Image for post
Image for post
Our scale.

We are tasked with mapping out simple interactions/animations/I’m-not-sure-what-these-are by their connotations, demonstrating how that changes over time.

I think it’s important for me to revisit the simple training we’ve received in Axure, since this is the ultimate program we’ll be using for this assignment. I want to better understand the capabilities of this program in order to prototype some ideas, so this is a note to myself to do that.

The 2 definitions I’m using for “Digest” both need to be mapped out. I’ll focus more on the relationship between these two later.

Image for post
Image for post
Sketch for digest: verb, to eat and break down

For the verb, I played with the idea of a chemical reaction. I imagine the word would start out heavy and solid, but then undergo a process of warming up and increasing in activity that would cause the word to end in a similarly static position, but smaller/quieter in presence.

Image for post
Image for post
Sketch for digest: noun, compilation

For the noun, I imagine quantity, replication or growth to represent an increase in scale, since this often is a characteristic of a “digest.” I replaced the scale “quiet-loud” with “many-one”, to represent quantity.

I will admit, I thought this exercise was weird at first because it felt unnatural to plan the action without actually prototyping ideas, but in the process I noticed I’m considering elements, such as warm/cool contrast and quiet vs loud, that I probably wouldn’t initially think of when planning motion. I’m interested in how I could implement this technique in a different kind of problem.

1/22: Don’t Get Ahead of Yourself!

In critique today, I realized I am still jumping too far ahead in the process instead of slowing down and examining what matters. For example, I find myself focusing on the specific way I’m going to animate the “i” in “digest” using After Effects and then exported as a gif through Photoshop and then implemented into Axure. But before I spend all that time, I have to understand the beginning and end states a little better.

I remade my semantic differential maps, this time paying more attention to where the points of interaction lie, and what scales actually matter to my word.

Image for post
Image for post
The variables that we could consider. I was limiting myself to the ones we used in our first example, so now it’s time to open up a little more.

Another think I’m thinking about right now: most people I’ve talked to don’t know the meaning of “digest” as a noun. They are familiar with Reader’s Digest, but it kind of ends there. So I’m struggling to figure out how to teach the viewer about this definition, instead of relying on preexisting knowledge in order for them to make this connection. I think this minimizes the amount of abstraction I’ll be able to use, which is going to be challenging considering the minimalist nature of the assignment. Oh boy.

We sketched a little in class, and I started to think about animated individual letters so that they interact with each other (ex: the “G” swallows the “E” and then spits it back out lowercase).

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

And from this idea, I tried making a short animation.

Image for post
Image for post
This is for the verb digest: to break down. I’ll probably want to use different colors.

I tried to storyboard a couple more ideas as well, starting in my sketchbook and then moving onto illustrator.

Image for post
Image for post
Image for post
Image for post
The letters as a book themselves.
Image for post
Image for post
Image for post
Image for post
Which typeface? I’m realizing that choosing one based on mood isn’t effective when I format them like this: I need to consider color and composition when making these decisions.

Things I noticed during my process:

  • since I’m constrained to only use the characters in the word, I realize that sound is a really big resource that I can use.
  • People still don’t know what the word digest means as a noun, and I’m worried I won’t be able to communicate it properly. I wish I could write “reader’s” right above it, if only for a second :)
  • Color is very important: it’s not a second step, but an integral part of the beginning ideation. I need to remember this.
  • I think I’m going to be doing a lot of storyboarding in my career and lifetime.

1/24–28: How do I want my viewers to interact?

I’m getting caught up trying to work on both, so I blocked off time and started focusing the noun version of “digest” first. I’m struggling to define a sense of place in my work, so I decided to make a little moodboard to inspire myself.

Image for post
Image for post
I’m thinking about warm, woodsy places to read a magazine (including waiting rooms), and the combination of warm colors often used on the cover of digests.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
From-above view of books is important to my research. Source: http://123rf.com/

Stacie mentioned a really interesting technique: if I want to animate the letterforms with page-turning, I should actually record myself flipping through the pages:

Thank you Alice for filming me.

Because this might be a challenging thing to immediately animate (I looked through some tutorials and I know this night take me awhile, I decided to storyboard a little more, but this time focusing on color and other visual variables. Some key ones, so that I remember:

  • contrast/value: warm and inviting, so not too much contrast
  • texture
  • shape (I’m thinking a friendly serif, similar to the one used in Reader’s Digest)
  • repetition: Digests are usually a subscription, so how can I use repetition and time to communicate this?
  • and along those lines, how do you usually receive a subscription service? In the mail? Does someone hand it to you? Do you open it in your inbox?
Image for post
Image for post
some ideation for colors using gradients and warp to imitate a page turning.
Image for post
Image for post
Composing type within the words. But this gives a kinda of hacker-chic code vibe that I definitely don't want.

Options for page turning:

  • The word flips through when you click on it, then expands to show the complete word
  • the “book” flips depending on the direction you move your mouse, but when you click it expands to show the full word (but what is the reason for that?)
  • What if the word “DIGEST” is full of repeats of the same letters, so that it can really mimic a full 100+ page magazine?
Image for post
Image for post
Image for post
Image for post
I want to make something that has dimension, but this means an added challenge of animating page-turning in perspective.

As I continue to sketch, I keep getting hung up on the specifics of the animation. I know I need to change my process for projects like this by guiding my thinking with the visual variables and specifically, how they change.

Image for post
Image for post
Another quick sketch of a semantics diagram, to try to get myself back on track. To clarify, this is for the noun version of the word digest.
This is my first experiment with one of the CC effects built into the program.
And this is a beginning demonstration of an entire composition, where mouse movement can trigger action from each of the letters.

However, these prototypes don’t have much of a beginning, middle and end, or any really exciting climax point. It’s more an ongoing interaction, and I’m not sure that’s very memorable or effective for the user.

But first, I had to try out some sounds:

I found this sound from a user upload on freesound.org. For my final, I’ll need to create my own sound. Luckily, sheets of paper and microphones are easy to come by.
Digest, but as a living organism that can “digest” itself.

I wanted to make the above animation because it had popped into my head and I wanted to just prototype something so I could work off of it. Now, I want to play more with the form of the letters in a program that better supports it (hello, Illustrator).

Image for post
Image for post
Different compositions. I’m trying to loosely push the letters nito a kind of organism/animal form, or at least something the viewer would understand as being that could digest something. I am intending for the period to be the waste at the end.

I noticed something interesting when messing around with the orientation of these letterforms: if I flip a letter, such as the G, the word looks obviously off and incorrect, like it needs to be changed. In this way, I think I can encourage the user to interact with the letter on the basis that there is something wrong that needs to be fixed. The process of “digestion” would ideally fix the backwards G. Back to After Effects!

This looks like a Rube Goldberg machine.

1/29: Reflecting on Progress

After class discussion, I find myself thinking back to the wind up toys we played around with 2 weeks ago. Each of them had distinct visual cues that told the user where and how to interact with them, and the ones that were really well designed were able to incorporate these cues seamlessly into their entire visual persona. With color and typeface as a medium, I need to create a digital artifact that uses this same principle to describe the dual definitions of this word: I need to pay even more attention to the interactions.

Project considerations at this point (from class):

  • is the IX clear? (let people try it)
  • Is the definition clear? (Semantic differentials, explaining the definitions..why?)
  • Should it be obvious, or is there an element of surprise?

Also in class, I found a couple things from some books Stacie brought in that inspired me.

Image for post
Image for post
Image for post
Image for post
Michael Beirut’s typeface for Nuts.com, and a Japanese logo from the 1930’s. I like the organic, sloopy nature of that custom type, and a person eating type gives me extreme “digestion” vibes.

1/31–2/3: More Complete Thoughts + Learning Axure

Back to the noun definition, I decided to try to flesh out a complete concept that you can interact with in Axure. I also know that I need to start doing this so I can get a better understanding of how challenging it will be to use incorporate gifs into this program. But first, more color experiments (of course):

Image for post
Image for post
Image for post
Image for post
I can’t quite figure out the correct color scheme for digest as a noun. I want it to be something that looks literary and readable and editorial.

I forced myself to settle for now and move on to the animation. After a little wrestling with export options in Photoshop, I figured out how to place all of my gifs onto a webpage using Axure.

Image for post
Image for post
It should be triggered just from mouse hover, but it doesn’t completely work because the frames are too big….
Image for post
Image for post
…as you can see when I select them in Axure

Thus, right now the interaction in Axure is very incomplete and pretty unmeaningful to the user.

I met again with Stacie to talk over my iterations. Some of the most important key points I took away from our conversation:

  • Don’t worry so much about telling a story, but rather focus on the interaction/user experience
  • Along that vein, think about how you can change or add nuances to the interaction in order to make it more meaningful and memorable
  • Think about context and setting: when people read a digest, they are often paging through it casually and are only reading one at a time. My interaction should reflect this
  • For color (and for digest as a verb), I want to use colors that still feel organic but also are more related to a digestive system or actual animal tissue: reds, pinks, variations in tone on the same type of reds and pinks… I’m planning to go through the different medical diagrams of the digestive system to see how textbooks usually colored it.
  • Refine motion.

2/5: Class Critiques and Discussion

Today I got a lot of individualized feedback from my classmates, which was helpful but made me wish I had more iterations to test out. I’m realizing how valuable voluntary user feedback is, and I wish I was able to take better advantage of it. Still, I have some good points to work off of

For the verb form: People generally enjoyed the way the D moved through the word and got “digested” at the end. I didn’t have an interaction prototyped, so most of the comments were just on the video playing. My current green color scheme was pretty ineffective and a lot of users mentioned that it threw them of. From these comments, I also realized that adding a texture to the letter could add a lot of character to the entire composition, as well as contribute to the organic and “alive” feeling I want the letterforms to take on.

For the noun form: A lot of users still don’t know what it means for a publication to be a digest: some imagine a newspaper, others a bound book, others a magazine. Most of the comments I received were about confusion over the interaction, which I expected. As I talked about in my postings over the weekend, my bounding boxes are too big in my Axure file so the interactions are too sensitive to mouse input. Right now, the webpage reminds me of someone dropping a ton of newspapers and they are scattering themselves everywhere. Another big issue that was mentioned was the mirror effect that happens when the pages turn. I’m unsure how to combat this. My two options, assuming I use the same letter in each “digest”:

Image for post
Image for post
Which is less confusing. If I’m asking that question, maybe neither is the right answer.

I think motion, especially motion in relation to user interaction, is the biggest thing that’s throwing people off right now. For my next iteration, I want to explore the interaction of being able to turn the actual pages. I think my first step here will be to slow it all down. After all, reading a digest is a very individual action: only one person reads, and you only read on digest at a time. Now, I’m wondering if I even need all of the letters on the page at a time.

I tried a couple more compositions, a redecided what font I want to use:

Image for post
Image for post
I went with the greater contrast (on the right). It feels more editorial.
Image for post
Image for post
Different composition options. I could mess around with these on illustrator forever.

2/7–9: Get the verb DONE!

Digest verb: getting even more organic, I forced myself to explore decorative typefaces.

Image for post
Image for post
This typeface is called “Bungee.” The lowercase “t” looks like it was designed to have other letters stacked on it.

I looked at possibilities for animation. I want to keep the multiple points of interaction in mind while designing the layout this time.

Image for post
Image for post
I say when you’re stuck, it always helps to print everything out and start drawing all over it.

A note about sound: I’m making sure not to ignore it. I played a couple free sound filed online while I was looking for typefaces. I think slurping and swallowing noises are the most familiar to user, but it will take some testing to see if actual stomach noises would be too disturbing.

Full-on stomach noises. Pretty gross.

And after a lot more wrestling with Axure, I came up with 2 different versions. The first involves 2 points of interaction for the user: you click at the beginning, and then halfway through the interaction in order to make the “i” swallow the dot completely. The other just required one click for the whole sequence to play. I realize I tend to lean towards complexity because it feels more interesting to me, but after a lot of user testing, I noticed that there weren’t enough cues to encourage further interaction.

Image for post
Image for post
too much?
Image for post
Image for post
too little

(The sound is the same as in the video above, it’s just not included in these gif files)

2/10–12 Final Refinements

This weekend was final grind time for both of these compositions, which means that in the process I really start to realize what I’m passionate about, and what I’m not. I definitely and more instinctively drawn towards working on the verb form, probably because it’s more fun and goofy and has elicited a more positive reaction from the users I’ve tested it on. It took a little bit of grit to get myself to focus and care about the noun form, but I noticed that once I put in a couple hours of solid work, I can garner enough emotional investment to stay interested.

As I started routinely animating each “letter page” turning with new colors, I saw a little option for experimentation. What if the interaction was baited by part of the action, and then once you clicked, the entire interaction would ensue?

Image for post
Image for post
I tried it out with the page “wiggling” when you moused over. I received mixed reviews.

However, because I am using so few graphic elements in the name of simplicity/focus on letterforms, a lot of the people I tested this out on said that the page turning felt weird and inauthentic.

At this point I knew I needed to decide my interaction and just start refining the mechanics, so I went with the simple mouse over to turn the pages. From there, I considered even more layouts (a common theme in my process now).

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Changing the hue of the background made the composition a little warmer. I did this after reading an actual digest in a coffee shop nearby: it should feel like a friendly experience.

I finally refined to this.

Image for post
Image for post
The final composition.

I pushed myself not to settle on the original straightforward, centered text. I was avoiding changing the format, but I knew that this piece was missing the spatial awareness that you usually experience when reading a digest. Although this is still a flat composition (I couldn’t fit learning 3D animating techniques in this project’s timeline), I’m happy I figured out a way to manipulate the space. I were to iterate on this further, I think I could define a 2-step interaction that wasn’t as awkward as what I tried earlier. Possibly something incited by sound.

Image for post
Image for post

As for the verb form: I refined the sound timing so that it matches, and added one final mouse hover interaction to simulate hunger rumbling. I found that when people approached the piece with their mouse, they were excited when the word moved on it’s own even though they were angling to just click on the pulsing dot. One of my main goals was to keep the compositions surprising, and this was a fun way to explore that.

Image for post
Image for post

Concluding thoughts

Overall, this was an interesting project. I definitely did not enjoy using Axure in the beginning, but as fought and wrestled with the program, I actually gained enough skill to respect how fast and intuitive it (sometimes) is. As I continue to learn new software, I’ve grown to appreciate programs that are transparent about their tasks.

This was one of my first official experiences studying interaction design in the context of a webpage, and I learned a lot from the experience of user testing. Trying out my own interactions over and over again is a much different test that showing my iteration to someone who has never seen it before: the user does not often do what you want them to do, and I found it is important to keep this in mind when I would find . myself getting attached to a certain element I was designing. I found the most success when I figured out a way to balance user expectations and prior knowledge/understanding with the surprising and unexpected elements. This way, people can intuitively interact but still enjoy and appreciate the process.

Written by

Designer. Currently at Asana, previously at Khan Academy. Language + Data + Digital + Print.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store