Bungie

Bungie, the creators of popular games like Halo and Destiny, approached us to create a complex integrated rewards store. This store would allow customers to redeem real-life rewards earned while gaming.

Magento Ecommerce

Design System

Site Design

UX.UI Audit

UX.UI Strategy

// Magento 2 Build Created @ Rightpoint

Imagine earning rewards while gaming on your console of choice, and being able to view achievements and redeem those credits instantly upon logging into an e-commerce platform.

Our challenge was to streamline a previously tedious, multi-step process into a seamless customer experience. We accomplished this by linking each e-commerce customer profile to their in-game experience through a series of complex APIs. However, this raised a series of user experience challenges that we tackled through a multi-sprint Magento project.

delivery process

Inspiration

Research

Ideation

Sitemap

Style Tile

Sketches

The discovery process is a systematic approach aimed at understanding users' needs, goals, and pain points to inform the design of a user-centric product or service. A thorough discovery can make or break the success of a product.

Scroll for more content

Feature Introduction

Content Strategy

Customer Feedback

Usability Testing

Low-fidelity wireframes allow for all teams to begin preparation for the project. Developers can scope out features, content creators and copy writers can begin to create assets, and the client gets the first tangible opportunity to provide feedback on functionality.

Hi-Fidelity

Brand Representative

Realistic Content

Interactive Prototype

High-fidelity designs are crucial. They allow for visual changes, so they should be accurate. Interactive prototypes are the best way to show the final result. The development team will use the final designs, and the QA team will ensure they were implemented correctly.

View Full Designs

Development

Quality Assurance

Monitoring

Post-Launch Evaluation

Launch is a big day for everyone involved including stakeholders, developers, quality assurance, and design. Our team found it very important for designers to be actively reviewing the site at every stage of launch to ensure the UX/UI remains intact.

Usability Testing

Bug Fixes

AB Testing

Monitoring

Launching a website is only the beginning. A website should be a constantly evolving organism which is re-evaluated and iterated upon. Additional work could be driven via planned tiered feature sprints, AB testing, user analytics, or simply updates in trends.

View Full Pre-Order Audit

Challenge

Integrate In-Game Earnings with E-Comm

Eliminate the potential for confusion as customers navigate the process to redeem in-game earnings such as digital badges and physical products.

Solution

By integrating the login system used in the game with the e-commerce store, we were able to import user data achieved within the game. To provide a seamless and informative experience, this data needed to be displayed at all stages of the purchase funnel, including the user dashboard, throughout the purchase process, and in the post-purchase experience.

Challenge

Create a Design System

Bungie's main site is focused on their Destiny game brand, but they lacked a true branding system for the Bungie brand itself.

Solution

Create a branding system that acknowledges the featured product, Destiny, while also standing out as a unique product in case the rewards store includes other games. Incorporate elements of gamer interfaces and aesthetics, while also integrating careful UX considerations into a cohesive pattern library.

Design

Pattern Library

A web UI pattern library is a collection of reusable design components that create consistent and coherent user interfaces. These libraries include things like buttons, forms, navigation menus, and other interface elements.

Design

Homepage

The design is based on the pattern library, which was designed and developed to be used with Magento Page Builder for optimal ongoing customization.

Banner Touts

Photography Feature

Live Text

Immersive Design

Animation

Media Slider

Brand Moment

Animations

Accessible Controls

Immersive Design

Design

Collection Landing Page

The design is based on the pattern library, which was designed and developed to be used with Magento Page Builder for optimal ongoing customization.

Collection Landing

Secondary Navigation

Subcategory Highlights

Mobile Friendly

Representative Imagery

Listing Grid

Custom Styling

Interactive Swatches

Custom Badging

Large Imagery

Design

Rewards Landing Page

A customized page based on user data which displays current rewards and the user’s redemption status.

Challenge

Improve Pre Order Flow

The process of earning a reward that is not yet available for shipping lacks clear process and messaging, resulting in skewed customer expectations.

Solution

Thoroughly audit the existing flow process from start to finish. This audit examines each step in the process in order to identify any potential areas for improvement. Once the audit is complete, a set of recommendations can be made for how to improve the process to make it more efficient and effective.