Problem
- User feedback shows that the random card as a small tile has been hard to find within the Explore feed.
- For users that do find and use the Random card, it is a clunky experience since users are not able to keep selecting random to refresh a new random article whilst still remaining in the complete article view – but instead need to close the random article to return to the feed and tap on random again in order to get another random.
User story
As a user I want to get the surprise factor of a complete random article loading when pressing a button/link to view a random article, and be able to keep selecting a "random" button/link to refresh random complete articles.
Proposed solution
- Update random card design to be more prominent
- Perhaps incorporate an initial random article onto the feed (a la Featured article).
- Addition of an ability to bring up more random articles within a full random view.
Mocks of proposed designs
Interaction flow
Invision prototype: https://wikimedia.invisionapp.com/share/V2E7NHO6E
Redline mocks are shown tagged with "Random" on Zeplin board https://zpl.io/GaRQKKV
STEPS:
- User opens the feed and sees Random card.
- User taps on the card which transitions to the full screen Random ‘mode’
- User goes to the next random article either by tapping the die FAB or swiping left over the article card
- User taps on the save icon to bring up the 'Add to reading list' bottom sheet.
- User taps to save the random article to a reading list. It is expected that the save to reading list bookmark icon will now be updated to a 'filled’ icon, and there should be a snackbar to 'View list' that pushes up the random mode buttons.
- User taps on the card to view it in its entirety in the article tab stack.
- User changes the display theme to 'dark' mode and taps the device back button. It is expected that they will be returned to Random now in dark mode.
- User is able to go back to the previous random article either by tapping the previous button or swiping right over the article card
NOTES ON DESIGN:
Feed card
- Both the Today and Random card are updated to the same design (full width colored background ‘banner’ containing Card title, subtitle and icon) with footer action
- The ENTIRE CARD is tappable.
- Overflow contains menu item to hide the card and may also be dismissed by swiping right
- Animated gif on the Random die icon with the card is scrolled into view
- Introduce a transition when the card is tapped so that the blue background moves up into the toolbar background.
Random mode
- Created a subtask T180806 - There should be an animation on the die when it is tapped
- There should be a transition when the full article is opened from random mode (lead image moves up and expands into position on article tab view)
- Cards should be a fixed height, comprised of:
- Lead Image (if the random article has no image, use the placeholder image icon instead)
- Article title (max. 2 lines)
- Lead paragraph (max. 4 lines)
- There is a dark mode for Random mode
- If the article has been saved to a list already, the bookmark icon should become filled
Full article opened from Random mode
- If the “X” icon in the toolbar is tapped, the article stack closes to show the feed.
- If the device ‘back’ button is tapped, the particular article tab is closed and user returns to the Random mode.
QUESTIONS:
- Should we insert the Random card more frequently in the feed - eg., every 3 days?
- Should we potentially promote it show higher in the feed on its initial release?
- Potentially add a “shake to shuffle” to open random mode when elsewhere in the app
- Is there value in adding a Share action in Random mode as well as/instead of the previous/replay action?
NOTE: Initial design explorations can be seen in the "Archive" section of the same Invision prototype
