Unitrans Website Redesign Process
Sandra Bae
Isabel Bagsik
THE PROBLEM
- Why Redesign the Unitrans Website?
From casual observations and even to the extent of interviewing with other people, we have found that the current Unitrans website is cluttered and has unnecessary information that is not relevant to the current page. From that, we have felt that the current website can be re-organized in a manner where everything is easier to understand the information presented on the website. Also, we felt the need to redesign the website because of the way information was presented. One major flaw with the current website is how the times are listed for the bus stops. Because most people use the Unitrans website in order to find the times for the bus stop, it is imperative that we present the information in a manner that is easy and to understand and use.
Currently the times are listed horizontally as users are expected to scroll over the textbox in order find more times. However, because all the times are listed within the confined textbox, as users scroll over, it makes users lose sight of their respective bus stop, causing them to go back to the first position.
2. Why would the Davis community care?
A redesign of the Unitrans website would benefit the Davis community greatly. Besides the overall aesthetic and organization that needs to be changed, user experience needs great improvement as well. There are actually unnecessary and confusing navigation flow between pages, which causes discomfort in user experience. From interviewing a variety of Unitrans website users, specifically UC Davis students that ranged from Unitrans drivers, native English speakers, and students who did not speak English as their first language, we found similarities in the problems that the website has. For instance, many seemed to answer along the same lines about the horizontal time table. It would be a hassle to scroll left and right, and one would lose their place and look at the wrong time for the wrong stop. There also was some issues with unnecessary and redundant tabs or sections, when there really only needs to be one area. For instance Service Announcements occurs on every page, instead of just staying on the News tab, causing information overload. Due to personal observations, there are also Unitrans bus users that are not native English speakers, so to adapt the website to be more user friendly to them would mean to add a Language tab to translate the website to help them navigate the site more easily. To redesign the Unitrans website would benefit the larger Davis community and allow for ease in Unitrans use.
3. Original Website Design
SITEMAP
To see how the navigation flow was like in the current Unitrans website, I decided to draw out the sitemap. I noticed some unnecessary and extraneous navigation paths, which led to thinking about reduction for simplicity.
HOME tab
As seen on the current home page the main feature is the tracking feature for the the next upcoming bus. We have decided to keep this current feature as most people come to the Unitrans website to check for the time. We felt by putting the tracking predictions in the home page it would satisfy the user’s number one need, which is to check the time for the next upcoming bus. However, we felt that some of the aspects that we could possibly change is the clutter surrounding the arrival prediction there was too much going on in the current home page where people would be distracted by the news and and event column.
ROUTE INFORMATION tab
In the current route information page there was several tabs as shown in the header. By default the header that is uploaded when first entering the page is the bus lines, we agreed with this choice because not everyone has all the same bus routes. Thus, it would be fair for the users to choose their respective routes and proceed to the next step. However, what we did not agree with the current page is how there are too many tabs separated. We felt that some of the tabs could be joined together in order to make the best use of them together. Examples would be the “live bus” and “bus lines”. Also, like the home page, we felt that the news and events column was detracting from the user’s focus, which is ultimately to find out more about the bus route.
NEWS tab
The current News Tab has several boxed sections, which creates information overload. This causes a user to feel overwhelmed and not sure where to look first. Some areas are also redundant, such as the Service Announcements, which has both a separate clickable title and a boxed section on the same page.
FARES tab
The Fares Tab is fairly simple, but seems to not have any logical organization. It is merely a list of different fares for different people or tickets.
PAIN POINTS
After interviewing a few Unitrans website users, we discovered pain points while using the site. They included an unclear specified schedule (if regular or a special service schedule), too small typeface that you cannot click on correctly, and difficulty scrolling through the timetable.
THE STRUGGLE
A. Initial Sketches
At the start, we wanted to go towards a simplistic, minimalistic approach, basically on the opposite spectrum of where the current design is at. During our discussion for the Home page, we wanted to strip away the unnecessary and only show what all of our interviewees said they used the website for: when the bus would arrive. With this, we wanted to show in large size the amount of time it would take for the next bus to arrive, the bus line, the direction, and the stop.
For the route information page, we wanted to incorporate the existing features of the current website and add some new features as well. One of the main changes we decided to incorporate as combining some of the existing features together. We have noticed that in the current website the features are all isolated and it requires the user to click numerously to get one information for another. However because all the information are all related we thought it would be more effective and efficient if features were added together in one page. So with that we added the live map and list of bus routes together. From there a time table would slide down from the text box, above where it would show the list of time according to the time of the day. From here the user would only need to click 2 times minimum.
B. First Digital Mockups and Critiques
Our first digital mockup is almost an exact replica of our original sketch, where we have our main information in large size in the middle to showcase it as the main reason for a user to visit the site. The Service Announcements are now removed so that there is less clutter. After this sketch and our intentions for the rest of the site was presented to a group of three other fellow designers, our Unitrans website redesign plan was well received and we got positive feedback in our critiques.
C. Second Digital Mockups and Critiques
We decided upon a color palette that is reminiscent to the current Unitrans website, keeping the iconic red, and adding neutral accent colors of beige, white and black.
COLOR PALETTE
HOME tab
ROUTE INFORMATION tab
For the route information page we have decided to combine some of the existing features in the current website. We have decided that as soon as the user enters the route information tab they would see a list of all the bus routes and a live map side by side. A google search would be added at the top for those who are not sure which bus line to take. But for those who do, they would click their respective bus route, which the live map of all the bus routes would specifically turn into a live map of the specific route. By doing so the user is able to see the current location of the bus and the time when the next bus is coming. When the user clicks on a specific route on the left, a time table would slide out. And based on the live feed time of the day it would show the appropriate list of time. However, if the user would need to look at the times at the different times of the day, we have decided to include a feature where they are able to specifically see times for am and pm times.
NEWS tab
From our first critiques, we took those suggestions and feedback and kept them in mind during our second round of digital mockups. For the News tab, we wanted to continue our initial design of simplicity by cleaning up the redundant Service announcement boxes. To remedy that, we wanted to mimic the home page by having the main information set in the center of the screen. To organize the different News categories, we designed a secondary tab to open up after one click ons the News tab. This would also open up a page that has the same subcategories in the middle of the page. Once one clicks on of the topics in the middle of the page or the secondary tab, the site leads you to more information about either Featured, Service Announcements, or Unitrans Archive. Here you can see an example of what the navigation flow would be when one clicks on the News tab > Featured tab.
FARES tab
For the Fares tab, we decided to organize the different types of fares into their own neat categories instead of one unorganized list. On the main page for the Fares tab, the subcategories are listed and described, along with what would be found within each subcategory, underneath the descriptions when you scroll down.
Like the News tab, we designed a secondary tab to appear when the Fares tab was clicked. When a subcategory in the secondary tab was clicked, it would go to a page with a list of which people or what tickets are eligible for that type of Fare, which is clickable. Once clicked, it would lead to a page that goes into more detail about that fare. For instance, when one clicks on Fares, they can click on Unlimited Access, and within that section, they can click on UCD Undergraduate Students and then are led to a page describing what that fare for students entails.
FEEDBACK
After presenting our mockups, we were given constructive criticism on what to improve on. Because this was a partner project, certain components were not consistent, so we had to make sure things like the main header had the same tabs, the secondary tabs should be the same color, include the Unitrans logo on the bottom, and the body font should be the same.
THE SOLUTION
For the final design, one of the major changes we incorporated into the final design is the change of the header. In our first prototype, there was a main header and a secondary header that would appear below the main header once a tab was clicked. However, we decided to change that by changing the header into an accordion style header. We felt this would have be more effective and easier for the user to get from one destination to another with less clicks. Another main change in the final design was to remove the boxes that were first shown in the first prototype. We felt it would be more useful to use the entire space of the webpage, rather than confining the text and information into a box. By confining the information, we felt that it limited the user by making the text and information harder to see and navigate.
Final Designs
HOME tab
From the first design, the home page has not been changed except for header. We still felt that the home page’s focus should solely be the arrival prediction, which is why the page looks very minimal
ROUTE INFORMATION tab
For the route information page we have left everything the same except removed the box. By doing so this allowed us to maximize the space more. In addition, we have changed the format of the time table. In the first prototype we have left the time table in a horizontal manner, but from critique and further thinking we have decided to change the presentation of the time tables vertically. This why we remove the scrollbar feature, something that most people and our interviews have expressed as their pain point. In addition, by doing so we we are introducing a new feature where the users are able to continuous scroll down without losing their bus stop because we have decided to make the bus stop header sticky, meaning as they are continuously scrolling down there are still able to keep track of where they look.
For the rest of the route information, we have decided to change the format of the pages to the news and fares template. By doing so we are minimizing the number of steps the users would need to click in order to get to their destination.
NEWS tab
As mentioned previously, a few things were improved upon into our final design. For the News tab, like the rest of the website, the boxes that confined the information were removed to maximize the space, but the red title headers remained to clearly define what that page was about. Instead of a secondary tab, the accordian style menu was included to lessen the amount of clicks the user had to go through to get to certain pages. For News, the font was also changed to stay consistent with the Home and Route Information tabs. The Unitrans logo was also added for sake of consistency.
The use of the Language tab is also demonstrated. Like the other tabs, an accordian menu pops up and shows five languages, which are the top languages used within the Davis community. When one language is clicked, the rest of the page is translated.
FARES tab
The Fares tab has similar improvements as the News tab, such as the implementation of the accordian menu, removal of the boxed information to maximize the page’s space, the inclusion of the Unitrans logo, and changing the body font for consistency throughout the rest of the site. Again, the use of the accordian menu greatly reduced the amount of clicks the user had to go through. Because there is another layer of subcategories, there are two levels within the accordian menu.
In the end, both of us believe that this redesign greatly simplifies what is currently existing. Of course, there is always room for improvement with User Experience and Web Design to further the ease of use for the users.
