Project summary: How I improved the user experience of the Louisville Triple Crown of Running website

Things are winding down for my front end web development course in the Code Louisville program. I finished all the required classes on Treehouse, I attended my last class meetup, and earlier this week, I turned in my project. It has to go through final review before I officially pass the course, but I’m pretty optimistic.

At this point, I thought it would be cool to do a look back at the project and how far it’s come over the past few months. If you just want to see the final version, it’s here. But if you want to see the project’s evolution, including screenshots of its (very) humble beginning, keep reading.

The idea phase

I came up with the idea for the project a couple months before I actually started the program. I needed to quickly check the dates for a local race series called the Louisville Triple Crown of Running, so I went to the website and realized the dates weren’t on the front page. They were buried within some text on another page. Immediately I thought, “Somebody needs to fix this!” And I had my idea for my project.

For reference, here’s a snapshot of the actual site:

Screen Shot 2018-07-20 at 3.40.08 PM

On a positive note, the photography on the website is beautiful, and the organization does an excellent job of creating enjoyable race experiences. Thousands of people wouldn’t continue to sign up each spring if they didn’t. But the website just isn’t very helpful.

Information gathering

Before I started designing, I wanted to define my goals for the site, and the problems I was hoping to solve. You can find a more detailed post about that here, but basically I looked at how I could streamline the process of finding important race information.

First, I made a list of what information needed to be front and center, and what information needed to be findable from the front page. This was based on my own experience as a user of the site, an interview with my husband, who’s been a runner and spectator at the races, and looking at other race sites for comparison.

Front-and-center information:

  • Race dates
  • Race signup information, including pricing and a link to register

Information to link to from the front page:

  • Race results
  • Information about road closures, traffic, parking, etc.
  • Information for spectators
  • Race sponsor list
  • About page

Prototyping

Learning prototyping tools like Sketch is on my to-do list, but at this point, pen and paper is the best tool I’ve got. So with that, I started drawing. Here’s what I came up with for a large-screen design:

Desktop

And here’s my design for small screens:

Mobile

Building: First attempt

Getting started with the HTML and CSS was the most difficult part of this project. At that point, in May, my skills were very basic. But I needed to get working, so here’s what came out:

desktop screenshot

This version, meant for smaller screens, was actually a later one. I hastily deleted screenshots of the really early versions, which I regret now.

Mobile screenshot

Building: Making improvements

As the weeks went on and I learned more, I was able to improve the layout. Like a lot. As one of my fellow students told me, I took the design out of the 90s and made it look like something that might be used now. Here are some screenshots of that middle phase:

a screenshot of the section of my project site with Triple Crown race names and dates

a screenshot of the section of my project site with pricing information for the race series

a screenshot of the section of my project site that has information about traffic, where to watch the races, and race sponsors

Putting on the finishing touches

Once I was satisfied with the structure of the site, it was time to add the final details. This included the header with a collapsible navigation bar, and substituting the stock background photos for actual race photos. Since the photos on the actual LTCOR site are the best part of it, I wanted to keep them in my design, and I got the photographer’s permission to do so. Here are some screenshots of the final product:

Screen Shot 2018-07-20 at 4.51.28 PM

Screen Shot 2018-07-20 at 4.53.43 PM

Screen Shot 2018-07-20 at 4.52.06 PM

I’m really happy with the progress I’ve made in my knowledge and abilities. I’ve taken the design from something I was embarrassed to show in class to something I’m proud to put in my portfolio. I think the most important thing I’ve done here though, is build a solution to a problem that I saw. I’m definitely going to be looking for more opportunities to do that.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s