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!

Update 2/25 – Week 2

This week wasn’t nearly as eventful as last week, but I’m moving along!

I got a temperature/humidity sensor for my Raspberry Pi, just to practice reading sensor data with it. That experiment was successful, and happily, relatively easy! I spent a lot of time rereading basic information about working with Arduinos, and getting the Bluetooth Feather up and running. I couldn’t (or at least, haven’t yet) got my hands on resistors to try out making LEDs blink. I also have a LED ring, but I need to do some soldering before I can use it. I also went and got a physical button and started reading documentation to figure out how that might work. I’m still a bit lost on that, to be honest.

The E-Ink display also came this week, which I spent some time looking at the physical connection between it and the raspberry pi, ideating for a custom case. That part of the project is on hold until I get the button prototype up and working.

On the Raspberry Pi end, I got my bash script for sending a datapoint to Beeminder up and running. This coming week, I’d like to port that script to Python and figure out how to make the button interact with the Bluetooth Feather board.

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.

Update 2/18 – Week 1

I’ve learned a lot of lessons from my first week at this project. I haven’t worked with Raspberry Pi in over a year (since my Designing Humanity Centered Robotics course in Fall 2017), and I’ve never been solely or even primarily responsible for the technical aspects of a project.

Forgetting the major differences between Arduino and Raspberry Pi, I didn’t realize that I was going to need a monitor, keyboard, and mouse at the ready to set up my Pi. So I attempted to get started without any of these things. Yikes.

I banged my head into a brick wall for hours upon hours trying to get this all working last week. The Brown University WiFi uses a security method called WPA2Enterprise, not supported by the automatic WiFi setup program built into Raspbian (my Pi’s operating system). I was plugging the Pi’s SD Card (where the operating system, etc. is stored) into my laptop to edit a document which contains the WiFi settings. This worked to connect my Pi to my phone’s personal hotspot, but not any of the Brown networks. Eventually I gave in and bought an HDMI cord so that I could connect my Pi to the TV in my dorm lounge, and connected my Bluetooth keyboard and mouse to the Pi. Great, but I was no closer to being connected to Brown’s internet!

I started complaining about this problem to my friend Seiji, who told me about wpa_gui, a program that makes setting up WiFi connections much easier. This worked and I successfully connected to Brown WiFi! But I still needed a way to access my Raspberry Pi from my laptop and I could not get SSH to work, which left me in a position where I’d still need a separate display, mouse, and keyboard to operate the Pi. Yesterday I figured out the final problem standing in my way (a missing security certificate in my WiFi setup) and I successfully accessed my Raspberry Pi from my laptop using the Brown WiFi. Whew!


Other things that happened this week: My package with the supplies for my first prototype came, courtesy of Beeminder!

Thank you Beeminder!

After the package came, I was able to 3D-print a case for my Pi, making it much easier to throw in my backpack and work on-the-go

protected, and shimmery!

Now that I’ve got a reliable connection to my Pi, I can get started on the real work in the coming week.

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!

Planning for an initial prototype

Looking to make my vision a reality, I’ve decided to use a Raspberry Pi 3 as the hub for all of this hardware. I hope to both run the display and Beeminder API calls from it (essentially, the Raspberry Pi will make something happen when the button is pressed, in this case telling Beeminder that I’ve completed my task) .

I think that the most sensible protocol to use for the buttons is Bluetooth Low-Energy(BLE). In other living settings, Wi-Fi might make more sense, but since I’m setting all of this up in a college dorm and in previous projects I’ve come across issues with the university networks, BLE will create fewer headaches. Additionally, I’m only planning (at least for now) to place these buttons within my ~100sq ft dorm room, so range and interference isn’t an issue.

I’ve found a few preexisting projects that are serving as helpful guides, especially since I’ve never worked on a robotics/electronics design project before without a team. Aside from of course phi’s dashboard project, which sparked my interest in this sort of project, I’m also referencing this model for bluetooth low-energy buttons made for accessibility applications, and this wifi emergency food button.

I have points of divergence from all of the pre-existing designs I’m drawing inspiration from. With phi’s dashboard, I’m largely hoping to mimic what he sets out to do, but I’m adding this datapoint creation component. The “Pip” bluetooth low energy buttons are build on a now-discontinued bluetooth low energy board. They also have components I don’t think I need, like a buzzer. And they run on AA batteries, making them much bulkier than I’d like my buttons to be. The wifi emergency food button is obviously, run on wifi and not BLE, and accomplishes a singular (and very different) task.

Nevertheless, I’m taking major guidance from these projects. For the dashboard, I think it’s self-explanatory, I’m essentially trying to accomplish the same thing. The “Pip” buttons will help me figure out what hardware components I need, and give me one model for coding to look at. The emergency food button inspired me to really want to design a custom PCB for this project, which I didn’t know was possible on such a small scale until finding this project!

My current plan for how I’m going to spend my time and get from an idea to a working, albeit clunky, prototype(excluding planning and the wait for hardware, of course) is as follows:

1) Get Raspberry Pi set up (SD card, 3d print a case, etc.) and connected to university wifi

2) Make Raspberry Pi successfully call Beeminder API

3) Set up button prototype based on a Feather BLE board

4) connect button prototype to Raspberry Pi

5) successfully transmit some data from Feather to Raspberry Pi

6) get button press to trigger an action

4) Connect these processes to make an API call when button is pressed

I’m realizing I’ve left out the display in this, I need to go read phi‘s documentation a bit more closely, and probably also have the hardware in my hands, before I quite know what to do with this part.

But this alone is a lot of work and feels like a good amount of direction! I’m very excited, see the spreadsheets I’m using to organize myself here. There, you can see my task list and a list of the hardware I’m using.