After

Results

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

My process followed the double diamond design model.

Personas

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.

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.

Conclusion

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.

Solutions

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.

Paper Sketches

Team sketches for new site design.

Mid Fidelity

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

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.

Development

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.

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.

Challenges

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…