Background

During the COVID pandemic, ANA, a Japanese airline, aimed to offer customers a virtual travel experience. To fulfill this goal, We developed "ANAGranwhale," a metaverse platform allowing players to explore Japanese landmarks in virtual reality. This not only addresses the issue of ANA frequent flyers being unable to utilize their travel miles during real time traveling, but also serves as a platform for discovering places to visit in Japan post-pandemic.

My Role

Over the course of 6 months, I was tasked with improving the user experience of the metaverse platform following its initial launch. I leveraged data-driven research to inform my designs and adapted to both internal and external environments by mastering design tools like Adobe XD and Unreal Engine.

ANA GranWhale Challenges

  • Collaborating with external teams to make decisions on both design and devlopement.
  • Learning how to increase user engagement time.

ANA GranWhale Solutions

  • Compromised on decisions and focused on teamwork, building an infrastructure that effectively bridges the gap between designers and developers.
  • Researched and Designed a community feature that promoted socialization within the virtual world ( 18% increase of players staying longer than 15 minutes in the platform.)

  • Want to learn more about myJourney?
    (Click the arrow to view more)

    How I got started

    At Scopenext, I was chosen to represent the company’s lead designer for this project, leveraging our strong data management services while expanding into gaming design field. Joining the design team after the initial launch, the stakeholders requested that I, as an external designer with no prior involvement, evaluate the project's UX. So drawing on my background in research and design, my first step was to gather as much player feedbacks as possible.

    It is all about the experience

    When I initially looked at some of the reviews written about ANA Granwhale, the majority of them said “good concept, bad usability”, “get bored easily” . The data reflected this, showing that 73% of users logged out within 15 minutes , and 68% left empty handed. This 68% was a critical metric for ANA, as the app was designed to encourage users to spend travel miles and engage in virtual shopping. However, I strongly believe the key to any successful metaverse platform is sustained user engagement, as the time players spend directly influences their willingness to invest in the platform.

    ANA GranWhale Community Feature Flow

    ANA GranWhale Community Feature Flow

    Community Feature

    I proposed adding a community feature with private and open chats centered around the concept of 'touring together.' Previously, users could send brief messages for instant communication with those nearby. Now, the focus has shifted to live chats that allow interaction with everyone across different areas.I also contributed the design of avatar action as well as emojis to color the chat experience.

    Getting buy-in and Compromise

    Collaborating with external teams on a large project like this was challenging, especially since I wasn't the only designer involved. Securing buy-in from the primary design team at JP Games tested my ability to manage UI design tasks. Updating the design system was particularly difficult due to my skillset. While my go to tools are Figma and Adobe XD, JP Games, being a gaming company, relied on Adobe Photoshop and Unreal Engine. This required me to compromise my skillset and learn new tools to bridge the gap between designers and game developers.

    ANA GranWhale Design System

    ANA GranWhale Design System

    UI Concept

    My task as a UI designer was updating the existing UI elements from Adobe Photoshop to Unreal Engine while creating new ones on Figma.
    The app's theme, 'Sky Travel,' inspired the use of gradients in banners and buttons to create smooth color transitions. Given that ANA GranWhale operates similarly to a gaming platform, we designed 3D buttons, which are widely accepted in gaming UI. To maintain player attention to the game, we made most of the cards, modals, and popups transparent—another common feature in gaming industry. Due to non-disclosure agreement, I cannot share the UI components created in Unreal Engine, but this image was exported from Figma.

    After Implementing...

    The implementation of the community feature introduced a new way to engage with ANA GranWhale. Since the chat room could be accessed anytime, anywhere in the game, players began clustering in the lobby (the first location upon login), which led to lagging issues and frequent app restarts. While the shopping rate initially increased by 12% in the first month, it saw a 7% decline in the second. However, an unexpected trend emerged—more players began purchasing V-Trip, a virtual travel coupon that transports avatars to specific locations. Interestingly, many players started using V-Trips together, traveling to new locations with their chat buddies, spawning into V-Trip destinations at the same time!

    Reflection

    I still view this outcome to be positive, because more than 45%of players stayed longer than 15 minutes. Additionally, more players are spending their travel miles on V-Trips, effectively driving monetization. However, our stakeholders were hopping to capitalize more on the virtual shopping experience given its potential for brand collaborations. With more players active in the platform, it was time to focus on new issue - how to get people excited to buy virtual items.

Background

While developing ANAGranwhale, we encountered a problem of item possession. Previous data showed the players did not want to spend their travel miles on just buying clothes and accessories for their avatar since virtual item tend to lose its value once players stop using the platform. As a solution, we created a separate e-commerce site called "ANAGranWhale NFTMarketplace" where players could purchase virtual items as NFTs, and retain value for future investment.

