UI/UX: Redesign Dodgers Ticketing

For CS 0130 User Interfaces User Experiences, I chose to redesign the season ticketing website for the Los Angeles Dodgers. Below is the process and result.

Redesign

In response to considerable usability issues, I saught to redesign the Dodgers 2020 Season Ticket website, accessable at this link: http:// dodgers.brochure-mlb.com/2020tickets/

page1image2564146384
page1image2564147248

Fig. A: The landing page for the 2020 Dodgers Season Ticket Website, viewable at http:// dodgers.brochure-mlb.com/2020tickets/

This site is made for purchasing season tickets to the 2020 Los Angeles Dodgers. It’s a scolling style website, with links in the top menu bar linking to different sections of the website. Different plans and their benefits, along with seating and pricing information, are presented in different sections of the site.

Problems

Several usability problems are clear when using the existing site. First, the scrolling-style of the side makes it difficult to see all relevant information on one screen, or see the features different plans in comparison.

For example, in the Plans & Benefits Section, the full list of benefits is not able to fit on most laptop screens, so a user needs to scroll down between switching plans in order to see all of the changes. Frequent decorative page breaks separate information that a user would likely want to see at the same time.

Since Dodgers Season Ticket Memberships are purchased directly through an agent, this website functions as a sort of catalogue, hoping to get a user to fill out the Membership Interest Form. However, this form is rather long, containing 20 fields a user must fill out before submitting. Much of this information would need to be gathered by a Sales Agent during an appointment anyway, rendering this step redundant.

There were several openings for improvement to this site, and I created wireframe prototypes of some of my ideas.

Wizard of Oz

I tested my redesigned interface by printing out the various elements and inviting test subjects to use the interface.

Daniel used the top bar to navigate through each page before clicking “Join Now” at the bottom of the benefits page and filling out the form. While using the interface he commented on several visual design features, including the uneven size of the labels on the table in “Key Features”. He also complained about the lorem ipsum text, but as that’s

simply a characteristic of the wireframe it wouldn’t prompt any changes. He commented that he found it readable, but was bothered by a lack of alignment between elements of some pages. He also disliked the typeface used for smaller text, saying it wasn’t as readable as he would have liked.

Stacey started by clicking on the “Plans” button, navigating to that page. Once there, she assumed that the white boxes labeling each of the plans were buttons, and tried to click on them. She noted that this was confusing, and used the “Contact Us” form to get to the membership form. She noted that there wasn’t any feedback when selecting the number of tickets to purchase, and like Daniel, complained about readability on the smaller text. Stacey praised the short length of the contact form, noting that she likely wouldn’t havefilled out a longer form.

Design Reevaluation

After the Wizard of Oz testing trials, I tried to take that feedback and incorporate it into the next iteration of my redesign.

The flow between pages will remain the same as in the previous version shown above (Fig 4). However the individual pages will have readjustments.

Design Reevaluation

After the Wizard of Oz testing trials, I tried to take that feedback and incorporate it into the next iteration of my redesign.

The flow between pages will remain the same as in the previous version shown above (Fig 4). However the individual pages will have readjustments

Visual Redesign

Fig. 8: The homepage of my redesign, fully rendered. Logo is from the original website http://dodgers.brochure-mlb.com/2020tickets/. Stadium background image is my own.

I made a mockup of my redesign as it would appear in a desktop browser. I added some subtle contrast outline on clickable buttons to give them greater visual contrast, but otherwise maintained the design from earlier mockups, with a one-column vertical grid and scrolling navigation. I chose a background image that would allow me to put the top menu bar and other elements with text in areas of negative space, and the lines in the

field lead the eye to the “Join Now” button.

Responsive Redesign

Because of the scrolling-style design, this page will scale fairly easily to different device sizes. The padding on the left and right will reduce proportionally when the window is smaller, keeping the elements in the middle centered.

On a portrait mode tablet, a user would have minimal padding and the website would appear the same as on the desktop, just without the padding on the left and right.
On a portrait mode smartphone, the layout would also be largely maintained, with font sizes scaling appropriately, but the top menu bar would become a sidebar instead, accessible from a button in the top left corner.

UI/UX: Everyday UI

This semester, I took CS0130 User Interfaces User Experiences. I did two analyses of everyday UI/UX problems and proposed a redesign that would improve them.

I chose to address the elevator and it’s button configuration in my building, and Brown’s system for changing grading options in courses.

You can read the full articles here:

https://medium.com/@cchaleff/an-elevated-commute-a9ecc6442fe6

https://medium.com/@cchaleff/ban-banner-or-at-least-reform-it-d6c92102ccb9

