.png)
UX Evaluation of Buzz.ie
Buzz.ie (an Irish Daily Star website) is a successful site that delivers ‘Ireland's best and latest news on sports, politics, entertainment and lifestyle.’ To increase readership and improve the user experience, the editor requested a UX evaluation and outlines for a re-design of the desktop and mobile site.
Strategy:
Research including audience analysis, an online survey, competitive benchmarking, comparative usability testing, heuristics analysis, customer journey mapping and card sorting culminate in a prototype for user testing.
Tools: Figma, SurveyMonkey, Lucidspark, ScreenFlow, Adobe InDesign, Photoshop and XD.
Timeframe: 3 weeks.
Impact:
• Increased User Engagement: This UX evaluation identified key areas for improvement that could lead to a more engaging user experience for Buzz.ie readers. Enhanced navigation, optimised content presentation, and a cleaner design could lead to longer browsing times and increased readership.
• Improved Conversion Rates: Streamlined user journeys and a focus on user needs could potentially improve conversion rates, whether it's encouraging users to subscribe, share articles or participate in comments sections.
• Data-Driven Design Decisions: The research phase, including user surveys, usability testing, and competitor analysis, provides valuable data to inform design decisions. This data-driven approach can lead to a more user-centric website that resonates better with the target audience.
Desired outcome
By conducting a comprehensive UX evaluation, this project aims to identify user needs and pain points, improve the overall user experience for both desktop and mobile platforms, and ultimately increase readership and user engagement for Buzz.ie.
The brief and constraints
When the new editor of Buzz.ie took over the site, he wanted to increase readership and improve the whole experience of using both the desktop and mobile site. While some things were non-negotiable from a senior stakeholder and advertising perspective, making both versions more user-friendly through improving flow, navigation and placement would go a long way to keeping readers on the site for longer.
Since its launch, Buzz has always been seen as being aimed at male readers and that’s reflected in its design/navigation. But, according to the analytics, the readership was much more gender-balanced…
Audience breakdown
By accessing the site's analytics, I discovered that the audience consisted of slightly more male readers, with a lead of 52.36%. This was surprising because I had assumed that there would be much more male readers than female. The site definitely has the same look and feel as other male-orientated sites.
On the age front, the most common visitors fell within the age range of 25-34. Ireland accounted for 58.42% of the traffic share, followed by the UK with 12.82% and the US with 5.41%. One note here was to keep Irish news prioritised over global in the site’s hierarchy as a result.
Desktop Vs Mobile Web
Analytics show that the device distribution for Buzz is heavily weighted towards mobile phones, with only 7.72% of traffic coming from desktop devices.
As a result, I took our most common user to be a male, aged 25-34, living in Ireland and accessing the site on his mobile and our second most common use case to be female with the same characteristics.
Research
Survey attitudes
To gauge an average reader’s attitude towards news sites, using SurveyMonkey, I created a short online survey where I asked volunteers on a UX forum questions about their experiences.
Outcomes from the survey included:
• Users surveyed favoured politics as a topic (50%), with tech (33.33%) and celebrities (16.67%) also proving popular. ‘Sport’ didn’t get any responses but posting the survey on a different type of forum would likely yield different results.
• Levels of trust in the factual accuracy of news websites in general came in at just 5.2/10.
• ‘Too many ads’, ‘Biased journalism’, and ‘Clickbait headlines’ (33.33% each) all proved to be equally off-putting to users surveyed. Interestingly, no one responded to ‘Editorial errors’.
Competitor analysis
Next, I wanted to compare and contrast how Buzz.ie dealt with layout, navigation and user flow in relation to other similar news sites through competitive benchmarking.
I mainly wanted to avoid re-inventing the wheel. joe.ie, rte.ie, theguardian.com, irishmirror.ie and independent.ie were used for comparison. Both desktop and mobile web versions were assessed.
Actionable ideas at this point included further research into navigation, category order and post layout, adding a ‘latest news’ widget and a ‘trending’ bar, as well as a potential weather widget.
Secondary navigation was another question here — would Buzz benefit from having a ‘trending’ menu or just popular topics?
.28.png)
.23.png)
.49.png)
.21.png)
Testing the flow
To compare Buzz’s flow to other websites, I designed a usability test with 3 tasks for a user to complete, like finding the website’s most recent post on soccer and commenting on it, signing up for the newsletter and searching for the latest iPhone post. Then, sitting down with a user, I had them complete these tasks while recording it on ScreenFlow. The 2 websites I used to compare against Buzz were The Guardian and the Irish Examiner’s websites.
.jpeg)
“I’m finding this post hard to scroll through without clicking on something, it’s difficult to read…”
The main takeaways from this round of testing were:
1. Ads loading slowly impacted the usability and ad placement meant the user had to scroll down to see anything at all on single posts.
2. Search results (as powered by Google) prioritised other website results.
3. There was no option for sorting search results such as by newest or relevance.
.png)
User comments
After completing the tasks, I interviewed the test subject about their experiences with each site and compiled the comments for use later on (see the Customer Journey Map below).
“The navigation was simple and straightforward on Buzz but the ads were very distracting. It was hard to actually read any of the news posts...”
Analysis
Using Jakob Nielsen's 10 general principles for interaction design I then did a usability-based heuristics analysis.
Each score and the reasons behind it were outlined in detail in a Keynote document for stakeholders. Some reasons for losing points included:
1. Ads are loading very slowly on each page and there is no loading message (Rule 1: The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time).
2. Notification symbol (bell bottom right) doesn’t match real world expectations (Rule 2: Match between system and the real world).
3. Cluttered layout (Rule 8: Interfaces should not contain information that is irrelevant or rarely needed).
User journey
At this point, I thought it was important to visually represent the average reader’s emotions, needs and goals when accessing a post on the site. Taking the information from my previous user interview, this Customer Journey Map outlines the touchpoints that the user interacts with at each stage of the journey and how they felt about them.
.png)
Streamlining navigation
Navigation was up next. Using LucidSpark, I gave each category on Buzz its own post-it and grouped them based on my own mental models. Something to note here was that the current navigation caters predominantly to cisgendered men while analytics show that the site’s audience is more gender-balanced. ‘Celeb’ posts were also big traffic drivers so one actionable change here was to push ‘lifestyle’ ahead of ‘culture’. I also moved ‘Advertise with us’, ‘Newsletter’ and ‘Discount codes’ into the ‘more’ menu to free up real estate above the fold for a ‘trending topic’ widget.
.png)
Ordering content
Within each category, did the content order make sense? That was the question I asked test users in an Optimal Workshop card sorting exercise.
Taking the results from the exercise, as well as Buzz's analytics, I rearranged the order of content under each topic, giving higher priority to the more popular content.
Some of the existing orders made sense (Irish news over world news, GAA over soccer etc) but under lifestyle ‘celebs’ and ‘fashion’ were moved up in the list to reflect the interests of female readers.
And TV gets top billing under ‘culture’ due to the traffic that Love Island generates for the site each season.
Design
SKETCHING SCREENS
Taking my research results and the actionable ideas that came out of them, it was time to start designing low-fidelity wireframes. I started with sketching out on paper each screen in the ‘reading a post’ process for the desktop website followed by mobile web.
Deciding how many posts would be displayed on each screen was a big consideration and (as per my comparative research) I settled on one post with headline and intro, plus a ‘latest headlines’ box out. And then on the post category page, four posts are displayed so users can see more of the latest content at a glance. From the stakeholder’s perspective, I wanted to make sure that the big CTA (newsletter sign up) was prominent in my designs too. On the secondary navigation question, I opted for a ‘trending’ bar but this could be tweaked or tested later on.
Working up these sketches into wireframes in Figma was next, followed by a simple sitemap to track the user’s flow.
Mobile web wireframes also followed.
Prototype
Taking the final, sketched-out pages, Figma was my next stop for building high-fidelity prototypes to use for testing.
These prototypes would help me to test and refine the user experience, highlight any potential issues or bugs and gather valuable feedback from stakeholders.
Because there were many more elements involved in the desktop site, I started there. Useful Figma features meant that I could build interactive dropdown menus, overlay privacy settings and a social media feed, as well as a blinking cursor and animated text in the search bar. Interact with it below by using it to find the most recent post on soccer and commenting on it…
.png)
Again, I used components, overlays and dropdown menus to make the prototype as interactive as possible. Try it out below by commenting on the site’s most recent soccer post.Both of these prototypes can be used for further testing and stakeholder buy-in for any changes proposed.
Before submitting my findings, I had two users try out the prototypes to make sure they weren’t clicking on any non-clickable areas. This revealed a few blindspots that I was able to tweak at this stage.
.png)
Delivery
• Ads on the site have a negative impact on the user experience. But, since they are a key income generator, prioritising their non-intrusiveness should be a key consideration.
• For the desktop site in particular, the space above the fold isn’t being used to its best advantage. More posts and more headlines mean more opportunities to encourage readers to stay on the site.
• Rearranging the content order — particularly under the lifestyle category — could make the site more female-friendly. As it stands, content is laid out according to a male bias that doesn’t accurately reflect the readership.
• A small weather widget — something could be very easily added — would be an opportunity to add reader trust.
• From a stakeholder’s perspective, the CTA (newsletter sign up) could be made more of. Using visual hierarchy, my prototypes both make the sign up process jump out more for the user.
• The next post button on the mobile web version can be hard for readers to avoid. In the prototype, this button has been scaled down to avoid this.
• Search results need to prioritise Buzz’s own content over Google results. And being able to sort results by date or relevance is another important feature.
And finally, the bell symbol on the ‘more’ feed has been replaced in my prototypes with the plus symbol which better matches real world expectations.
Key takeaways
My own personal takeaways from this project included:
• Not to assume anything about readership. Although Buzz has always been marketed as a male-driven site, the analytics didn’t necessarily reflect this and a broader range of readers needed to be catered for. Same applied to device distribution — I found the low number of desktop users surprising.
• That I need to work on cultivating a bigger (and more varied) network for surveying and testing. Although the UX forum I used to pool survey participants from provided 30 unique respondents, I think a bigger and broader range of subjects would have potentially yielded different results.
• That testing the secondary navigation or ‘trending’ bar might have been useful before diving into prototyping. Deciding what to do with this part of the site might have been less time-consuming before it got to the design stage.
• A new technique to animate text in Figma. Although I was familiar with interactions, components and overlays, this project allowed me to try out a new animation trick that I used for the search bar of both prototypes.
• That users won’t always take the path I assume they will through a prototype. Just because I know the path I’m focusing on, doesn’t mean the average user has the same goals. Testing it will reveal the blindspots.
Next project >