Context - What is Tennobaum?
Digital Extremes, the gaming company renowned for the popular shooter game Warframe, annually hosts the Tennobaum event during the holiday season. This event allows players to exchange gifts within the game, unlocking rewards in the process. Notably, for each reward unlocked, Digital Extremes makes donations to a specific foundation.
The theme of Tennobaum changes each year, accompanied by donations to a different foundation. This year, I took on the responsibility of redesigning the webpage with the new theme, incorporating additional sections, and adapting to support the chosen foundation.
Retro Design
The design of this page in the previous year adhered to a format that had been consistently employed for several years. As such, I made sure that my design this year maintained an overall similar format to ensure user familiarity. However, my assignment also included incorporating additional lively UI elements to add a sense of festivity and align with the theme of this year's event.
Product Discussion
Goals
Design
Incorporating the Keyart
The key art plays a pivotal role in establishing the theme of the entire page. To align with it, I selected a new color palette extracted from the art and made slight adjustments to ensure compliance with WCAG standards. Using Photoshop, I took UI elements such as snowflakes and snowballs, strategically placing them throughout the website.
How it works
Unlock Tennobaum Rewards
DE donates to the SickKids Foundation
HOW IT WORKS
Unlock Tennobaum Rewards
Gift an item to a fellow player in-game
DE donates to the SickKids Foundation
HOW IT WORKS
Unlock Tennobaum rewards
Gift an item to a fellow Tenno in-game
DE donates to The Shine Foundation
Option A
Option B
Option C *
Ideation for the Leaderboard
I revamped this particular section with the aim of making it more modern and user-friendly. The redesigned podium offers a clearer visual representation of the leaderboard, creating a less cluttered appearance. This adjustment allows users to focus more easily on the top 3 positions.
Jane_N7
10,000 Gifts
PC
GarrusVvvv
7,775 Gifts
XBOX
Go0mba_K
7,000 Gifts
Switch
The leaderboards update every 10 minutes. The Gift Tracker will be updated every day at 2 p.m. ET. For more information, check out the FAQ!
Leaderboards
Place
Alias
Gift Tracker
Platform
#4
Username12
5,558
Switch
#5
Username111
3,121
PC
#6
Username
1,111
PC
#7
Username777
700
PC
#8
Username45
500
PC
#9
Username__JS
448
PC
#10
Username006
401
XBOX
Place
Alias
Gift Tracker
Platform
#4
Username12
5,558
Switch
#5
Username111
3,121
PC
#6
Username
1,111
PC
#7
Username777
700
PC
#8
Username45
500
PC
#9
Username__JS
448
PC
#10
Username006
401
XBOX
All
PC
PSN
XBOX
SWITCH
Today
All Time
#2
#1
#3
Leaderboards
#1
#3
Jane_N7
10,000 Gifts
PC
#2
GarrusVvvv
7,775 Gifts
XBOX
Go0mba_K
7,000 Gifts
Switch
All
PC
PSN
xBOX
sWITCH
Place
Alias
Gift Tracker
Platform
#4
Username12
5,558
Switch
#5
Username111
3,121
PC
#6
Username
1,111
PC
#7
Username777
700
PC
#8
Username45
500
PC
#9
Username__JS
448
PC
#10
Username006
401
XBOX
The leaderboards update every 10 minutes. The Gift Tracker will be updated every day at 2 p.m. ET. For more information, check out the FAQ!
Today
All Time
Retro
Iteration 1
Iteration 3
Final Design
All
PC
PSN
XBOX
SWITCH
Today
All Time
#1
#2
#3
Leaderboards
Jane_N7
10,000 Gifts
PC
GarrusVvvv
7,775 Gifts
XBOX
Go0mba_K
7,000 Gifts
Switch
Place
Alias
Gift Tracker
Platform
#4
Username12
5,558
Switch
#5
Username111
3,121
PC
#6
Username
1,111
PC
#7
Username777
700
PC
#8
Username45
500
PC
#9
Username__JS
448
PC
#10
Username006
401
XBOX
The leaderboards update every 10 minutes. The Gift Tracker will be updated every day at 2 p.m. ET. For more information, check out the FAQ!
Leaderboards
#1
#3
Jane_N7
10,000 Gifts
#2
GarrusVvvv
7,775 Gifts
Go0mba_K
7,000 Gifts
Place
Alias
Gift Tracker
#4
Username12
5,558
#5
Username111
3,121
#6
Username
1,111
#7
Username777
700
#8
Username45
500
#9
Username__JS
448
#10
Username006
401
The leaderboards update every 10 minutes. The Gift Tracker will be updated every day at 2 p.m. ET. For more information, check out the FAQ!
Today
All Time
I explored several variations, incorporating different details and features positioned in various arrangements. I presented these diverse designs to the web team for evaluation, ultimately selecting the final design displayed above.
Additional Sections
I introduced a couple of new sections to the design including the new snowball theme/alerts section, the in-game market, and the merchandise shop section
This newly added section provides more information on a new event that is occuring alongside Tennobaum. I chose to add this section as the new game mode was also holiday themed and was live for then entire month of December. To add on, it was a simple way to show off the new corresponding keyart.
The alerts are something that DE had recently introduced for Tennobaum. For this particular section, I followed a template that was used for a previous DE fundraising campaign for consistency. This section also clearly shows what players can unlock.
I included this section on the page to highlight the new holiday and Tennobaum themed items. As they are exclusively available in-game, there's no visibility for these items elsewhere. Moreover, players interested in these glyphs typically overlap with those interested in Tennoabaum, presenting a perfect opportunity to showcase these products to our target audience.
Ideation for the “How it Works” Section
This specific section is crucial as it provides users with instructions on how to participate in the event. To enhance its visibility, I introduced UI elements such as outlined frames to emphasize each step.
Option C was used in the final design. It follows the theme of the keyart while passing contrast tests. Additionally, to integrate the section more seamlessly into the page, I incorporated snow-themed UI elements.
Final Design
Place your cursor below and scroll to see the full design!
Reflection
In the end, this webpage successfully assisted DE in achieving our donation goal of $60,000 for The Shine Foundation. Looking ahead to next year, my focus would be on enhancing the cohesiveness of this particular page with the overall Warframes site while maintaining the Tennobaum theme.
The entire project was completed within an exceptionally tight deadline. This experience taught me the importance of rapidly iterating designs and pivoting directions as per the requests of the team.
Enhancing the Experience of gifting for Gamers
A fun page for the annual EOY Tennoabaum event showcasing the variety of prizes that can be unlocked and the corresponding donations that are being made.
Thanks for Stopping By!
Got any ideas, questions or feedback? I’d love to chat :)