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.

Assignment 3 - HCI and Design

Copyright Nicola Dell

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