MacRumors
Rebuilding an iconic apple community to be modern and performant
Project overview
Quick Facts
Total Posts
30M+
Performance Lift
42 to 96 Lighthouse Score
Key Services
UI/UX, Migration, Optimization
The challenge
The main MacRumors editorial website had become cumbersome to update and keep consistent across its front-end. In tandem, the community forum needed a complete software upgrade and a modern design to keep up with mobile and content trends.
The solution
We executed a complete rebuild of the main editorial website framework using React for scalability and consistency, along with an upgrade of the community forum from XenForo 1 to XenForo 2, focusing on subtle design refinements and major performance improvements.
The results
The new React framework and optimizations boosted the Google Lighthouse performance score from 42 to 96. Post-launch metrics showed significant engagement increases, including a 51% boost in conversations.
1
Exploration of an iconic brand
Exploration Phase
Iterations to Inform
When approached to re-build the framework, the key question was retaining the integrity of the existing design but modernizing it in a way that is still genuine to the brand and users. Following the Human Interface Guidelines, we set on a discovery phase that culminated in different navigation options, brand elements, a refinement of the logo, and numerous article styles.
Small Refinements
Where We Landed
After exploring, we ultimately decided the best solution was to keep the design similar. We would freshen up the colors, limit the amount of colors across the site, refine the type scale, and ensure all components are consistent throughout.
Quick look at what we did
2
Community design for avid apple fans
Community Interface
Design for Discussion
We've been collaborating with MacRumors since 2015 when we first helped them migrate from vBulletin to XenForo. For this update (XenForo 1 to 2), the original design remained a clean and strong interface, so we focused on subtle improvements to typography, spacing, legibility, and consolidating the forum list into one that was easily digestible and distinct categories.
Quick look at what we did
3
Re-building the framework for consistency
Laying the Groundwork
The Tech-Stack
We partnered with the MacRumors team for a complete rebuild of their main editoral website in tandem with upgrading their forum software. The main website had become cumbersome to update and keep consistent throughout the years. Our team decided on using React for its scalability, as we were familiar with the library from past projects.
Benefits to React
For Scale and Consistency
Using React not only improved the performance of the website but also helped in achieving consistency and speedier development:
Simplifying the build process for introducing more modern features.- A faster development process by utilizing common components.
4
Optimizing for performance
Improving Performance
Simplified and Fast
Improving performance and SEO ranking was one part of the rationale behind re-coding the front-end with React. Before changing the tech stack, MacRumors was rated around the mid-40s in terms of overall performance. With building in React, we had the most flexibility in how we could optimize by:
Removing large dependencies like jQuery by rewriting all JavaScript to not require them.- Reducing the size of stylesheets using modern build tools and CSS modules.
- Optimizing the initial render by removing or deferring previously blocked content.
5
Building a twitter bot for the buyers' guide
More Accessibility
To Reach the Masses
MacRumors rolled out a new feature with the Buyer's Guide, which acts as a guideline and product summary for each Apple model. To make it more accessible and drive traffic, a Twitter bot was built. The bot is able to inform users how recently a product has been updated, whether it is a good buy, and link them to the product information.
Building the Bot
For Accurate Responses
Our product development team worked to create a syntax to decide if a reply was for buying a product or if the bot should reply at all. The bot was able to form these responses by using the API data from the MacRumor's official Buyer's Guide, ensuring accurate and up-to-date information.
6
Statistics that show improvement
The Numbers
From Release of Update
The overall goal was consistency, performance, and improving the interface to the needs of their audience. We evaluated the year prior to the project to the following year after the new update, finding significant improvements in user engagement:
Conversations
Posts
Posts reactions
Threads
Exploration of an Iconic Brand
A word from the client
"Audentio has been a pleasure to work with. Not only is their work technically excellent, but they are also easy to communicate with and responsive to our needs and goals. We have been very happy with their work."
Founder and Editor, MacRumors