Designing Reading Experience

OneFootball is one of the most (if not the most) successful football apps available on iOS and Android. It's a football app for the fans that combines the personalized scores and live stats experience with curated and internally written articles about all the different leagues and teams across various languages.

OneFootball's motto is "We tell the world's football stories" which means it's a content-first app. For so long it has been only curating content or buying content from third-party providers like goal.com but that wasn't the best strategy. why? well, goal.com sells content to anyone who's buying so it wasn't unique. Articles aren't truly well written compared to what we currently write in-house. We wanted to create something more personal, more opinionated and higher in quality to stand out and become a bigger platform, not just an aggregator. That being said, we started off with serving content on a responsive Wordpress blog but that was far from being good for the following reasons:

• Articles don't bring the company any revenue because we can't monetize our own content on mobile because we are mobile-first.
• Articles load slowly because it's web-based which results in poor readership and retention.

Our goal as a team was to increase readership and make money from our content. The solution was to serve native content and not rely on a responsive website. The obvious quick solution was to use the article details page that we specifically had for goal.com.

That was version 1 and it solved our problems to some extent but as a design team, we felt we can push it further and the editor's team had requests to support richer article elements like block quotes, bullet-points and subheads components which we never had. The team decided to extend the support for those elements and had these goals in mind:

• Product and Editors: add support for more elements on the article detail page.
• Product & Design: Increase ad impressions & readership KPIs
• Design: Increase news readership overall with a fresher feel and a more engaging experience.

I went back to Sketch and decided to not just support those elements because I felt there's room to improve how content is presented and better package it for a modern content app. As a start, I asked the research team to help me compose a competitive analysis to understand how big content creators create, distribute and brand their content. While that was happening I saw an opportunity to do something much better than just doing a feature. I approached the rest of the design team about the current state of how we do things and realized that our typography is dated and if we would design for a modern content-first app we have to rework that typography. We had so many styles fragmentation, so we decided to redesign that first and lay down some groundwork for a Design System approach and start rolling it out with each new feature to come and change the mindset of the company towards design. It was amazing to lead the design team with that initiative and explain it to stakeholders and everyone who was involved.

To summarize the work we did on Typography System, we narrowed the 45+ styles we had down to 13 new styles that fit all of our needs. With the new styles all in place, I did a lot of explorations about reimagining how new details could look like. You can have a look below to see some of the best explorations for various elements and how each is being positioned and used.

All the iterations share some similar elements like highlighting the source for example because we would end up with articles from goal.com or OneFootball. Changed the ratio of the cover letter from 16/9 to 4/3 which gives the photo room to breathe & not to get cropped under the notch. Also trying to heavily differentiate the title from the rest of the content and add a brand element to it to truly stand out. I also believed that the quote element was a primary one too and needed some care. A new content style for paragraphs which was originally 16pt with a line height of 1.5 pumped up to 18pt with a higher line height of 1.6 to make it much easier to read. Below you can see the final version that was shipped alongside the old one.

We had 3 main KPIs that were crucial to this feature

• Articles read per user increased on average by +6.99%
• Articles read per session increased on average by +9.29%
• Readership increased on average by +16.63% (Users finishing reading articles)
• significant ad impressions increase. Can't show numbers about this one 🙈

• The impact that good design can do for business: I wouldn't lie if I say that everyone outside design didn't expect that amazing result. We basically proved to management why good design matters and leads to good business.
• Importance of modern scalable typography for a content-first app.
• Users were happy because some of them left us great reviews because of that redesign and here's some of it…

I usually tend to explore outside the scope of the problem in my free time because of my passion for what I do, so here are some of these concepts.