Giving a UI Refresh to an Old Club
This is a concept piece I did for the San Diego Track Club. They are one of the oldest running clubs in the nation, and the oldest in San Diego. They are a non profit and their mission is to support the development of distance running, track, and cross country in the San Diego area from beginners to elite athletes. They have around 800 members, and would love for more people to join the Track Club. The idea for this project was to give their site a UI refresh. Over just a few weeks in 2022 I was the sole designer from beginning to end. I researched, sketched, and designed a new landing page that could be viewed via desktop, tablet, and mobile.
Problem
How might I refresh the UI to give hierarchy and consistency?
The San Diego Track Club is a wonderful organization, with an unfortunate website. There is very little hierarchy throughout the site. That along with so many choice of buttons to click on, it can feel overwhelming to the user. There is actually very little too the user can do on the site without being a member, but one does not know that until they are already trying to do the task.
Goal
The goal of this project was to create a clean and modern looking website, and to create hierarchy throughout to better the experience for the user. Using color, typography, and negative space I was able to achieve this goal.
Research
I started with looking through the San Diego Track Club website. I noted what was going well and what was not. I then did the same with other run clubs in San Diego, and throughout the country. I noticed the ones that were easiest to navigate and had the best user experience were the sites that were clean and modern. They told the user who they were and why one should join the club. With this research I was able to craft proto personas, wireframes, and high fidelity design screen mockups for the San Diego Track Club.
Personas
I wanted to form a deeper understanding of the users' goals and frustrations. With looking through so many different run clubs' websites and finding what was most important, and all that was going well and not well I was able to craft two personas.
Wireframes
With my research and having a better understanding of the user and their goals with Figma I was able to create low fidelity wireframes. I wanted to make sure to have a clean and simple layout that worked across three different screens; desktop, tablet, and mobile. For mobile, I used an older smaller phone to make sure the design would work even on the smallest of screens.
Designing
After creating the wireframes, I started to create my components, starting with the buttons. I kept the colors of the San Diego Track Club, the oranges, yellows, and blues. I went with a slightly different font to give a little more boldness and the feeling of sport. I decided to keep components and images square and sharp to give a more modern and clean sports look to the site, and to keep consistency throughout. For all my components I made sure to make different states of them.
Style Tile
In designing, after the wireframes and before I was able to create high fidelity screens, I made a style tile to make sure everything stayed cohesive and consistent.
High Fidelity
After creating the style tile/guide for myself I was able to start putting all the elements together in screens and create high fidelity mockups. I started with desktop view, as it seemed most logical of how a user would go about looking for more information and signing up for the club. I then went on to mobile, and using again a much smaller phone to make sure the design could be viewed on such a small screen. Lastly, I put it into tablet view so that the design could be viewed across multiple screens.
Conclusion
In doing this project I have learned the value of using color and font weights to create hierarchy in a design. I have learned that hierarchy is important when designing because it creates a better user experience. It allows the user to navigate with greater ease and it allows the user to find where they are going without too much thinking.
if I had more time I would have gone further into depth with this. I would have actually gone and interviewed people who wanted to join the club along with the already members of the San Diego Track Club.