3D-Printable Shabbat Lightswitch Cover

Shabbat Candles on a black backgrund, lit. image source

In the Jewish tradition, Shabbat serves as a time of total rest. Millenia of legal development have shaped a Shabbat-specific paradigm of engaging with our material environment, centered around refraining from melacha, or “creative labor”, as defined by Jewish tradition. 

Light is an integral part of Shabbat– lighting two candles is the first action done to start Shabbat, and a new day in the Jewish calendar begins at sundown. Additionally, part of traditional Shabbat observance is not modifying electric circuits (i.e. flipping switches, using a smartphone).

A popular “Shabbat Lamp” design, where a shade blocks or shows an LED bulb, altering the level of light without adjusting the circuit. image source

Before Shabbat, observant Jews prepare so they can avoid unnecessary melacha, including making sure that any lights or other electronics they might need are plugged in, turned on, or set on timers. There’s no shortage of commercially available devices to aid in one’s shabbat observance. To those who haven’t experienced this, these preparations may seem inane, but ultimately these many small changes create the experience where on Shabbat, everything you need is already taken care of, and one can indulge in a more complete form of rest. I like to think of it as my past self waiting on my future self; I cooked and cleaned and adjusted all my lights before Shabbat so that on Shabbat, I can just enjoy in comfort, without a care in the world!

In observant Jewish households lightswitches are sometimes taped or covered before Shabbat as a measure to prevent accidentally flipping the switch. If one accidentally changes a switch, you’re stuck with the switch like that until the end of Shabbat, so it can be pretty uncomfortable if, for example, your dinner guest turns off the bathroom light. It’s fine to set lights on timers, but deliberately setting off a sensor is considered equivalent to flipping a switch in Jewish law, making many technological solutions non-starters.

There are some commercially available switch covers, but despite the DIY nature of Shabbat observance, as this long standing set of traditions is brought to life in a different way by every household, I’ve scowered the Internet and haven’t found any DIY Shabbat lighting projects! I decided I had to change this, and designed my own DIY switch cover.

Simplicity was my utmost priority in designing this switch cover. In covering a switch, I’m effectively removing an affordance that was designed to be touched and noticed. I want the switch cover to blend in and not be distracting, and be adaptable to many different styles of decor.

Another key priority in designing this switch cover is making it easy to attach and remove. I’ve seen other lightswitch mounts that use the screws above and below the lightswitch to hold them, but I didn’t want to make it so permanent when 6 days/week the cover would be off. I discovered by accident that the screws on my lightswitch are magnetic, and that in fact some of the area of the switch unit is as well! This seemed like a perfect solution for both attaching and storing the switch cover.

I took the dimensions of the screws and the extruding part of the switch, bought some small magnets, and made a simple first design.

It turned out that the magnets I purchased were actually larger than their listed dimensions, so they wouldn’t fit into the holes I made for them in my print, even with the allowance I left. Nevertheless, I was determined to test this design so I used poster tac to temporarily adhere it.

What I found in my testing was that in my small room, the sharp corners and protrusion actually drew my attention to the switch. The bright color certainly didn’t help either. I wanted to make the design more subtle.

I decided to make the cover larger and and after a handful of test prints, I found a design that printed quickly and worked consistently. In a darker color and a less dramaticaly protruding design, this cover worked to conceal the switch without drawing too much extra attention to itself. Additionally, it stows nicely on weekdays.

Birkon HaShachar: A bilingual guide to Jewish morning ritual

Over the course of this semester, I’ve been studying Jewish object culture through the lens of design. I’ve paid particular attention to Jewish publishing. Concurrently this semester I took Art of the Book, where I learned much about book construction, printmaking, typography.

Some common siddurim (prayerbooks) used by English-speaking Jews
image source

Most Jewish prayerbooks of today are standardized, with each respective movement and ethnic tradition having their own books. For example, in my circles, the most common siddurim are the Koren Sacks and ArtScroll.

Bentchers (that’s Yiddish, in Hebrew they’re called Birkonim), prayer books that only contain birkat hamazon, the blessing after meals, are the rare exception to this rule.

The bin (and pile for overflow) of benchers at my rabbi’s house. Though most are white, many have covers with foiled text personalizing them and the size and breadth of content vary widely.

It’s a widespread custom to order custom commemorative birkonim for celebrations such as weddings and bar/bat mitzvahs. There are a massive range of designs available, and they are often chosen and personalized with great care. These small books are given to attendees and becomes a momento of the celebration. Within my Jewish community, virtually every household has a basket or drawer full of these books near their kitchen table, facilitating prayer while commemorating the celebrations of friends and family.

