Results Page Redesign

[alinarub]

Value proposition

As a user I want to have a nice and clean overview of my quiz results

in order to enjoy my matching dogs even more.

Description

Acceptance criteria

• There is a brief overview of all suggested dogs in which each dog is displayed as a card.
• The results are shown in a more compact way.
• There is less blank space in the cards.
• The image of the dog should still be recognizable, so it cannot be too small.
• Confetti appears when you first reach the results-page.
• You can start the quiz again by clicking on a link in the ImageTextModule.

Tasks

• Create the feature branch results-page-redesign.
• Test out different designs for DogCard.js and restyle the ul.
• Add confetti to the page.
• Reduce margin-top above the ImageTextModule.
• Add a link to start the quiz again in the ImageTextModule.

[Julia-Pickel]

Hi there!

I really like that you want to work on the design of your results page to make it even more user friendly! 🙌

Since there is only an image of your current design it's a bit difficult to fully get what you're planning to change.
But here some suggestions and thoughts on your user story:

1. Value proposition

As a user I want to have a more visually appealing results page
in order to enjoy seeing my results more.

Suggestion ⬇️
As a user
I want to have a nice and clean overview of my quiz results
so that I enjoy my matching dogs even more

2. AC

The results are shown with less scrolling and in a more space-efficient way.

→ What do you mean by that? And how are you going to change this?

Suggestion ⬇️
AC:
– There is a brief overview of all suggested dogs in which each dog is displayed as a card
Task:
– Change style of ul component (e.g. display ul as grid and set place-content on center)
– Reduce margin of image component

Confetti appears when you first reach the results-page.

→ Nice feature 🤩 🎊

[AchimBartscht]

Thank you, Julia. We added most of your ideas now.

[Roland-Hufnagel]

Hi. This looks good now. As an improvement you could include the Link to start a new game in your wireframe.