Assignment 3 - HCI & Design - Cornell Tech

Material I developed while taking the HCI & Design class at Cornell Tech.

Assignment 3 - HCI & Design - Cornell Tech

As part of Assignment 3 for my class HCI & Design at Cornell Tech, I was tasked with re-designing an ad for the MTA's Fast-track and decomposing an app of my choice.

Part A: Can we fix this? πŸ”—οΈŽ

Redesign of MTA Poster πŸ”—οΈŽ

This redesigned poster for the MTA aims to notify readers that the D train will be closed down for FastTrack repairs.

MTA Redesign 2

The Process πŸ”—οΈŽ

Who is the user? πŸ”—οΈŽ

Anyone trying to use the D-Train and is at one of the stops between or on 161 St-Yankee Stadium and 205 Street. Tourists. New Yorkers.

I'm assuming the readable distance to be close since the reader can be right in front of the poster.

What is the medium? πŸ”—οΈŽ

I decided to use a poster that one might find in the subway while walking as my medium.

How does the hierarchy look like? πŸ”—οΈŽ

Sorted from most to least chunks of information:

  1. Travel alternatives
  2. Similar stations (D to 4)
  3. When
  4. Actual notice of D train not running
  5. Who is releasing this notice

Font πŸ”—οΈŽ

The font Helvetica is the one that has been used by the MTA for the past 20 years so I decided to just get more options in font weight by using Helvetica Neue. Not much of a change.

External Resources πŸ”—οΈŽ

Colors πŸ”—οΈŽ

The red color for the notice on the top is the color I got from the 1 train logo (#EF3E42).

The other colors are black, white, green from the 4 train and orange from the D train.

Spacing πŸ”—οΈŽ

I made sure to have everything more evenly spaced out instead of floating all the way left or right. The travel alternatives had a lot of line and paragraph spacing to accommodate the icons.

Weight πŸ”—οΈŽ

The top two headers have more weight than the other sections since they're the most relevant to the reader. The (3) when section is bold while the (4) actual notice of the train not running and the (1) travel alternatives header is of medium weight.

The (1) travel alternatives are regular weight since they take up the most space.

Similar Stations πŸ”—οΈŽ

I wanted an easier way to visualize the similar stations so I got a map of all the stations for the MTA and dissected it so I just got the D and 4 train stations.

This way, readers could get an easy snapshot of what station they should head to.

MTA Redesign 1

Size πŸ”—οΈŽ

The poster size accommodates A1 dimensions which I felt was a realistic dimension for a poster in the subway.

Standard ISO A1 paper dimensions are: 594mm x 841mm or 23.39” x 33.11”. Equivalent A1 paper dimensions in pixels at 300 DPI and 72 DPI respectively are 7016 pixels x 9933 pixels (print resolution) and 1648 pixels x 2384 pixels (screen resolution).

Layout πŸ”—οΈŽ

First I broke the page into 12 sections so that 1/12 was 68.67 px wide and purposely organized the layout to accommodate the hierarchies:

  1. Travel alternatives
  2. Similar stations (D to 4)
  3. When
  4. Actual notice of D train not running
  5. Who is releasing this notice (bottom right rectangle)

The (3) when and (4) actual notice of the D train not running are the most important aspects the reader needs to understand so they're on top and take up the full width of the page.

The (2) similar stations and (1) the header for travel alternatives take up 5/12 of the page in terms of width. Then the actual (1) travel alternatives and (5) who's releasing the notice take up the other 7/12 of the page.

MTA Redesign 4

Initial Poster For Reference πŸ”—οΈŽ

MTA Redesign 3

Part B: Decompose an app of your choice πŸ”—οΈŽ

Slice Material Redesign πŸ”—οΈŽ

Slice Redesign 1

The Task πŸ”—οΈŽ

I was tasked with decomposing an app of my choice and redesigning one of the main pages of the app with Google's Material Design guidelines for my HCI & Design class at Cornell Tech.

I chose SliceΒ as the app of my choice. There are many apps called Slice out there so to clarify, I'm referring to the app where you can order pizza from local pizzerias.

I personally love ordering from this website because of my obsession with pizza, so it seemed like an ideal choice.

Components πŸ”—οΈŽ

The 3 main pages of Slice are as follows.

  1. the home page
  2. the restaurant options a user gets once they enter their address
  3. the menu of the chosen restaurant.

I decided to focus on the restaurant options page since that's the one users would browse through a lot.

Ergo, I called out and identified the components and patterns on the current restaurant options page.

Current Restaurant Options Page πŸ”—οΈŽ

Slice Redesign 4

Typography πŸ”—οΈŽ

The logo font is unique in itself and was created by Slice. The font in the logo is not used anywhere else except for the branding of the logo.

The secondary font used is Rift, either bold or regular weight.

Then the font used throughout the rest of the website is β€˜Helvetica Neue’.

Slice actually doesn't have too much diversity in their typefaces which is usually a good thing for simplicity but Helvetica isn't the nicest font out there either.

Hierarchy πŸ”—οΈŽ

The hierarchy is as follows.

  1. navigation
  2. search input
  3. results from search input
  4. footer

Design Patterns πŸ”—οΈŽ

  • Navigation
  • Search

Design Components πŸ”—οΈŽ

  • Menu
  • Text Field
  • Card
  • Divider
  • Button
  • Bottom Navigation

Material Redesign - Mobile πŸ”—οΈŽ

Slice Redesign 2 Slice Redesign 3

Material Redesign - Tablet πŸ”—οΈŽ

Slice Redesign 5 Slice Redesign 6

Material Redesign - Desktop πŸ”—οΈŽ

Slice Redesign 7 Slice Redesign 8