Interactive DesignerCompetitor AnalysisVisual Design BrandingInteractive Prototyping User Interface Wireframing Mobile Design

Overview

Stakeholder Discussions

Analyzing business problems. Examining the Amtrak Ecosystem .

What was the problem?


-Was not developed user-centered design and an understanding their needs.
- Was not developed a single underlying system that unifies the user experience across platforms and devices.
-Was not developed a visual language that provide a flexible foundation for innovation and brand expression.

What was the Technical problem?


-We deal with the past (there are about 55,000 -60,000 lines of CSS with no inventory - called Legacy) which seriously hurt the future and Speed of performance.
- We never had a chance to build a mobile first design, because this has been impossible for example: to redesign navigation as a vital part of small devices (navigation is intelligence of the system).
-Between the design and development teams is a huge gap like the opportunity for personal interpretations (components and their interactions, Interaction and microinteractions, movement and user feedback with our app) which severely damages the vision of a modern product initiated by the design team.

User Experience Design Process

Competitor Analysis

Examining the Amtrak Ecosystem

Anylitics Review

Persona

Fire Finder| Auto Train | Search Result

Usability Test

Trip Detail

User Entry: Add Traveler Discount: PWD- Click “Find Trains” 1.Anonymous/Guest consumer has selected PWD as a Passenger Type when the user is in Fare Finder
User Exit: Click “Save” after completing questionnaire

UX metrics

UX metrics are a set of quantitative data points used to measure, compare, and track the user experience of a website or app over time.

Fire Finder| Auto Train | Search Parameters


Color | Typography

Color
Amtrak has adopted a color theme with one primary color, and five additional colors. This elaborate color theme allows Amtrak to present readable, distinct infographics.

Typography | Typefaces
Amtrak uses two typefaces: Source Sans Pro and Merriweather.
Source Sans Pro is an open-source sans serif typeface created for legibility in UI design.

Typesetting
Readable text allows users to efficiently read and take in textual information, whereas text that is not readable turns off readers or makes it challenging for them to stay focused

Page heading
Section heading, Section of the page



laptop Sam HomePage

Test & Iterate