Reflecting on the phenomena of custom Bentchers/Birkonim, I wondered why we don’t have other books that only contain a small portion of prayers? Bentchers with the blessing after meals are tied to these communal celebrations, but what about the parts of Jewish prayer that are just as regular but more personal, and individual?

With all this in mind I saught out to make a new kind of birkon, a “Birkon HaShachar”. While a typical Birkon contains Birkat Hamazon, my Birkon contains Birkat HaShachar, the Jewish morning blessings.

There are many design problems that arise in making Jewish prayer books, the first being language. Most American Jewish Prayerbooks are bilingual Hebrew/English, but since Hebrew written right-to-left and has no capital letters, it presents some unique design challenges. Additionally, some prayerbooks include transliteration of Hebrew into the English alphabet. I made a chart of the various methods I’d seen in different prayer books to weigh their pros and cons, but I ultimately chose to create an entirely new style of setting these languages next to each other.

I wanted to make a book that felt special but was simple in construction. Inspired by a book form I learned in my class made from only 1 sheet of paper, I realized I could make a flippable booklet, one side in Hebrew, one side in English.

I made some curatorial choices in the text. First, I chose to omit blessings that are tied to particular actions, such as washing one’s hands in the morning and Torah Study. I wanted to focus on the blessings that don’t require any special actions and are instead focused on contemplation, G-d, and the self.

Though I used the traditional Hebrew text, I chose to make some interpretive choices in the English text. A dry translation would have given a false impression of the depth and meaning of the Hebrew, so I chose to name the English an interpretation rather than a translation. I started from the base of Sefaria’s English translation, and made edits for brevity, clarity, and removed gendered language for G-d. Additionally, I chose to use the variation of the blessings I personally say according to my custom and gender.

Accompanied by subtle illustration, my Birkon HaShachar serves as a visual guide to Jewish morning blessings.  I used blocks of color and varying text size to emphasize relationships between phrases and encourage contemplation.

Wayland Kosher Kitchen

I took on the task of creating clear signage for the new kosher kitchen opening in Wayland House dorm for student use.

In order to follow kosher dietary laws, meat and dairy must be kept strictly separate. In addition to not mixing meat and milk ingredients, utensils that are used for meat may not be used to prepare dairy foods, and vice versa, necessitating separate sets of dishes. Though in practice there’s ways to use a single stove/oven for both meat and milk, for the sake of reducing mistakes in a shared space, the Wayland Kosher Kitchen has separate sinks, stoves, ovens, fridges, and countertop space for both meat and dairy.

The Wayland Kosher Kitchen, before each side of the kitchen had been designated for either meat or dairy.


In designing signage, several user experience factors came into play. In kosher kitchens, words from multiple languages are often used to describe the type of food or utensil. For example, one might say that a fork is milchig, using the Yiddish word for dairy. Since the English, Hebrew and Yiddish words for meat/dairy are all frequently used, I wanted to include all three on main signage, to make things more clear for anyone who might not know one of the words.

I also wanted to make sure that the content of the signs was not the only thing distinguishing the meat and dairy side, while still giving the space a cohesive aesthetic. To accomplish this, I decided to adopt the standard color scheme for Kosher kitchens, where blue is associated with dairy and red is associated with meat. Additionally, I chose a sans-serif font for the Dairy signage, and a serif font for the meat signage, adding yet another visual cue reinforcing the difference between each side.

In the interest of durability, I chose to create the signs out of acrylic, first laser-engraving the words into a larger white piece, and laser-cutting out the letters from sheets of blue and red acrylic. I then used solvent to attach the colored letters to the white base sheet.

The letters cut out/engraved, ready to assemble.
This can of solvent was impossible to open, eventually I hammered a screwdriver through it to puncture a hole in the metal top, what a nightmare!
Attaching the letters
Finishing touches!
Ready and open for business!

How to connect to eduroam/Brown WiFi on Raspbian

This took me so long to figure out, and I don’t see any reason for anyone else to waste as much time as I did on this!

Things you will need:

  • Raspberry Pi
  • SD card with Raspbian installed
  • Display
  • Keyboard
  • Mouse
  • Power supply for Pi
  • Cords to connect everything

Step 1: Flash Raspbian onto an SD card, make sure to pick a version that includes a graphical user interface (not Raspbian Lite)

Step 2: Put the SD card into the Pi, connect monitor/keyboard/mouse/power supply and wait for Pi to turn on

Step 3: Open a terminal window and enter the following to install wpa_gui (a graphical interface for configuring WiFi that supports WPA2Enterprise)

