Case Study
The new website design aimed to increase signups and explain more clearly what the software does. To do this there had to be more focus on features relevant to specific sports.
LeagueRepublic is a web-based sports administration software that enables easy management of scheduling, results, statistics and players.
I last worked on the LeagueRepublic designs over ten years ago, so it was a pleasure to have the opportunity to work with them again on the recent website redesign.
The first step was to have a look at the current website to see what issues needed to be addressed in the redesign.
On the homepage, the header/call-to-action is too red which hides the branding. The priority seems to be given to the mobile apps with the mobile screenshot and app store logos taking a significant portion of the page above the fold.
Mixed messages on the homepage - It starts off with running your league, then into features, but by the end of the page it says "ready to start building your free website".
The content on the feature pages is quite heavy and difficult to follow. Increasing the font size and breaking the content with subheadings would help.
The pricing table displays an array of prices and options making it difficult to understand. It's also not very clear whether the costs are annual or monthly.
After all the issues were identified, I collected a few design ideas and inspiration from some other software services and added them to a Pinterest board which I shared with LeagueRepublic.
The shots I had collected on the mood board, provided inspiration for layout styles, illustrations, pricing tables and even wording for the signup elements.
Based on this collection, I began wireframing the key pages of the site.
Whenever I start a new design project, I always spend a few hours conceptualising pages, elements and functionality with sketches.
Aside from being relaxing, drawing out basic sketches helps to test those ideas before creating more polished wireframes.
These wireframes were created initially in Sketch and then converted to HTML/CSS to enable LeagueRepublic to get a better feel for the site layout.
For the new design, I wanted a font that worked nicely with the type used on the LeagueRepublic logo (Conduit ITC) and which was available without any licensing costs. After evaluating dozens of typefaces, I decided on the Google font "Noto Sans" which comes in both Regular 400 and Bold 700.
The red brand colour of LeagueRepublic is intense, so I wanted to keep away from using too much of it. I came up with a palette of six colours that would compliment the brand colour well, and that would also work well in any illustrations.
#DC1A27 - brand colourThe mood board and wireframes created in the previous stage helped to guide the design for the new website.
There were a few common design styles that could be seen throughout the mood board: larger fonts, use of illustrations to convey the message, good use of whitespace and simple, easy to follow content.
For the new design, I wanted to keep away from showing too many screenshots as they are not always clear enough to the user. The UI mockups were designed in Sketch App.
I designed illustrations for the homepage, pricing page and each sports page which were all created in Affinity Designer and exported in SVG for maximum scalability.
The final part of the project was to convert all the visuals into responsive HTML/CSS templates that the LeagueRepublic developers could work with. I also used Sass, to organise the CSS more efficiently and jQuery for small interactive features.