All Aboard for Flavor!
The Story of Subway Station
I was recently faced with the challenge of creating a website for a restaurant makeover. This new concept website of mine is called Subway Station. It is a revamp of the Subway sandwich chain, except it is meant to appeal to an older crowd.
Inspired by a Real Subway
When I went to New York this summer, I rode quite a few subways, and I also went through a lot of subway stations. This was the inspiration for Subway Station. While a subway train is moving, the station is not. People can take their time, pause, and slow down. Why not make a new restaurant based on relaxing and taking things slow?
Website Overview Statement
“…a slower, more relaxing experience.”
The Subway Station is a place where people can stop and relax. They prioritize giving customers what they want. One difference between original Subway and Subway Station is that the customer can sit down to order with table service and can have a slower, more relaxing experience. The target audience is older people who will enjoy a chance to sit down and order their food. This contrasts with original Subway’s usual pick-it-up-and-go model which aims for a faster-paced customer base. It follows that given the change in format, the restaurant website would also need a makeover. In this blog, I will cover some of the steps I took to remake the restaurant website and highlight some of the features it offers.
Final Product Demo
The Subway Station Website Pages
I designed some sample webpages for the Desktop Version of Subwaystation.com, which consisted of the following:
- Homepage — Desktop Version
- Menu Page — Desktop Version
I also designed an alternate Mobile Version to be used on cellular phones:
- Homepage — Mobile Version
- Menu Page — Mobile Version
Let’s take a look at these.
Desktop Version
Homepage — Desktop Version
“All Aboard for Flavor at the Subway Station.”
Since this is the first page that people will see when they come to the Subway Station website, I wanted the homepage to be simple and straight to the point. It also had to give people basic information such as hours and directions so customers can find the restaurant. The goal is to get people to click on the menu button. I also included social media links.
Menu Page — Desktop Version
The menu page features the available food items. The organization makes this page easy to use.
Mobile Version
Next, I modified the webpages to create a mobile version for each. For the Homepage, I reduced the size by omitting the location of the restaurant. To create the Menu Page Mobile Version, I changed the layout of the Desktop Menu Page to create a shape that would fit mobile device screens better.
Features and Design Choices
There are three main features I felt were important. They are as follows:
- Color Scheme
- Simple Design
- Simple Navigation
Color Scheme
I decided to have blue as Subway Station’s primary color. Two light blue colors are featured prominently on the website. I believe that older people would be attracted to lighter colors as opposed to bright, bold colors. Blue is a peaceful color and seems relaxing. By choosing blue, I wanted to set a relaxing mood for my customers.
Simple Design
I went with a simple design because I wanted to be straight to the point. I want my restaurant to be honest and straightforward which is what this restaurant is all about. This design choice appeals to human psychology since it is easy for the brain to understand the layout.
Simple Navigation
Common Conventions were used to keep navigation simple and intuitive, so customers can easily order by clicking on the appropriate areas. One example of a common convention is the hamburger menu. The layout uses Human Psychology to work the way our brains work, making navigation intuitive and easy to understand.
Getting Started Designing
The original concept for Subway Station was to create a place for older individuals to dine out in a relaxing atmosphere. Once that idea was born, I studied the original Subway website and other restaurants to gain inspiration from what they were doing and took notes of their best practices.
Wireframes
The webpages started off as sketches which turned into wireframes. Creating wireframes made it easier to visualize how the website would look and made it easier to fill in the details later. Here is what my wireframe stage looked like:
Next Steps
After the wireframes were designed, I considered what color to choose. I mostly had blue in mind because it would set the mood for relaxation and be attractive to the older audience. People in today’s world need healthy ways to relax, and sitting down at a restaurant and being served can be a good outlet for the stress that accumulates throughout the day. The colors and additional details of each page were filled in next.
Revisions
This project needed revising along the way, as most projects do. I revised my website with a few design changes. Mainly, I added a proper footer along with a map on the Homepage Desktop Version.
Mobile Pages — Final Product
Then I revised the desktop webpages in order to get the mobile pages. After making a few changes, my project was finished, and the Subwaystation.com website was born. Customers can come to relax and leave the stress behind!
