Danskerne Digitale Bibliotek
CLIENT
-
Danskerne Digitale Bibliotek
AGENCY
-
Freelance
-
2016
SERVICES
-
App Design
-
UX & UI Design
-
Visual & Digital Design
DELIVERABLES
-
App's Concepts Design
-
User Interface Animation
-
Interactive Prototypes
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.
Phase 2 - Animation & Prototypes
In this stage the focus shifted towards developing animations and prototypes to showcase the actual interaction, navigation, and transitions within the app. With the chosen concept in mind, the goal was to create engaging and intuitive user experiences. Additionally, there was a need to streamline the design by removing certain lines or topics from the screen. This step aimed to enhance the user interface's clarity and ensure a more seamless user journey through the app. Through the creation of animations and prototypes, the team was able to demonstrate the functionality and flow of the app, allowing stakeholders to visualize and provide feedback on the user experience. This stage played a crucial role in refining the app's design and ensuring a smooth and captivating user journey.
Phase 3 - Last version
In Phase 3, following the second workshop and a user test, the focus was on refining the app's visual design and interaction based on feedback and insights gathered. One of the key improvements made was to enhance text visibility by making it more prominent, and to add photos as backgrounds behind the topics, adding visual appeal and context. To improve the user experience, the interaction was modified. Instead of lines reacting to tapping, plaques were introduced as the new interactive elements. These plaques were designed to resemble old station boards, evoking a sense of familiarity and nostalgia while retaining the curve shapes on the articles, maintaining the app's distinct character. During this phase, the app was officially named Brønden. The result was a new and cleaner design, with a more intuitive navigation system that made it easier for users to explore and engage with the content.
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
