Finding Parking

WEB DEVELOPMENT AT SAM HOUSTON STATE UNIVERSITY

 The community was struggling to understand parking rules and permits available to them.  

Problem 1

When parking is limited, it calls for a complex parking system to control access. Our system aims to provide pricing tiers for affordability and more access to each member more access during off-peak hours. I needed to address how to provide large amount of data and filters by customer type. While most of our permits are not restricted to one type of community members, we do have prioritization that inherently led to that. We needed to set expectations of what a student could really purchase.

Problem 2

Our university utilizes license plate recognition (LPR) system to track parking permission. LPR reduces the demand for employees, provides instant purchase of parking, ability to purchase remotely, and decreases cost of stickers. The downside to LPR is understanding that drivers must display their plates to the driving aisle, something most people don't think about. We needed to emphasize this rule.

Problem 3

A new parking garage was being rolled out and the old garage permits changed, introducing a new pricing model. 

TARGET AUDIENCE

  • Prospective and enrolled students

  • Visitors

  • Employees

MY ROLE

  • Conduct research

  • Curate & edit content

  • Design main content 

  • Communicate with client

  • Develop with dotCMS

Pricing & Access

Plan Based Pages

Users will navigate based on their admission status. Each pages starts by defining the plan to ensure the user is obtaining the correct rates.

Toggle Year & Semester

Years are hosted within a single page, enabling users to compare faster. The flat fees container and table change colors to help users distinguish between years. Additionally, the fall and spring semesters were combined because the rates are the same.

Flat Rates vs. Hourly Rates

Reduced repetitive rates by separating them as flat rates. Along side each rate, a tooltip features the fee description. Hourly rates are broken down in a responsive table with descriptions following. 

Credit Hours

Credit hour toggle defaults to the most common hours taken for the semester type. Only 3 credit hours could be displayed at a time to fit within the smallest viewport. 

Sticky Navigation

The user is able to navigate to payment methods or another plan without having to scroll. The sub-navigation becomes sticky once the user has scrolled passed it. 

Conditional Fees

Questions allows users to determine whether or not the fee applies to them, rather than only labeling by the name of the fee. 

Making Payments

End with Call to Actions

Users will know payment options and what's accepted for each method in one place. Each option has a call to action that enable to them to start paying. Icons help user recognize their preferred payment method quicker and easier.

Whether users know the rates or not, they have to pay their bill. Every Bursar page features a footer that provides primary and secondary user flow into the Student Account Center. The Student Account Center is a third-party software payments are accepted. Contact information and directions also help the users ask questions or pay in person.

Grouping Information

Process

Scope & Constraints

  • Web Accessibility Compliance

    • High Contrast Color Palette

    • Clean code, label roles

  • Header & footer were a part of a template

  • Unable to schedule usability testing or user interviews

  • One person UX team / Lack of specialized roles

  • Work within brand goals and brand style guide

  • Lack of formal web guidelines

Outcomes & Results

  • Reduced page inventory

  • Improved Site Improve scores

Page count increased for production and dramatically falls upon project completion.

SiteImprove is a third-party software that crawls the site to measure performance.

Before

After

Lessons Learned

Shorter Headlines & Smaller Hero Images.

The hero headlines are bit long and create an awkward layout on mobile. Large hero images make it difficult to hook users and can slow down the load speed.

Website can't be One-Size-Fits All.

Prospective students/parents, enrolled students/parents, and employees have very different needs. We must find ways to separate the user types to create more effective content, site flow, and style based on user needs. For example, prospective students and their parents are looking to know the total cost of attendance to compare colleges. While enrolled students may need to compare cost of different credit hours and/or pay their bill. Employees may be conducting research or looking for training.

Sticky just isn't sticking.

Sticky navigations are great for pages with a lot of content, because the navigation follows you down the page. However, the sticky feature doesn't interact on all browsers as intended. Until all browsers fully support this feature, sticky isn't the best choice.

Style guides must have tints and shades.

Highly saturated brand guides don't make great web style guides. ARIA web compliance requires high contrast web designs, which can't be accomplished when colors are the same value. By including tints and shades of brand colors, designers are able to layer information, create variety, and stay within compliance. 

Evaluated Current Site

Step 1

  • LinkedIn - Black Circle