Digital Birthday Party

• User

  We have only one user on this project who is the family member, Lana. She is in her 60s, living with her husband in Australia. She is a loving grandmother of two.

• User Pain Point

  Family members being far apart while practicing social distancing, Lana is not able to celebrate her birthday with some of her loved ones.

• Idea

  The initial idea was to create a website where Lana can click on some balloons to have confetti exploding on the screen and revealing the happy birthday message from both myself and the developer. Essentially a digital birthday card. We then realized to achieve exploding confetti upon click would be time-consuming and would require customed animation assets. However, revealing videos upon click is easily achievable and we could involve more of her friends.

• Refined Idea

  To create a venue that hosts family and friends’ wishes and kind words, so that the receiver, Lana, can feel special on her birthday and have an interactive experience.

• Assumptions and Limitations

  We have assumed that Lana will be viewing and interacting with this website on her mobile phone. We have also assumed that she would be viewing the site at home, a quiet and private location. We would keep interaction simple and intuitive to suit the user’s moderate tech level.

  

  
• 

  

• Design Exploration

  I then explored multiple birthday-themed concepts that would fit the user goal. I eventually decided on option 4, and the rest are some honourable mentions.

  Option 4, where the balloons flow around the page allows the design to stay on one screen. There will be no need to scroll, therefore keeping the interactions focused on the balloon and ultimately the videos. The balloons can be enlarged so that they are easy to press with fingers. This was a consideration to not use candles as the video links.

  

  

• Wireframing and Mock-up

  The wireframe captures a simple user flow. Upon pressing on any of the balloons, a video will pop-up. During this step, I determined that the videos shall be set on auto-play. Reducing the number of steps needed to reach the videos smooths out the overall experience.

  

  

• Prototype and Testing

  By this phase, I have designed the UI, mocked up the interaction and extracted the assets for the developer to build. Our initial prototype had a few balloons in the same colour. During testing, we quickly realized that every balloon needed to be in its distinctive colour to avoid users clicking on the same videos.

  

  

• Final Launch

  The website was a success. Lana loved the digital surprise party and was deeply touched by the heartwarming birthday wishes and kind words.

  You can take a look at the site here abzaloving.com

  The original videos have been substituted by stock videos for privacy reasons. (Warning – The site is designed as a mobile experience. The bigger the screen, the harder it will be to catch the balloons.)

• Reflection

  I particularly enjoyed working closely with a developer on this project. Knowing what is technically possible helped me enormously in the concept exploration process. Knowing what CSS can achieve also saved me time on delivering assets. Instead of supplying several different balloon assets, only one was needed. Switching the same balloon asset into different colours was done using CSS colour hue.

  In the future, we are looking to add the feature where others can record their own videos and upload them as new balloons. New user needs will be considered. Limitations will be reconsidered too.