sudo apt-get install wpagui

Step 4: Now, give wpa-gui the appropriate permissions with these commands

sudo chmod 600 /etc/wpa_supplicant/wpa_supplicant.conf

sudo adduser pi netdev

Step 5: (Optional) Now, create a desktop shortcut to wpa_gui with this command. (I like doing this because it makes launching a lot easier, but you don’t strictly have to)

cp /usr/share/applications/wpa_gui.desktop ~/Desktop

Step 6: Launch wpa_gui, select “wlan0” for the Address, and go to the “Manage Networks” tab, then, click “Add” and enter network configuration details as follows:

insert your school’s information as is appropriate

While trying to connect on Brown’s campus, you can get the information to fill out this panel by navigating to wifi.brown.edu while connected to the Brown_Guest network, selecting “This Device” and then “Other Operating Systems” then “None of these”. After you click the name of the network you want to join, the necessary information will be displayed.

For the “CA Certificate” line, just copy and paste the certificate from the “Root CA Certificate” link.

And there you have it! You’re now connected to your WPA2Enterprise network of choice on Raspbian.

What’s the deal with the background image?

I took a Jewelry and Metalsmithing course at RISD this winter (2019), entitled “Repair: Making Connections”. We learned basic cold metal forming techniques, primarily working with found objects, exploring concepts of disposability, repair, and re-use. It was a delight!

My background image is of my final project for this course. I was using the KonMari method to clean my room at the time, and I came across my etrog from last Sukkos. The etrog had materially deprecated, rendering it unsuitable for its original ritual purpose. I sought to restore functionality to this beautiful object, exploring (and challenging) disposability in Jewish object culture.

An etrog (or citron, in English) is an fruit used during the Jewish festival of Sukkos, which lasts a week in the fall. This fruit is used throughout the week for ritual purposes, along with palm fronds, myrtle and willow leaves. Together they are referred to as the arba minim, or four species.

Because of their ritual use, etrogim (plural of etrog) are subject to high cosmetic standards. Specifically, in order to be valid for ritual use according to halakha (Jewish religious law), etrogim need to be moist, virtually free of blemishes, and have an intact pitom (stigma). If the pitom is broken off, or the skin is blemished, the fruit may be invalid for ritual use.

Finding my etrog while cleaning was the first time I had seen it since October. Last Sukkos was my first time owning my own set of arba minim, and they aren’t cheap. In the United States, getting a kosher set for less than $50 would be a steal. What had once been a ripe, flawless yellow fruit was now shriveled and rust brown. Cosmetically, this once perfect specimen had totally degraded. However, miraculously the pitom had still not broken off!

Another important feature of the etrog is its absolutely lovely smell, which only became stronger as mine dried out. It’s similar to other citrus fruits like lemon or orange, but it has this lovely sweetness that’s almost floral. I couldn’t bear to just put it back in its box, and I instantly had visions of how utterly gorgeous that rust orange would look with silver.

A common use for old etrogim is for their fragrance, often serving as the besamim (spices) needed for the havdalah ritual, done each week to end Shabbos. During the havdalah ritual, a multiwick candle is lit and typically hand-held throughout the blessings. When it comes time to smell the spices, they are often kept in a dedicated spice holder which typically look something like this. You need to open them to smell the spices, and as I’m sure you can imagine it can be difficult to do that while holding a candle with a very large flame! It’s easy to drop something, and candle wax will drip over everything.

I saw an opportunity. My prompt for my final was to create a necklace or brooch with found objects, utilizing the metalworking techniques that we learned. I chose to wrap my etrog in silver (which conveniently, is commonly used for Judaica) turning it into a pendant. This takes out the awkward and dangerous step of trying to open a jar while holding a candle! And of course, I wrapped the etrog such that the pitom would be protected, highlighting the fortitude of this fruit that it survived this long!

I began with 4 pieces of 20 gauge sterling silver and my etrog. I used a blowtorch to solder these pieces of silver together into one 2 foot long strip. I decided to mimic a fresh citrus peel texture on the silver, which I did by hammering and poking the metal with a center-punch. I used an anvil to hammer the long strip into a spiral shape, then used my hands to work the etrog into place. I created the bail (hole for the cord to pass through) out of a piece of scrap silver, and soldered everything together.

This project represents the intersection of my two greatest intellectual and personal passions. Using my intimate knowledge of Jewish law, practice and tradition along with my object fabrication skills, I restored function to a object rendered halakhically invalid, re-purposing it to enhance a different ritual experience. And I think it’s rather beautiful, too!