Danskerne Digitale Bibliotek

CLIENT
  • Danskerne Digitale Bibliotek
AGENCY
  • Freelance
  • 2016
SERVICES
  • App Design
MY ROLE
  • Visual Design
  • UX / UI / Prototyping

STAGE 1 - Concepts & Mockups

The aim of the application is to provide users and readers a considerable amount of digital news and articles. Divided in different categories and topics, the application basically filters and collects the articles written by Danish people in the Danish language. In the begining and with the criteria of randomness and curiosity my main task was to create a visual concept of the app. The challenge was to design an interface where the user without the ability to select preferences and categories, feels motivated to continue navigating and interested in topics that was not known before hand. In a brainstorm with the project coordinators I sketch ideas, and then these ideas were developed. In parallel to the flow of navigation, four concepts were designed: Galaxy, FlipFlap, Plaques and File.

GALAXY

Orbits and planets create a galaxy with a great variety of opportunities. Exploring this galaxy, selecting groups of topics and clicking on a specific topic, readers can find interesting articles.

Exploring

Users can explore by zooming in/out, slipping on the screen and click on the dark green spheres to select a group of topics.

Selected orbit

Having selected a group, users can select a topic 1) by clicking on the small spheres, 2) to move around the group by sliding or 3) to select another group of topics above.

Select topic

Users can select a topic by clicking on the small spheres and it opens the first article.

Article

By swiping left or right, the user can navigate across three articles within the same topic. By clicking on the arrow below it opens the full article.

FLIP FLAP

Users can explore a variety of interesting topics by selecting and moving around the flip-flaps. The topics are on the flip-flap sides, and this is reflected by the text above.

Click to open

By clicking on the headline, the flip-flap starts to open and user goes directly to the first article between three.

Opening

A quick animation showing the flip-flap opening.

Article

By swipe-left or swipe-right the user can navigate across three articles within the same topic. By clicking on the arrow below it opens the full article.

Swiping

With swiping up or down the user can access to a new group of topics into a new flip-flap.

PLAQUES

This is another concept that was developed during the experimentation and brainstorming process.

Home

When the app opens the user finds "plaques". These plaques contain topics behind, but it's by scrolling that user discover this.

By swiping

If the user swipes up or down, a new list of topics appears.

Click on / Sliding

By clicking, the user turns arround the plaque and see the topic behind. ​Sliding down gently, the user can see quickly which topics that are behind the plaques.

Article

By swiping left or right, the user can navigate across three articles within the same topic. By clicking on the arrow below it opens the full article.

FILE

Inspired by the typical office file viewed from above I designed this concept. The lines represent files (folders), and the ripples on the shape are generated by a manual search. The people envolved saw that the riples generates a sort of an "eye", which also makes sense for the overall concept. During the first workshop, the UX team, copywriters, curates, marketing and even a team specialized in filter-bubble selected this last concept by voting. At the same time we discussed with the UX team about the navigation flow.

Home

By opening the app, the user finds just the lines. By curiosity he slides an realizes that something happens if he touchs the screen.

Tap / Slide up/down

With only a click the lines opens. When the user slides up or down, he realizes that the lines also can react to that movement, and generates new shapes and shown more topics inside.

Scrolling up/down

When the user is scrolling, a new list of topics appears. By clicking on a topic the user access to the first article among three others.

Article

By swiping left or right, the user can navigate across three articles within the same topic. By clicking on the arrow below it opens the full article.

STAGE 2 - Animation & Prototypes

With a concept already chosen it was necessary to develop the animation and prototypes to show how actually the interaction, navigation and transitions works.
It was also necessary to minimize the design, and remove some lines (topics) from the screen.

STAGE 3 - Last version

After the second workshop and a user test, the brief was to do visible the text and add photos behind the topics. The interaction by slide up/down was also modified. Instead of the lines reacting when tapping, these are now the plaques. The challenge was get something similar with old stations boards but keeping the curv shapes on the articles. DDB named the app Brønden and this was the result: a new and more clean design, with a more intuitive navigation.

List of topics 1

By opening the app, the user finds just the lines. By curiosity he slides an realizes that something happens if he touchs the screen.

List of topics 2

The user can go directly to the article by clicking on a topic or loading a new list of topics by scrolling up. He can also go back to the first list of topics by swiping left.

More topics

The user can go directly to the article by clicking on a topic or loading a new list of topics scrolling up. The user can also go back to the first list of topics by swiping left.

Article

By swiping left or right, the user can navigate across three articles within the same topic. By clicking on the arrow below it opens the full article.

Brønden icon V1 (Selected)

Brønden icon V2

Brønden icon V3