Duquesne Incline Website Redesign, UX Design & Development
April 2021
Redesigned, restructured, and developed the Duquesne Incline official site. Redesigned the website by creating a new design theme and considering the users’ experience. The site was restructured by building a completely new site map and Information Architecture. The website was developed through HTML5, CSS3, and JavaScript and is fully responsive.
Why
The Duquesne Incline official website lacks a design theme and needs to redefine the user experience goal. Thus, a construction for the whole site needs to be fully done. The site needed to reorganize the information and the users’ needs.
How
Project
Design
-
Adobe XD
-
Adobe Illustrator
Development
-
HTML5 / CSS3
-
JavaScript
Web development project
for Information Systems
Milieux Course (67-250).
PRELIMINARY RESEARCH
Project Goals
-
To determine the users’ needs when visiting this website.
-
Make sure the essential information could be noticed in one sight.
-
Build a new structure for organizing the information on the website.
-
Create a brand identity.
User Research - Personas
A visitor visiting Pittsburgh with her family
I want to look around Pittsburgh and find the possible best tour place to look over the whole city, so that I could leave a memorable experience with my family.
Solutions
Create a new website that contains the same information, but structure it in a way where users could easily navigate through the website: organize b related information. Reference from tourist websites and make it user-friendly by creating something the users could easily expect from every step. Make important information: schedule, location, fare fee, and contact information easily accessible. Make sure to create a brand identity and center around the identity throughout the website.
Duquesne Incline Current Web Design
DESIGN GUIDE
Information Architecture
Site Map
DESIGN CONCEPT
Style Guide
I have focused on the most common fonts: Helvetica and PT Sans. Also, the colors are focused on green with having different shades for gradation. The logo shows the long history of the incline, thus is crucial to include.
Colors
#006600
#012601
#7AF586
#F7FFD9
Typography
Aa
Helvetica Bold
Aa
PT Sans Bold
Aa
Helvetica Regular
Aa
Helvetica Light
Aa
PT Sans Regular
Logo
Typographic Usage
Helvetica is one of the most basic fonts. It is used for body texts throughout the website.
PT Sans is also a font that designers use often in their web designs. This font was used for the website title, header menus, and sub-pages’ titles.
Visual Design
