AEON CARDWebsite / AEON WALLET App
A financial platform that creates new services
Together with our business partner NTT DATA, we renewed the services of the AEON Card portal site “The Money Site for Your Life” and the official app “AEON Wallet” for credit card users. The feature of this project is that we went into the reconstruction of the architecture and implemented challenging specifications. By connecting the knowledge of multiple vendors, we created a new service platform that enables the creation of future digital services starting from card payments.
Solution / Output
ResearchAnalysisStrategic PlanningInformation ArchitectureUX ConsultingUX DesignDesign Language SystemContents DesignUI DesignArt DirectionVisual DesignFrontend DevelopmentCMS DevelopmentProject ManagementMotion DesignUser Testing
Imagine a future with dreams and start from scratch
Before the renewal, the site had been in use for many years and modified repeatedly every time a new type of card was added or functions were expanded. The UX was not taken into consideration, so we faced the challenge of unifying the UI of the entire site. In accordance with traditional development methods, data and screen materials were closely coupled on the server side during the site creation. Therefore, even if it was a minor correction, it took several weeks to reflect it, which made it an issue to improve operations and maintain information updates.
Furthermore, the official app, which was launched in 2016, was not well linked to the site, and its scope of activity was limited. With these issues in mind for the renewal, we set a goal of building a foundation for providing customer-centered services suitable for the digital age and creating a solid path to a dream future. As a result, along with the redesign, we decided to make a drastic review of the architecture.
Furthermore, the official app, which was launched in 2016, was not well linked to the site, and its scope of activity was limited. With these issues in mind for the renewal, we set a goal of building a foundation for providing customer-centered services suitable for the digital age and creating a solid path to a dream future. As a result, along with the redesign, we decided to make a drastic review of the architecture.
UX/UI that is friendly and comfortable for a wide range of users
When analyzing UX and UI design, we considered not only existing core users, who were housewives in their 30s and 50s, but also digital service users whom we want to realize in the future. We conducted a questionnaire survey to 1,200 people, interviewed them, and observed their behavior at multiple retail stores of the AEON Group, and formulated five target personas.
The design keywords drawn from this research were “friendliness” to deliver a little excitement to users, and “simple and clear” and “neutral” to lead to a worldview that everyone can easily accept. Based on white, two colors, magenta, which is the AEON color, and aubergine navy, which is the service color of the AEON card, are used as accents. In addition, UI patterns were classified according to the priority and positioning of the action. By applying these rules as a common rule for the site and app, we ensure the clarity of operability and the continuity of the worldview that is important for users who use both.
The design keywords drawn from this research were “friendliness” to deliver a little excitement to users, and “simple and clear” and “neutral” to lead to a worldview that everyone can easily accept. Based on white, two colors, magenta, which is the AEON color, and aubergine navy, which is the service color of the AEON card, are used as accents. In addition, UI patterns were classified according to the priority and positioning of the action. By applying these rules as a common rule for the site and app, we ensure the clarity of operability and the continuity of the worldview that is important for users who use both.
1 2
A platform that satisfies both the service user and information provider
On the system side, we redesigned the architecture for static content and dynamic applications. Specifically, we used the newly introduced CMS*1 solution “Sitecore” to implement structures and templates for over 1,000 pages of static content on the entire site. To achieve this, we got support from a vendor with knowledge of CMS development. In addition, we used the SPA*2 methods to apply Open APIs*3 for all processes for about 250 pages that required dynamic applications. With the new architecture, modifying the web layer eliminates the need for server-side editing, which allows a smooth update.
In terms of operability, we were able to implement a smooth UX like an app because it is a SPA that can read only the necessary objects each time instead of reading all materials every time the screen is drawn as in the conventional development method. Furthermore, it is easy to add application-side functions and link with external systems because we used the method to extract them as Open APIs for each transaction. In addition, most of the Open API developed this time can be shared between the site and the application, so renewal work can be unified. This time, in addition to designing both the site and application, FOURDIGIT was in charge of logic implementation for each screen of the site and scenario test design and keystroke. The combined efforts of multiple vendors, including NTT DATA, which was responsible for all development after the infrastructure, realized a high-difficulty architecture.
In terms of operability, we were able to implement a smooth UX like an app because it is a SPA that can read only the necessary objects each time instead of reading all materials every time the screen is drawn as in the conventional development method. Furthermore, it is easy to add application-side functions and link with external systems because we used the method to extract them as Open APIs for each transaction. In addition, most of the Open API developed this time can be shared between the site and the application, so renewal work can be unified. This time, in addition to designing both the site and application, FOURDIGIT was in charge of logic implementation for each screen of the site and scenario test design and keystroke. The combined efforts of multiple vendors, including NTT DATA, which was responsible for all development after the infrastructure, realized a high-difficulty architecture.
Starting line for digital service creation
After the release in September 2020, we created operation teams in each area of CMS and SPA. In addition to providing improvements and operation updates that require immediate responses, we researched and analyzed the usage status of the entire service after the renewal. We also provided extensive support such as suggesting future improvements and managing backlogs. So far, the “ STEP 1”. The platform for launching digital services that we want to realize in the future is finally in place. From this point, we will continue to verify the effects with our customers and prepare for “STEP 2”, which will lead to a future with dreams.
- Content Management System: A mechanism that manages the text and images that make up the pages, the templates necessary for the creating screens, and other elements in a database and enables unified updates and content delivery control that consider the system structure.
- Single Page Application: An application that downloads in advance the HTML, CSS, JavaScript, and other code that is necessary for creating screens to the client side. When a new page is displayed, the application uses JavaScript to acquire only the necessary data and then rewrite the page dynamically without loading all the elements from the server each time. In addition to enabling a seamless transition experience, pages refresh quickly because data and screens are kept separated.
- Application Programming Interface: A shareable program that was specialized for a specific function. Alternatively, an item that packs a mechanism for sharing. An Open API can be referenced or called from anywhere.
Client
AEON CREDIT SERVICE CO., Ltd.
Credit
- UX CONSULTANT
- Takehiro SUENARI
- UX DESIGN
- Nozomu NITTA , Wataru SAITO , Hayato MURAI
- INFORMATION ARCHITECTURE
- Asato KATSUMATA
- UX DESIGN ASST.
- Miho TANAKA , Takafumi NAKAMURA
- RESEARCH
- Rika ISHIHARA
- ART DIRECTION
- Reiko OKUDA , Taro UEDA
- DESIGN
- Pengjun Liu , Yurika WATANABE
- TECHNICAL DIRECTION
- Takuya ABE , Kanon KAKUNO
- DEVELOPMENT
- Takayuki SAKIMOTO , Yoshitaka SHINMURA
- TESTER
- Iori HARADA , Aya KAJIMOTO , KaedeAOYAMA
- DATA ANALYSIS
- Masashi MIZUTANI
- PROJECT MANAGEMENT
- Kazuki YABE
- GROWTH UX DESIGN
- Yutaro INAI , Taro AIZAWA , Natsumi NAGANUMA , Keisuke KINOSHITA , Chihiro MORI , Yuta SHINADA
Partner
- PROJECT MANAGMENT / SYSTEM SUPERVISE
- NTT DATA Corporation
- CMS DEVELOPMENT
- LYZON Inc.
- DEVELOPMENT
- 3FORCOM
- TEST MANAGEMENT
- NTT DATA Vietnam
- MOVIE EDIT
- ELEPHANTSTONE Co., Ltd.
- PHOTOGRAPHY
- Tsukasa ISONO (RicoLeRisa)
