Logo DarkLogo Light


Gift Card Selection

goodydoo is an e-commerce shop with ties to charity — a percentage of each purchase gets donated to animal shelters across Europe. Each purchase fills a food bowl for an animal in need.

After the initial online relaunch, I designed a user-centered gift card selection process, under the supervision of the lead UX designer. While respecting the design guidelines as well as the parameters set by and discussed with the client.

My Role

  • Supporting the lead UX designer
  • Design Research
  • Journey mapping
  • Screen Design




Pain Points & Solution

Previously the client had a gift card listed as a standard product on their page. They found that most users didn’t even know that they offered gift cards. To make this feature more prominent on the website we decided to give it its own place on the navigation and design a 3-step selection process for a smoother user flow.


User Flow

Based on the information needed for the gift card we designed a 3-step process to make the selection as fast and clear as possible. Here is the final user flow we put together:

goodydoo task flow
goodydoo task flow
goodydoo task flow

UI & UX Design

For the landing page, we wanted to provide fast access to the selection process, while still giving the user the necessary information. This was done by including an informative section on how gift cards work at goodydoo, to highlight the positive features of the card. All button states, colours and fonts were already defined by the lead UX Designer.

  • Navigation point “Verschenken” added
    Gift cards are now easier for users to find.
  • 3-Step process completion bar
    The user can see the progress they have made in the selection process and what the next steps are.
  • Selection of predefined amounts
    This makes the decision making process easier for the user and makes them more likely to continue with the process.
  • Explanation of gift card process
    Placed further down for the users that are uncertain or want to know what their options are before having to fill out any forms.
  • Product recommendations
    Double function:
    1. So the user sees what kind of price range the products are in and can make a better judgement on the amount selection.
    2. So users that accidentally landed on the page might be inclined to explore other products.

The final design

Every step was reduced down to the minimum amount of information required from the user. We tried to make the decision making as easy as possible to secure completion.


Users could choose between printing the gift card or emailing it to the recipient. A different mailing would be sent out depending on which was chosen.

Gift card to print:

  • Instructions on how to fold the A4 paper after printing
  • Digital receipt integrated so the user doesn’t receive two separate emails
goodydoo mailing for print version

Gift card per email:

  • Visual changes depending on which campaign or collection is currently active
  • Digital gift card for the recipient to save on paper
goodydoo mailing for email version