Bea has just finished her last class for the week. On her way out a new flyer advertising a festival in Great Park catches her eye. She realizes it has been a while since she’s been outdoors. It would also be a great chance to do some people watching and so Bea decides to go. She has no car but thankfully there is a direct bus line. As she approaches the site she sees the ferris wheel and grows excited.
Storyboard depicting the scenario
– By Q aka Alex Duong
Resources used include https://www.storyboardthat.com/ to make storyboard and PersonMakr (internal Google tool) to create persona portrait.
Prompt: Take the best idea and create two different versions of the experience.
Of the ideas generated, we chose to proceed creating experiences around the community garden located in the Great Park in Irvine, California. Two competing options have been mapped out through the use of Manu’s model.
A festival celebrating “backyard to table” food here.
A cafe and picnic space surrounding the garden here.
PART 1
Prompt: Brainstorm ideas for an urban intervention at either site used in the mappings project.
My observation site was a park. People regularly bring food to this location to relax and enjoy themselves. One of the forces I observed, recreation, manifested itself in an interesting way. There is a pseudo-regular individual who sells moonshine at this park.
When given a receipt as part of the assignment, I thought about how most places are BYOB – bring your own booze. So I flipped it around to be bring your own food as moonshine is already available at the park. I then stitched the receipt and photo together as an advertisement for Dolores Park.
Photos are royalty free with no- attribution needed. Obtained from pixabay.com here and here.
Following arbitrary directions was a nice change from the usual “everyday busy” and always leaving the house with clear intent. Upon reflection, the primary takeaway is that my sketches focus on items that stood out immediately or over time. Of course what stands out is my exclusive interpretation and so I would not expect anyone else to arrive at the same conclusions. For example my last diagram of the Tesla car logo was the result of observing many brand new Model 3s during the course of sketching. At the other end of the spectrum was a bunny doll wrapped in a blanket and left in a tree. Fresh graffiti was a stark contrast to what was seemingly a seemingly quiet street.
While some of the public may have been curious about my actions, most didn’t give me a second thought. This was surprising considering I was sketching with an iPad and Apple Pencil. Only twice was I stopped – presumably by individuals who noticed my constant glaring up and down. But otherwise carrying electronic equipment apparently didn’t seem out of place to anyone. Good to know!
Five forces observed around Dolores park, a large and popular public park in the Mission neighborhood of San Francisco. Note I had already planned to do this site before seeing Alex R. similarly post about his part neighborhood in the city. Great minds think alike!
Fog – specifically Karl the Fog
San Francisco regularly has heavy fog. In certain neighborhoods of the city it can be what one commonly wakes up to. The fog can be so persistent that social media elites have given it a name: Karl the Fog. This embodiment of SF fog has over 300k followers on Twitter! One can get a feel for the made up snarky yet funny personality from some of it’s tweets:
“It tastes like Everlane [shirt] tops and bros talking about bitcoin.” – link
Dolores fortunately has a summit, Twin Peaks, to the west which helps dissipate the fog but never completely. As a result, even on a “sunny” day the fog is intermittent over Dolores park. Seen are two photos taken 15 minutes apart. Those from out of town and not aware seem to never know if they should stay in the park and or pack up due to sudden chill factor. As a force, the fog commonly has SF residents thinking about temperature drops which results in a tendency to pack a fleece or jacket.
Queues
Boba queueGrocery store queue
This city is a mecca of good food. The entire Mission neighborhood is just about 1.5 square miles yet hosts five Michelin star restaurants. Filling in spots in between are another 70+ restaurants ranked very highly on Yelp and Foursquare. Good food on top of close proximity to tech companies that dot the peninsula south of the city results in a regular queing up in long lines. Whether it be for groceries, refreshments, or fast-casual cuisine, you can expect a line of waiting. Pictured are just a few of the shorter (yes, shorter) lines I observed while out and about for this assignment. The first line is for boba while the second was for grocery store checkout. Due to their regular occurrence, many have sought the use of technology to help bypass queues altogether. This has fueled online reservation systems as well as numerous food delivery startups including Postmates, DoorDash, and Instacart. For a low-tech solution, people sometimes force themselves to attend popular restaurants at off hours for hopefully shorter wait times.
Construction
Over time San Francisco has had large net gains in new citizens (link). This combined with lack of insufficient development has resulted in a housing shortage. While high rise developments dot the city, they are far behind in keeping pace with residential growth and pent up demand. For those able to afford a home, a large amount of houses are decades old and require modernization upgrades and fixes. This impacts the city in a variety of ways including regular appearance of cranes dotting the skyline, building facades covered in scaffolding, and building permits reserving street parking spots for construction crews. Less thought about is the increase of traffic and noise pollution caused by large trucks hauling construction equipment throughout the city. The cranes dotting the skyline were too far away so pictured instead is a temporary construction office that has taken up multiple parking spots along with part of the street.
Cars
The force and impact of cars should be no stranger to anyone. Given that automobiles have become widely adopted, cities are built to accommodate them as a primary modes of transportation. Cars spend the majority of time idle and require space on streets or in garages. It is a given that all streets must offer some form of street parking and any housing projects must generally plan for some parking spots. One could argue it is a factor in why public transportation has not been vastly expanded in San Francisco despite many residents forgoing owning a car due to limited parking availability. Additionally cyclists and skaters are impacted by becoming “secondary citizens” to cars. They often must ride with 35 mph traffic on the left and parked cars on the right where doors can swing open at any moment. Most signage and signals don’t have affordances to let drivers clearly see cyclists. Cars as the primary mode of transportation have greatly shaped the Mission neighborhood as there are very few spots where a car can’t go. Pictured is a street near Dolores park with cars lining both sides as well as a car that is clearly parked past the curb.
Recreation
Parents of newborns and young kidsTwo birthdays in the park
This force was a fun, creative one to think of. I posit that an innate desire to be social is part of being a human. We are social creatures and this unseen force of connectedness is what causes us to want to enjoy the company of others. It is what results in creating notions of community and social events and tends to hold regardless of one’s stage in life. Events and public outdoor spaces such as Dolores Park can help to reinforce these notions. While at Dolores, I snapped photos showing various examples of humans gathering including a gathering of parents with newborns and young kids, two birthday celebrations (note the balloon and birthday hat), and presumably two friends enjoying their leisurely day with help from a proprietor of moonshine.
A potential sale of moonshine
PART 2: MAPPING THE 5 FORCES
Karl the fog
I’m having difficulty thinking of how to show a temporal, fleeting thing such as fog. Here I’ve decided to have fun and embody it as a character overlooking a part of San Francisco.
Queues
Below highlights popular destinations that receive high foot traffic and whose establishments are known for regularly having lines one must wait in to order, pay, be seated, etc.
Construction
Below marks closed or partly closed streets as a result of current construction.
Cars
This was difficult to map as I wanted to do something different beyond just showing where cars park (which would be every inch of every street). I luckily discovered some historical San Francisco city data showing areas around my neighborhood where drivers tend to exceed the speed limit. Mapping this can help warn pedestrians to be more careful around these areas – thus showing the “force” cars have on human interaction and safety.
Recreation
Below shows the location where I observed the moonshine vendor.
PART 3: FINAL BASE MAP
I wanted the final combined base map to weave a story and so intentionally left out two of my forces – construction and recreation. As noted below I continued the theme of embodying fog as a character – in this case “escaping” the valley and peaks to the west and descending upon my San Francisco neighborhood. As it descends, the map’s title advises locals to head for the busy shops and restaurants but to watch out for areas where cars are historically known to speed excessively. Higher fidelity PDF file here.
After reviewing instructions for exercise 3.1.2, I decided to add back in the force of recreation (below). This update depicts recreation as a vendor selling local moonshine, a semi-regular occurrence in the park and something I noticed during my observations. I’ve also updated the description or “legend” in the top right of the map. This update will allow me to tell a better story that I have envisioned for our upcoming exercise 3.1.2. A higher fidelity PDF file of the updated map here.
I was in San Diego this past weekend for fun and found no shortage of election signs.
Love
This sign farthest on the right emphasizes the name, role, and the familiar symbol of a fireman’s hat. All are easy to depict and this photo was in fact taken while riding by as a car passenger. The candidate chose to render a hat and thus is applying the von Restorff Effect to differentiate as most signs are pure text. With closer inspection once can see the remaining elements are the candidate’s firs name and a phrase stating this person has firefighter support. This later point alludes to the candidate having backing of a respected group of the community to further entrench credentials from an authoritative source.
Hate
The sign endorsing Brower uses similar elements to the sign I liked including emphasizing the name and role as well as having a community backer. It also uses the alignment principle more cleanly than my loved sign. However, the numerous font sizes detracted from understanding which was the most important. For example was it more important upon quick glance to read “for judge” or “JAG to judge?” This later phrase also provides what appears to be an acronym that perhaps some might not understand. What is JAG? Short for Jaguar? Judge approved gentleman? And yet this slogan is highlighted somewhat prominently and placed towards the top. In my opinion it applied Hick’s Law in a negative way by using too many font sizes and styles.
Hat tip to Liliana for the verbiage used in her post to clarify endorsement. I similarly do not advocate for or against any particular candidates and have evaluated these signs merely for class purposes.
Behold the California Cheese Trail Map – or at least so it claims to be. Below are a few example principles employed by the map.
Layering
In this map, the artist has specifically used three-dimensional layering to depict freeways and cheesemakers atop a map of the broader San Francisco “Bay Area.” Freeways are marked by white lines as well as the freeway number. Each cheesemaker location is represented by a pin bubble icon sitting atop the underlying geographic layer. This helps to highlight the relationship of each cheesemaker’s location relative to various freeways as well as distance amongst different cheesemakers. Link to principle’s project 1 post here.
Uniform Connectedness
This is one of the Gestalt principles of perception. It posits that elements with universal visual properties are perceived to be more related than elements that don’t share such a universal property. In this case, using the same graphic above, we see that each cheesemaker is graphically represented on the map by the same pin bubble icon. Each of these icons are of the same shape, size, and color. Note there was no project 1 post about this principle.
Iconic Representation
The map makes use of pictorial images to help users understand, amongst other things, capabilities and product offerings of each cheesemaker. In this case they specifically use a combination of arbitrary and symbolic icons. The arbitrary icons include those representing organic and farmstead cheese. For the former they decided to use the USDA Organic seal and for the later they icon is a historic jug of milk. The remaining icons are symbolic and somewhat represent the origin (e.g. type of animal from which the cheese is derived) or the concept (shopping basket for mail order and calendar for whether an appointment is needed). Note there was no project 1 post about this principle.
Corner Rocker. Pictured here is a little bamboo rocker chair in a corner of my bedroom. I use this more than any other chair in my apartment as I primarily work off a laptop placed on my knees. It’s generally difficult for me to sit or stand completely still hence the rocking affordance is a welcome addition. The striations in color and natural fiber material evoke a welcoming warmth feeling that most industrial office chairs can’t offer. A small throw pillow provides some needed lumbar support. The narrow chair back allows me to openly pull my shoulders back both to stretch and as a reminder to not slouch.
All weather-er. This basic chair on the apartment patio is where I often take evening meetings, call friends and family, and have dinner. In these scenarios being in a relaxing place outdoors takes priority over comfort as each individual activity doesn’t span too long of a time period. As a result I associate downtime and meals with the patio space and its furniture. If it’s too cold outside I revert to the rocker chair previously mentioned. As a mass manufactured plastic and steel chair from Ikea, its simplicity gives it strength to hold up to outdoor conditions.
Utility player. Despite being comfortable the couch is the least used seating item in my apartment. It was provided to the apartment by my roommate and because cultural norms of course dictate every home needs a couch. It is positioned in front of the living room TV. As someone who doesn’t even have his own Netflix account, the living room is a space I don’t spend much time in. As the biggest item, however, it does draw one’s eyes and thus greatly shapes the room and provides a sense of coziness. Its size combined with a few pillows allow you to fully stretch out. The size also provides some utility functions as it can be used as an extra bed in a pinch. On the occasion guests are over it provides lots of extra, comfortable seats and becomes a center of entertainment and discussion. Overall it contributes to a relaxing mood when one isn’t busy being a full time employee and student.
The commuter. I forgot to take a photo so this one (source) is representative of my seat on the company shuttle used to commute to work. In the San Francisco (SF) area it is not unusual for companies to provide their own transportation shuttles – particularly between the strip that is SF and San Jose. The seat is pretty basic. It’s utilitarian in that it provides a place to sit on my 35 mile commute which on occasion takes up to two hours. A seat belt exists as required by law. However I can rarely get into a comfortable position and the seats are packed tightly together such that two tall individuals often rub elbows while typing away. The jolts from stop and go traffic and feeling of being in a big box certainly don’t help either. Overall it gets me between two places because few if any have ever said they like their commute.
Tallboy. Despite constantly moving desks I have managed to hang onto this office chair for nearly three years. I keep it quite elevated from the ground for two reasons. The first is it’s a less drastic transition when switching the desk between standing and sitting modes. The second is even whilst sitting I can look across multiple aisles to see if a teammate is available. In the bottom right of the photo is a footstool where I rest my feet. The swivel makes it easy to turn around to chat with my team and the wheels allow me to quickly move it out of the way when I feel like standing. It’s more than satisfactory considering I rarely sit in it for more than two hours at a time. If you haven’t noticed, I’m generally a fan of armless chairs.
Don’t let the name throw you off. The full product name itself already suggests this is no ordinary alarm clock. It has been a favorite object of mine used every weekday for nearly a decade. Its primary objective is to gradually wake you up with light that simulates a sunrise. If that fails a whimsical tone kicks in at the alarm “set” time just like a normal alarm clock. Mind blown ?.
Even at a remote distance the constant display of time is apparent. Two buttons along the edge map exactly to two small alarm icons on the display. Collectively these visual cues can reasonably help infer the device serves as an alarm clock. Pressing these alarm buttons provides immediate on-display feedback to indicate whether the alarms have been turned on or off. Across the bottom are four unobtrusive buttons that light up only upon approach else they remain subdued. They are semantically mapped to a single word or icon that each serve a specific function. Yet this mapping is sufficient to set the alarm, desired whimsical tone, clock time, and max brightness of the sunrise simulation.
Apple TV remote
Hate
Generally known for incorporating good usability principles, Apple perhaps didn’t get it quite right with the Apple TV remote. Its function as a remote is easily inferred with a quick glance. Button presses manipulate screen content in a timely manner. So where are the shortcomings? It lies in the lack of any physical constraints to help distinguish orientation and individual buttons which end up affecting a seamless experience. There are a set of users including myself who learn to navigate a remote by tactile feel in order to reach a few critical buttons. Over time looking at the remote becomes unnecessary. For such users the tapered physical shape helps communicate orientation and whether a remote is being held upside down. Differentiated button shapes further help identify the few critical ones that have been learned. The buttons on Apple’s remote are laid out symmetrical with each button being nearly indistinguishable by feel. The remote’s small, symmetrical rectangular shape with a nearly smooth surface across the entire top and bottom don’t provide orientation clues. The result is one must first look to see if orientation is correct and subsequently identify the proper button desired. Yes, this is without a doubt a hash-taggable “#firstworldproblem.”
When applied, propositional density is the notion that objects and environments with multiple meanings can be more interesting and memorable. The more deep meanings relative to the number of elements is what contributes to higher propositional density. We’ll use two examples below to illustrate. The equation used to calculate propositional density is as follows:
Propositional density (PD) = count of deep propositions / count of surface propositions
To calculate PD above requires understanding propositions. In this context proposition is an element that can’t be further broken down. As seen above there are two types. A surface proposition is often tenable and perceptible. A deep proposition is subtle or even hidden. For example in the US a stop sign has red, stop, and an octagon as surface propositions.1 These elements can no longer be broken down into meaningful parts. The stop sign’s only deeper proposition, however, is stop. It’s PD ratio of 1:3 implies a low propositional density which helps it achieve the goal of getting you to stop in your tracks. However, PD can also be applied to evaluate simply a sentence. Consider the following phrase highlighted by blogger Curtis Newbold in a blog post: “If gas pains persist, try Volkswagen.” The sentence as it is used in an old advertisement can be found here. The sentence cannot be broken down further into a logical element. There is merely one surface proposition which is Volkswagen suggesting it might be able to offer you better gas mileage. Digging deeper reveals its high propositional density as it has more than one deep propositions. These include alluding to the brand being a source of relief as well as using medical references to imply it can be a cure to one’s ailing gas problems.2
WV ad depicting the slogan
Example of the principle cited by one of my sources: Volkswagen slogan “If gas pains persist, try Volkswagen” as I have outlined above.3
Nike swoosh logo
Example of the principle not cited by one of my sources: Nike’s logo can be regarded as having high propositional density. On the surface it is two element: black in the color of a swoosh/checkmark. However it’s deep propositions include completing a task and marking it with a checkmark, wings on the shoes of the god Hermes who was swift and fast, victory, and progress which is generally regarded as up and to the right which is also the general direction pointed to by the Nike logo.4
Oakley store in San Francisco
Example of the principle not cited by one of my sources and not located online: To try and find a “real life” example I thought it would be good to walk along the tourist area of Market Street in San Francisco. As my eyes skimmed the numerous shops and restaurants, I found myself fixated on the simplicity of Oakley’s company logo. The distinctly flattened and stretched shape of the “O” makes it easily identifiable from other letter “Os.” Oakley, a well known brand in California, is of course in the business of making eyewear. It occurred to me that this shape was intentional and aligns with the fact human eyes are drawn as ovals that are wider than they are tall. Deep propositions of this logo include alluding to Oakley’s focus on eyes and a reference to the circular shape of one a primary courtyard and building at the Foothill Ranch headquarters in Southern California.5 Within the industry, Oakley is also known for eyewear innovations and generally align new product announcements and innovations together.6 I believe a third deep meaning for the “O” could be in reference to this iterative cycle of new innovations and subsequently bringing them to the consumer via eyewear.
The principle requires us to recognize and to take into consideration that to be human is to be fallible. When applied by designers, the forgiveness principle can be expressed in two complementary ways. The first is that design should have good affordances to help users avoid making errors. The second is to help users minimize unintended consequences or better yet fully recover from errors when they occur.
An illustrative example of this comes from Bruce Tognazzini, editor of the first eight Apple Human Interface Guidelines. When designing new and exploratory interfaces, he argues strongly for incorporating forgiveness and highlights three of his own principles. These include providing users reversible actions, an escape hatch out of the current path, and a sufficient amount of guidance while remaining out of the way.1 His guidelines have been shown to withstand the test of time. The iPhone for examples demonstrates these qualities despite launching nearly three decades after Bruce’s departure from Apple. In the iPhone interface, even the most complex settings are simplified down to a toggle or menu selection that users can dynamically change anytime. One can always return to the home screen with a single button press or in the latest models a single swipe. And knowing it’s easy to “go home” fostered a willingness to explore and learn the new design which included the new smartphone gesture of pinch-to-zoom.
Printer icon in bottom right
Example of the principle cited by one of my sources: Bruce highlights a funny story in retrospect about Xerox Star, a desktop GUI in the early 1980s. At the time dragging a document icon onto the printer would initiate printing out the document. However, once printed this single action also permanently erased the file from the computer. Engineers rationalized this by claiming the document was now in physical form and hence the electronic file no longer served a useful purpose. Designers ultimately advocated different and won the argument and today these two intents, printing and file deletion, have been separated into two distinct actions.2
Sample of Nike iD website
Example of the principle not cited by one of my sources: In a Medium article Anton Nikolov provides us with an example of the forgiveness principle applied to physical goods. He highlights NikeiD, an online shopping experience that lets you customize colors and graphics on shoes for preview before placing a direct order with Nike.3 While there are no returns on customized shoes and thus no ability to recover from an error, the online experience allows previewing to help minimize potential errors in the first place.
Building call box
Example of the principle not cited by one of my sources and not located online. I found that my building’s telephone entry system incorporated the forgiveness principle in multiple ways. Known more commonly as a call box, it allows visitors to call residents who can remotely unlock the main building door. Upon approaching the box, visitors are immediately greeted with instructions to scroll and locate the intended callee. While it doesn’t explicitly mention the up and down arrows, there aren’t many other keypad buttons that suggest a scrolling action. Once scrolling is initiated, building residents are listed in alphabetical order by last name and first initial. This aids in identifying the correct individual. The “CLR” button can be used to immediately terminate a call should the wrong resident be dialed. Lastly, though not apparent residents can use the call box to let themselves in if set to ring their mobile number. The first two items, a welcome instruction message and listing residents by last name, serve as good affordances to help visitors perform a desired action: calling the right resident. The later two, a CLR button and dialing oneself, provide a safety net to help mitigate unintended consequences.
Yup, that’s a manhole cover. The kind that covers sewer holes. Just walk outside and you’re bound to run into one. They’re typically made of metal but look closely and you might notice the one in the photo is made from fiberglass. So how is this inspiring?
To better appreciate our fiberglass friend, this story is about the Internet and the country of Uganda in East Africa. I was working on a project to bring faster internet capacity to the country. Part of the strategy involved laying fiber optic cables underground. Manholes are added every couple hundred yards to enable easy access for future repairs and cable splits. The original project plan called for metal manhole covers. But it quickly became evident these were stolen by local thieves to be melted and repurposed. This was not only a costly oversight but immediately left open manholes that pedestrians could fall into. After a few phone calls and engineering stress tests, fiberglass quickly became the material of choice.
This is a humble reminder that context matters for design. While one can aspire to design a one size fits all product, sometimes the world just says no. My team assumed metal manhole covers were valued in a universal way only to realize it’s malleable nature opened up possibilities we never considered.
