Sacramento Regional Transit Website

Introduction

The current Sac Regional Transit website lacks a strong visual hierarchy. There is an abundance of information, but it is not organized effectively in a way that is easily accessible for the user. The website should be organized in a way that the user would be able to navigate and find what they need very quickly.

The home page can be redesigned and simplified to be more easily navigable. Currently, there are columns of buttons with the same icon so, at first glance, it is hard to figure out where to look for certain information. The navigation bar can be utilized more effectively so the user can be more easily directed to other pages that cater to their specific needs.

Audience Research

Through an interview with a foreign college student with intensions of using Sac Regional Transit, I learned that he needed to use the website to find route schedules, maps, and to be able to plan trips.

From looking at the current website, he felt that:

  1. The icons are too confusing to use at first glance.

2. There is too much information on the homepage.

3. The important information is on the homepage.

Based on the audience interviews, I was able to create 2 personas and a storyboard.

The most difficult part of creating the personas and storyboard was envisioning the process the user goes through when utilizing this website. The easiest part was understanding the user’s needs based upon their interview.

Sitemap/Wireframes

Based on the user feedback from the current website, I was able to create wireframes for a simplified home page and schedule page. These wireframes and sitemap were created in Adobe Illustrator. The strategy for the sitemap was to minimize the amount of links and information on each page, so the user could find specific information more easily. This means there are more individual pages that have more specific information. Important information such as service updates and a trip planner was included on the home page. The schedule page utilized a scrollable list that displayed maps and schedules on the same page.

The most difficult part of making the sitemap and wireframes was sorting out all of the information that could be omitted. After I determined the most important information, it was easy for me to create a visual hierarchy.

Site Map & Wireframe Sketch of Home Page
Wireframe of Home Page & Route/Schedule Page
Home Page w/ Breakpoints

Digital Mockups

These digital mockups were designed in Adobe Illustrator. The home page has a trip planner below the navbar for easy access. Underneath the trip planner is real-time service alerts and other planned service updates, so riders are able to be aware of changes to service. At the bottom of the home page there is a news gallery which let riders know of other events and information.

The maps and schedule page has the list of routes that the user can scroll through. When the route is selected, the map will appear on the right side and the schedule will appear below for easy reference.

The most difficult part of making these mockups were determining a visually appealing yet functional layout for the homepage (deciding on colors, pictures, etc.). The easiest part was designing the maps and schedules page because it was a layout that was the most intuitive for me to use.

User Testing

The prototype received mostly positive feedback. The purpose of each page was clear, and the features were easily navigable. Some users hoped for a more detailed and interactive map that allowed for enlarging. Also, they hoped there was a function in the trip planner to calculate fare and buy tickets.

I agreed with all of the feedback. However, there are limitations to what I could implement in the scope of this project. The improvements will be implemented in the future with more resources available.

Final Mockups

Based upon the user testing, I created a more detailed mockup of the trip planner page. It includes the trip planner interface which allows the user to calculate fare and buy tickets.

Next Steps

My next steps in this project would be to add more functions to make the maps more navigable and interactive for the user. Also, the pages would be redesigned with a hierarchy based on the most important/frequently-searched information for the user.