Jolof Sports Football Club Website Redesign

Jolof sports football club (JSFC), is a football sports club specialising in training young kids, adults and teens in health and fitness; Jolof sports offers thrilling sports boot camps and personal training.

View live!

The Challenge

Our client Ahmadou implied many users have trouble navigating his website and they say they find it unprofessional and confusing. the challenge was to improve and redesign their current website, to improve the structure and highlight their brand image; to end up with an informative and clean sports websiteAhmadou made the website himself, so he wanted a professional website and a valuable UX service.




Timeline: 12 weeks

Team: 5

Platform: WordPress, Adobe XD, DIVI

Tools: Miro, Jam board, Trello, Divi.


Competitive analysis
Site mapping
Empathy maps
Affinity Diagrams
Customer Journey maps

Daily scrum meetings

Ui design


Product was an Interactive sporty website which provided good navigation, useful information and highlighted the Jolof sports brand.

The Process


The approach to this project was to execute research to explore the problem Jolof faced, then define the actual problem statements in-depth with research methodsits was vital to understand the users problems and ensure the team had a shared vision. The second stage of the process is to provide a design that solves the identified problem, then deliver this solution, and regularly review this in the design and prototype. The outcome may be revisions of the design.

My process followed the double diamond design model.


Competitive Analysis

Here I collaboratively worked to gain insight into various competitors and football clubs e.g Liverpool, the little foxes club, Manchester United etc. This would be vital to the design ideas, understanding what competitors may do well and finding what can be learned to make the new site superior. I discovered That many sites have a strong brand presence, Effective layout, consistency; news and social media highlights.


Created 2 personas based on q&a research with jolof coaches and personal trainers; due to covid, it was hard to speak to jolof users directly. These personas allowed me to keep the user in mind in every design step while also meeting Jolof’s goals. I collaboratively developed Personas related to the jolof service users and potential users. The outcome was to find key pain points and goals for the site; users need an informative website that’s easy to navigate, and a sports club they can trust and rely on.

Empathy map

Empathise and highlight vital issues/thoughts the users may find when browsing the Jolof sports club site. To understand what a user may feel, think, and say during their experience on the Jolof site.

I discovered users may have thought the website:
• Lacked vital information.
• Was challenging to find what was needed.
• Was hard to read the content.
• Information was not timely.
• Unprofessional.
• Reluctant.
• More likely to go somewhere else….

These direct points need to be addressed in the new design ideas, so user’s experience is improved and to maintain and increase customer retention of the site.

Affinity diagrams

Pinpointed usability issues and design challenges that Jolof had. Specifically Design, functionality and navigation. I chose this method to explore the website’s problems and empathy map results and drill down on specifics; to ensure we know what needs to be considered from our perspective. We discovered usability issues and problems with content and navigation, and Jolof’s credibility needed vital improvement. The design phase will include these findings with solutions.

Customer Journey map

I learned that to complete the task of signing a user up for a class or registering, is difficult due to lack of explanation and clear navigation.


I participated in forming the ideas in research and provided critical points for the empathy map and affinity map. We defined that jolof needs to have an improved, credible, and understandable website based on customer needs.

It was vital to understand the actual pain points that the client had with the current website and what could be improved in comparison to other sites to bring in inspiration.

When in the research phase, it is key to gain a shared understanding before making any assumptions. This phase explained that for the JSFC website to improve, it requires changes in the functionality, navigation, design, social media, credibility for trust, and content hierarchy.




Sketching possible designs, we designed for mobile-first to ensure we have a responsive design as the screen size would be smaller, then to optimize for desktop next on adobe xd.

Our designs ensured straightforward navigation and informative views of the content.

Site Map

Site map for the Jolof Sports website

Paper Sketches

Team sketches for new site design.

Mid Fidelity

Collaboratively came to a universal design to use for the wireframes.


Hi-Fidelity design

We produced the version of the Jolof redesign for the client. He was pleased with the look redesign. This design incorporated strong brand recognition with colours, their logo highlighted, easy navigation and different pages.

Design Conclusion

I designed the multisports, personal training and Kids programs. With the design, I suggested using different colours on other pages to go with bold colours, which are used in Jolof’s logo, to highlight their brand recognition and make the site diverse with colours and layout. After verifying this design with the client and user testing. It was time to transfer these designs to WordPress.



Time to develop the prototype on the WordPress platform. To simplify our job, I suggested we research plugins which could merge HTML and CSS coding into a usable API for the development of design on WordPress. We found Divi (A WordPress design plugin) and decided to use it as it had many benefits.

However, we had to take some time to train ourselves with this tool to understand its functionality and usability for transferring the designs made.

My impact 

I developed six pages on WordPress to transfer the adobe xd designs. Guiding and leading team members with the development. Further, in effect, I had to suggest a redesign, as I could realise executing the design on WordPress would be a time-challenging.

The designs needed to be transferred to WordPress to understand the design’s functionality, optimisation and responsiveness on devices. We were required to send the website as a whole to the client on WordPress. I took the lead for my team members as I had prior knowledge of web development. I was required to lead this stage and provide answers.

The result was an overall redesign of the proposed website design, as it took many iterations to execute the adobe xd design to meet responsiveness and usability deliverables. The design made in adobe xd was challenging to reproduce on WordPress. So, to produce an effective website within our deadline we were required to redesign the redesign.

In development, you cannot always stay committed to a set design as other things need to be considered; being adaptable to sacrifice a design, (with a reason) will always be an option no matter how much time has been put in.

I learned it’s best to do the work, and then make changes accordingly or you might get stuck wasting time fixing something which will not work!

The development stage required resilience and a strong focus as its still key to keep the user in mind and maintain Jolof’s business needs.

Next Steps

Final Results

In this last redesign, I was responsible for the JSFC football page, News blog page and personal training. In this site version, you can still see elements of the previous design, such as different colours across various pages and branding imagery. The new site is optimized so it can be used across all devices without impacting the visibility of text images and content, which the old design lacked.



My main challenge for this project was transferring designs to the WordPress site. In testing, there were usability issues as the design was not responsive; this required a lot of research to find a solution and time wasted. At that point, it was clear that the design needed to be scrapped and redesigned.

Working remote was also a considerable challenge, as communication is key to working collaboratively to convey ideas clearly and present updates.

Ths project had its challenges, but I enjoyed looking back at the old site, and the final product shows the overall transformation and improvements. The client was pleased with the new website, and I was able to impact that significantly.

It was a valuable experience as I strengthened my UX skills and understanding of working remotely with clients and team members. Ultimately, being able to adapt to changing circumstances and using previous experience and knowledge, then applying it universally.



What could be improved

The working method could have been improved, as taking appropriate action on issues raised earlier could have simplified the development stage.


Key Takeaways

Testing – This is key to development; let other users test your work to see how they experience what’s been made-they may not understand it the way you do!
Communication– when working from home it’s easy to miss communicating ideas, don’t assume-ask questions!
Teamwork– make use of your team members ask them for ideas, support and be open to giving and receiving feedback.
– Always keep the user in mind.
Don’t settle on a single design idea for your prototype.

Next Steps

  • Final user testing.
  • Handing the site over to the client…