My Role

Unlike the ANA GranWhale project, I worked primarily with internal design and development teams. From researching current NFT markets and users purchase flows to building design systems and information architecture for cryptocurrency transaction, I challenged myself to manage the whole project as much as possible for 1.5 years. I also made many tradeoffs along the way...

NFT Marketplace Challenges

  • User wants more customizable items which are not available in ANAGranWhale.
  • Due to ANAGranWhale being a heavy app, users are frustrated with purchasing speed.

NFT Marketplace Solutions

  • Import cryptocurrency (Ethereum) with opportunity for users to purchase NFT items that are tied to ANAGranwhale.
  • Changing purchasing flow from in-game purchase to click-to-browser purchase.
  • Adding time limits to user's payment process to increase security during purchasing items.

  • Want to learn more about myJourney?
    (Click the arrow to view more)

    From Metaverse to NFT

    After realizing that the growing number of active users didn’t directly affect shopping rates in ANA GranWhale, our team asked the stakeholders to create a questionnaire focused on the players' shopping experience. With the help of ANA's data, we discovered that a significant number of players wanted to see more items in the store. While we knew the limited selection of avatar wearables, given the app’s early stage, needed improvement, one piece of feedback stood out the most:

    I love traveling with my friends in the virtual world. I like the clothes in the shop but I feel like there isn’t more I can buy. I would love to see some unique products to customize my experience in V-trip.

    The two words—"unique" and "customize"—made me think about what we can offer rather than what we can deliver. Leveraging my company's strongest asset—blockchain technology—I proposed introducing NFT items to ANA GranWhale. NFT items are typically created by artists, which ties the idea of adding value to the shopping experience through global networking.

    Lots of Paperwork

    It was easier said than done. It took us two months to get buy-in from stakeholders and another four months to integrate blockchain technology into ANA GranWhale. We faced several technical challenges, including data acquisition, data storage, data interoperability, and privacy preservation. I collaborated closely with the product manager to write a business proposal, highlighting the potential of digital product ownership trading for individual consumers. To facilitate this trading, we proposed the creation of an NFT Marketplace for ANA GranWhale.

    NFT Marketplace Design System

    NFT Marketplace Design System

    Thanks, Adobe XD...

    Since it is a service created under ANAGranwhale, the NFT marketplace has many similar UIs to begin with. We first replicated the original UI in Adobe XD, and started creating new elements native to website such as input controls, navigation, and footers, etc.
    But as soon as we finished designing the first prototype, Adobe announced plans to phase out Adobe XD by 2024. Fearing the future maintenance issues in the tool, we were instructed to transfer all prototype files and assets from XD to Figma. This was the tedious, manual work I have done in my UI career because I was the only designer who was familiar with Figma! My method was simple, start by manually create text and color styles on Figma, then copy design elements over from XD in SVG format. While converting to SVG was efficient for images, icons, and patterns, it wasn’t suitable for other elements, which I had to recreate manually...

    NFT Marketplace User Flow

    NFT Marketplace User Flow

    Payment methods

    The marketplace’s goal is to create a platform for consumers to buy NFTs. However, adoption is relarively low in Japan, with only 30.8% awareness and 3.2%ownership of NFTs. (NFT認知率は3割、保有は3％ スポーツ・ アニメが人気 MMD調査) . To address this, we introduced an additional payment option: users can pay with either cryptocurrency or credit cards. This allows those unfamiliar with cryptocurrency can purchase NFTs easily and securely, similar to regular online shopping. Additionally, since many users took time in choosing payment methods as well as studying how to create wallet for digital currency, a 15 minute payment time limit was added for both methods to enhance security.

    Search Filter (before)

    Search filter (before)

    Search Filter (after)

    Search filter (after)

    Search Filter

    After the initial launch, we gathered data through heat maps and usability testing, revealing that the search filter was the most frequently used feature, as users were extensively exploring different categories. The testing showed that many users relied on the filters because the homepage displayed cryptocurrency prices, which caused confusion. To address this, we updated the homepage to show prices in JPY by default. We also expanded the FAQs to better explain cryptocurrency, wallets, gas fees, and NFTs, to improved the user flow to make connecting to crypto wallets, such as MetaMask, easier.

    Reflection

    The NFT Marketplace opened new opportunities for customer experiences, generating additional revenue through commissions and brand collaborations. One month after the website’s release, the shopping rate from ANA GranWhale users increased by 30%, and 15% of daily active users who weren’t part of ANA GranWhale also visited the site to purchase items for their collections. However, as NFTs are still relatively new in Japan, many early users complained about the website's usability and the lack of clear instructions during the sign-up process. If I were to continue this project, I would implement onboarding tutorials to guide users after signing up.