Twelv2Athlete is a sports ministry program that focuses on the development of endurance and skill training as well as providing scholastic, social, and spiritual development through Christian mentorship.
The Twelv2Athlete website was already up and running when I started working with them. They purchased a WordPress theme and had it customized for their needs. However, they had design ideas the theme just didn’t accommodate for and needed a developer to program their design ideas and make them a website reality.
Finalizing Design Ideas and Work Process
Twelv2Athlete had design ideas, they aren’t web designers and thus didn’t have Photoshop mock-ups of what they wanted. What they did have was clear ideas of what changes they wanted – which was great for me because although I can do some design work, am not a designer and I do my best work with code (not Photoshop). Our work process was them saying: “we like feature A from website 1 and feature C from website 5. Will that work?” I would then make a JPG mockup or a working HTML prototype. Because they were clear with what they wanted, revisions were minimal and I would then WordPress-ize the idea. The process was repeated until the project was complete.
The homepage was the first area of focus. It required site-wide changes to their header and footer areas, adding a search box, moving some elements around like their logo and social media links, making their banners and images larger, adding a rotating text carousel, and a one line site tag-line. And making all of that responsive, so that everything looks good and is readable in any device, regardless of its screen size. As seen from the before (1st image) and after (2nd image) screenshots above, the changes did a lot to modernize their homepage and highlight their images more.
Homepage Admin Settings Page
Although they did not request an admin, they did have the need to be able to update the homepage content on their own. Rather than making the homepage admin be, to them, a complex maze of HTML and CSS – I made the admin be a one-stop admin page for changing everything on their homepage (rather than have separate options pages for every homepage feature) and made sure it is easy to use and intuitive.
Inside Pages Redesign
The website’s internal pages also needed a design facelift. Comparing the old design (1st image) to the update (2nd image), the pages incorporated the site-wide header & footer changes and big changes to their layout, presentation of content, a friendlier & more complete sidebar navigation, and the addition of the full-width image banner on top. All the changes made are responsive, so they are usable when viewed in either a desktop computer, mobile phone, or any size of device. All the changes were made to the WordPress theme templates, so all the Twelv2Athlete team had to do was add the banner image (and optionally update their content).