PLAN
Salt Lake Express is a shuttle service that runs multiple stops across Utah, Nevada, Idaho, Arizona, Wyoming, and Montana. With over 500,000 website visitors per year and new stops being added, they were looking for a better way to integrate stops with their new transit management system, help users find the right stop, and boost their SEO rankings on multiple keywords.
After understanding their goals, I set out to create a data endpoint to populate the site with the latest stop information and develop new views to display it.
DESIGN
I began by researching some of the largest airlines and busiest transit systems to see how they help users navigate through their many destinations.
After recognizing specific design patterns, I set out to create a Sketch mock-up for a "Destination Page" – which would serve as a home for all stops – and a page template for the individual stop locations.
Using their existing design system, I created new components and iterated through layouts until I was happy with the design. With their approval, I started developing.
DEVELOP
As their third-party transit management software didn't offer an API, my boss and I developed a creative Python solution to create a servable endpoint for stop data.
With the endpoint in place, I started developing new views to display information from their back-end dynamically. I knew that this would make it easier for future developers to update and debug.
There were added SEO benefits for each stop now having its own page. By making sure that the page template was keyword-rich with the dynamic stop information, we were adding valuable long-tail keywords such as "Shuttles to {{stop.city}}" that would help them rank better organically.
Adjustments had to be made to the destination page design to improve performance. We found that the generation of so many stops with city-based sub-categories was hard on the server, and so by removing the city-based taxonomy and featured image row, we could significantly increase load performance. In the end, the User Experience comes first.
- Tools Used
- Sketch
- Discipline
- UI, Front-end Development