Assignment 3 - HCI & Design - Cornell Tech

Material I developed while taking the HCI & Design class at 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.

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

• D Train
• 4 Train
• Shuttle Icon
• NYC Map
• Fastrack Logo
• MTA Logo

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.

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.

Initial Poster For Reference

Part B: Decompose an app of your choice

Slice Material Redesign

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

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

Material Redesign - Tablet

Material Redesign - Desktop