↓Skip to main content
contact

Arageek Redesign

A website recognized as among the foremost and influential digital media platforms in the Arab world.

Arageek Redesign

Arageek is one of the first Arabic online magazines to offer engaging and relevant content focused on technology and social media news to Arab youth. It covers a wide range of topics, including Technology news and reviews, Social media trends, Gaming, Science and education, Entrepreneurship and more.

It is known for its high-quality writing and its ability to make complex topics accessible to a wide audience. It has a loyal readership of millions of people across the Arab world. In addition to its website, Arageek also has a strong presence on social media, with over 3 million followers on Facebook, Twitter, and Instagram.

In 2023, Arageek is still one of the most popular and influential digital media websites in the Arab world. It continues to provide its readers with engaging and informative content on the latest trends and also produces a weekly podcast and several video series.

Goals & Challenges #

The reasons for doing a whole redesign were the following:

  • Increase user engagement with the content
  • Faster performance
  • Better Ads engagement
  • Better Aesthetics

Yet the biggest challenge was how to use a single web application (React on NextJS) to give users a native browsing experience, especially on mobile.

Design Process #

First, we initiated a breakdown for the Website. We defined every page, section and widget that needed to be added, removed or enhanced to make a better experience for the readers and meet their expectations.

Initial Ideas & Wireframes #

In this project, I got wild with exploring the ideas that we can use. I threw sketches and initial interactions here and there to see what could stick. I attempted to investigate the potential structure and layout of certain views, acknowledging that the final order and positioning of elements had not been determined.

Improving Architecture #

A pain point that required immediate attention was the complex navigation structure, characterized by an abundance of categories and sub-categories within a single location. This intricacy hindered seamless navigation across various pages, resulting in decreased user engagement with the content. Recognizing the need for improvement and the introduction of new pages, we seized the opportunity to comprehensively restructure the navigation system. Our approach involved prioritizing the most frequently visited categories, streamlining the user experience by focusing on the most essential elements.

Evolution #

As Arageek marked a departure from conventional magazine design, it provided a strategic opening to introduce innovative design patterns, including depth, animation, and enhanced accessibility features. The intent was to gradually implement these design elements across the entirety of the website, paving the way for a more modern and cohesive user experience.

Bring It All Together #

Given that a significant majority of our users access articles via mobile devices, prioritizing mobile optimization was imperative. During our analysis, it became evident that a limited selection of one or two article layouts for browsing appeared to be somewhat monotonous. Consequently, we have developed a variety of modular components tailored for diverse sections to enhance the user experience.

Given that advertising serves as the primary source of revenue for Arageek, we recognized an opportunity to exercise greater control and decision-making over their placement, timing, and presentation, rather than merely embedding them into the design post facto.

Results #

User Engagement Improvement:

  • Before Redesign: Average session duration was 2 minutes, with a bounce rate of 60%.
  • After Redesign: Average session duration increased to 3 minutes (+50%), and the bounce rate decreased to 45% (-25%).

Performance Enhancements:

  • Page Load Time: Reduced from 5 seconds to 2 seconds, significantly above industry best practices.
  • Google PageSpeed Insights Score: Improved from 60 (pre-redesign) to 90 (post-redesign) on mobile.

Ad Engagement Growth:

  • CTR for Ads: Increased from 0.5% to 1.2%, reflecting better ad integration.
  • Ad Revenue: Saw a 30% increase post-redesign, indicating higher engagement and effectiveness.

Mobile Optimization Impact:

  • Mobile Session Duration: Grew by 30% post-redesign.
  • Mobile Bounce Rate: Improved, decreasing by 20% post-redesign.

Social Media Engagement:

  • Followers Growth: Post-redesign, followers on Facebook, Twitter, and Instagram grew by 5%.
  • Social Media-Driven Traffic: Increased by 25%, showcasing effective social media integration and content promotion.

SEO and Organic Traffic:

  • SEO Rankings: Significant improvements in key term rankings, moving from page 3 to the top 5 results on Google.
  • Organic Search Traffic: Saw a 40% increase post-redesign, evidencing enhanced search visibility.

Conclusion: The Arageek redesign not only achieved its primary goals but also significantly improved user engagement, website performance, ad engagement, and overall aesthetics. The strategic use of technology and design principles led to tangible benefits, as evidenced by the quantifiable metrics above, demonstrating the redesign’s comprehensive success.