A sports news only
application experience

covercover

Client: Expressen
Role: Designer & Front-End Developer

For the project Development 2 at Hyper Island we were given the task to create an interactive prototype of an application from real briefs, using web based development languages. My group got Swedish newspaper Expressen as our client and more specifically Expressen Sport, the newspaper's sport section. Expressen is one of Sweden's largest media houses, with over 2 million readers per day in different channels. Expressen wanted the app to in some way be a personal experience that adapts depending on the specific readers sport preferences. The project lasted a total of 7 weeks.

Initial Stage

After some research on news app users we concluded that the focus of the app should be on personalization and the reading experience. After presenting a MVP(Minimum Viable Product), we made sketches and wireframes for our concept. We decided to scrap the current tabloid look of Expressen and use a more minimal approach, focusing on readability and as little distractions as possible.

MVP displaying different content based on selection.

wireframeswireframes

Wireframes.

Part 1: Personalization

Choose Preferences

When starting the application for the first time, a setup guide is initiated. The user is asked to pick which sports, leagues and teams is interesting to them.

Personalized Feed

Depending on the users selection of preferences, a personalized feed with content relevant to the user will be generated.

Sponsored Content

The feed can be used to display ads from third party partners. Based on earlier selection of preferences user data, the sponsored content can be more adaptable to the user.

Part 2: The Reading Experience

Typography

Readable and legible typography are key ingridients. Franklin Gothic is used for headlines and preambles because of it's classic editorial history and look. Georgia was used for body text because of it's legibilty and clarity on smaller screens.

Hiding Top Bar

To make sure there is as little distractions as possible when reading an article, the navigation top bar hides itself when the user scrolls downwards. It reappears again when scrolling upwards.

Seamless Reading

When reaching the end of an article, the application suggests a new article to read. The suggested article is related to the current one and can be about the same subject, team, athlete etc. When pressing the preview image, the article loads instantly on top of the current one.

Conclusion 

We delivered a concept for an application with suggestions for signature/core features and design elements. We also created a prototype of said concept and presented it to Expressen. The project and the concept of personalized news was well received and we got great feedback from the developers and product managers at Expressen.

 

Tools and Assets

 

Sketch
Professional digital design for Mac.


classie.js
Add, remove, toggle, and check for classes in the DOM.

CSS Reset
Reduce browser inconsistencies.

FontAwesome
Vector icons that can be customized within CSS.

GitHub
Code collaboration, -review and -management.

 

Sublime Text
A sophisticated text editor for code, markup and prose.

GitHub Pages
Website hosting directly from your GitHub repository.

jQuery
A fast, small, and feature-rich JavaScript library.

jScroll
A jQuery plugin for infinite scrolling.

JSON
A lightweight format used for data interchanging.