One of the big requirements for the Code Louisville program is designing and building the front end of a website or app from scratch. For this project, I wanted to solve an issue that’s bugged me for years.
I’ve run the Louisville Triple Crown of Running several times, so every year, I’ve visited the website looking for race dates. And every year, I have the same frustrating experience. Here’s a screenshot of what you first see:
I come to the site and I’m looking for basic information, like when the races are, and I get this. If you scroll down past a bunch of photos and some unhelpful descriptions, you come to this:
So here’s a link. That’s promising. If you click on it, you get this:
More high-quality photos of runners, which is cool, but still no useful information. If you scroll down the page, you’ll come to this:
Look! Hidden in a bunch of less important details, there are the race dates. Finally. Why can’t I just have them up front, without having to search?
Before I get into the rest of this, I’ll say that I’m sure the organization doesn’t have a huge budget to create an amazing website, so I’m guessing nobody set out to annoy people. They put a lot of effort into creating a good race experience, which is really what counts. But still, it would be awesome if they had a more helpful site.
So I have my mission.
The first task was to write a list of what information I, as a user of the site, would find most important. That list consisted of two items:
- Race dates
- How to sign up
Because user experience is a career field I’m looking into, and have done a lot of reading about, I decided to consult someone else for some user testing. I went the convenience sample route and recruited my husband, who’s also done the Triple Crown a couple times. Besides the two items above, he said he’d want to see these things:
- Prices, and price changes based on date
- Race start times
- Course details
Next steps: fit all this information on a page that’s responsive (works on desktop and mobile browsers) and looks presentable.
If you want to see the code I’ve written so far, the project has its own GitHub repository now. But I’ll be posting screenshots and updates on it throughout the course.