THE WOMBATS WEBSITE REDESIGN
Techniques : User Research Persona User stories Brain Storming Free hand sketching wireframe Prototype
Date October 2018
Role UX Designer
The rugby club had been struggling to recruit new members for a long period of time. Furthermore, the club’s website had fallen into disrepair, I decided to take on the task of rebuilding the website.
The project goals were to revitalise the rugby clubs digital presence and seek new avenues on social networks, that would be linked to the site. Additionally, they wanted the site to be available on all mobile devices which in turn would increase traffic to the site.
Also, the site was created with German and English and French speakers in mind, as this would reach a further target audience.
Their current media presence was unfortunately non-existent, they were looking to re-invent their digital and media presence.
The ideology behind the concept, is to create a product that would accommodate two demographics for example; existing players and newcomers to the game.
While also keeping the user engaged with the application, and at the same time giving them exciting new content with links to international rugby news and also videos with full game analysis.
I wanted to review and get an understanding of their current site and additional links to social media. I chose to make preliminary notes on existing features that may need upgrading. I decided then to carry out a usability evaluation, upon inspection of the club’s existing site. I discovered that the site, was in fact just a basic blog page with very little features or links . On further inspection it would appear, that the blog page had not been completed, this in turn put an end to my usability evaluation.
Unfortunately, after evaluating the rugby club’s current website it would be quite difficult for any user to retrieve any useful information or access any features. Therefore, making the current webpage redundant, further negating the digital presence.
To get a clear understanding of the user’s behaviour pattern and tendencies, I needed to observe the players and coaching staff in their environment. The key was to understand how the individuals would find out about team news updates and events for their games.
I conducted a series of stakeholder interviews, in order to answer how the design of the application meets the needs of the target population. What are the engaging features of the application, and what design decisions could be made to increase the engagement with the application and increase the user traffic to the application.
Takeaway from meeting
- To create a website on a visual basis
- The stakeholders required the website to work on mobile devices
- Promotion of the sport and the club itself as an individual brand
- Promotion of the club’s sporting products
- Boost recruitment via social media and club website.
Competitive analysis Throughout the initial research and concept phase of the project, I decided to conduct a competitive analysis, in order to conceptualise the various features that they had focused on and how they went about creating their website.This process was vital in helping me, focus on individual aspects of the design process. To achieve this, I reviewed two domestic German rugby sites and two Guinness Premier rugby sites. This gave me a tremendous insight into the world of rugby and brand recognition.
Following the observation phase, I prepared a set of questions to ask the players and coaching staff.
The ideology was simple, find out the methods used to retrieve the information and identifying their behaviour and trends. By understanding, how they specifically retrieve the information, for example, do they look on the club site or social media platforms.
This data is vital to the design process and could determine final design and implementation of the product features.
Key takeaways based on the analysis and research:
- There was a need for real-time notifications and updates
- The product should facilitate a fun and engaging experience for the users
- The product should be easy to navigate and understand
- The product should be designed with a visual basis in mind
For this project, I worked through an interview development phase, interviews, and then analysed the data. To construct the persona and create the scenarios. I then worked on identifying different aspects of each subject, that fits with the persona’s role. I was then able to construct a scenario in which persona may be led to using the wombat’s site.
From this process, I created two working personas.
A user journey is, colloquially in the UK and parts of the US, the experiences a person has when utilizing/interacting with something. This idea is generally found in user experience circles around web design and how users interact with software experiences.
To demonstrate the user’s needs, I like incorporating the concept of the user story, I find this is a valuable tool in completely understanding the users requirements.
A user story is a tool used in Agile software development to capture a description of a software feature from an end-user perspective. The user story describes the type of user, what they want and why. A user story helps to create a simplified description of a requirement.
In the first scenario of the user story, persona one we see Freddie; he is a development player and he is seeking online resource for rugby learning.
In the second scenario of the user story, James is requiring links to obtain better rugby equipment.
Design of Information Architecture
For any digital product one of the most crucial elements is the IA. This is one of the most valuable components to business, when selling a product online. In today’s society people are so used to seeing and interacting with content and functionality of a digital product, that they expect the structure and navigation to be easy and extremely effortless.
The key factor here is understanding that when a person is browsing a website there is a limited time of opportunity, maybe a few seconds generally. If they cannot find what they are looking for they will move on to the next competitor, for a business that is catastrophic.
The best method to enhance IA, is by simply working with the users to help create the information architecture framework. By using the method of user centred design technique called card sorting.
So, I got the team together and a few of my friends to act as newcomers.
To get a real feel for the user’s needs, I wrote down the elements that I wanted to be organised into groups and then I asked participants to collect them into groups, that made sense to them. Then later on during the session I asked the users to add any categories they felt were missing.
The cornerstone of my design process is just simple brainstorming session. Where any idea is a good idea and all ideas are welcome, I generally just throw them on the board like paint and I see what sticks.
With the above in mind, I wanted to design an easy navigation system with a full proof formula. It was relatively simple, I designed the buttons with labels, which stated exactly what their function was.
Sketching & Wireframing
My process generally consists of drawing a few sketches of possible layouts that could be considered for the new design. Most of the sketch ideas are loosely based upon white board sessions. The next phase of the process is creating wireframes.
Brain Storming Rough Sketching Process .Wire framing .Click Here
Based on the agreed contents of the site, I created a site map showing the potential structure and page names, and this was agreed
I have created an interactive prototype using sketch and balsamic, I initially tested it myself by running through tasks, I wanted to make sure that all the screens linked together in a logical pathway for the user. I wanted the user to be able to use the interactive navigation buttons to seek out all appropriate information on each individual product.
On further discussions, myself and the developer decided to change the style of the menu layout. We decided that as the page had a lot of animation functionality, simplifying the menu layout in the Hamburger style would work well. This is an extremely popular menu layout and is used on most mobile devices in this present day, therefore there would be no more confusion for the user.
ACCESS TO MY Prototype https://sketch.cloud/s/Wo7O0
We carried out some usability testing with a few members of the rugby team,
Building the Site
The site was created through WordPress and elementor, the prime reason for this was since the club had already purchased the WordPress application and the elementor plug-ins. I was instructed to use these applications to build the site with.
The only drawback with using the WordPress applications, there are certain limitations that hamper the application. The fundamental problem, that I came up against was that we used a background video on the home screen, unfortunately, background videos cannot be played on mobile phones devices. However, this issue does not trouble tablets or laptops PCs. So, the solution to this issue was to use a static photo as a backup for the mobile devices.
The new site was successfully launched. With the new incarnation of the sport site, this resolved all of the rugby club’s digital issues. The chairman of the rugby club has been receiving an upturn in email communication via the contact portal from the website.
One of the biggest challenges I had to face, I designed the landing page in such a way that a background video encompassed the first section. The ideology behind the concept was to attract new players with a visual basis of a montage of rugby clips played.
This site was designed with WordPress and Ementor, the issue came up that unfortunately background videos cannot be played on mobile devices as in mobile phones. However, they can play on all other devices laptops tablets PCs.
After conducting some research, at present there is no fix for this issue. So, I had to pick a static image that depicted a live action sequence to fill in when the site is opened on a mobile phone device.
My second challenge was building the site based in the German language. As my German is progressing, it is still not up to B2 standard. Therefore, I had to rely on an outsource translator. Which on occasion caused delays.
What I would do differently next time
I think, that I could have gone a little bit more in depth on my research with regards to the WordPress issue, as I would have foreseen the background problem and maybe I would have made a design change. As I wanted this site to be viewed on all mobile devices in the same way.