MyAU Android Mobile App Design
In 2017, frog launched a partnership with Japan’s largest creative services and advertising company, Dentsu. They wanted to bring frog’s tech and design innovation to their client projects, and it gave frog the opportunity to do exciting new work in Japan and other Asian markets. For the first partnership project, my team was asked to create a new mobile app strategy (including a newly designed Android app) for Japanese tel-co KDDI-AU. This involved consolidating the functionality spread across several existing apps, while also solving for some key UX pain points. We created rapid design concepts and 2 visual approaches, tested them with Japanese users, and refined a final design concept based on our research findings.
Role: Senior Visual Designer, UX Researcher
Team: I worked with a Creative Director, Senior Interaction Designer, and Design Technologist/Prototyper
Scope: Android mobile app design specs in both English and Japanese, a new design language system, information architecture, design research (both usability testing and visual concept testing), working coded prototype with animations
The Problem
At the time, KDDI-AU had a constellation of clunky single-point solution apps, one to manage your phone’s data plan, one for customer service, one for payments, one for entertainment, shopping, the list went on. In addition, the apps were a hodge-podge of interaction patterns with no overarching, cohesive look & feel. Through early alignment discussions with the client, we determined that the primary business goal was to streamline their digital app ecosystem into a singular experience with fully-integrated customer service features that would reduce the need to visit a physical store.
Prioritizing Use Cases through Co-Design
At the project kick-off we held a collaborative co-design workshop with our KDDI-AU clients to define and prioritize the potential use cases of the re-designed app. Once we had aligned around specific use cases, we brainstormed and sketched the potential steps of each user flow.
Creating a Shared Design Vision
We also needed to create a new design language system building off of KDDI-AU’s existing brand, but the existing digital touchpoints lacked consistency—really the only visual anchors of the brand were the logo itself and the usage of a sunny shade of orange. This was exciting because we had more or less a blank slate on which to build, but we also knew this made it even more critical to build alignment and trust early on, especially given the language barrier and different cultural references. For the project kickoff, I designed a huge poster mood board with the spectrum of brand principles all found in the KDDI-AU guidelines: playful, fun, sophisticated, and refined—which I had initially felt were paradoxical and difficult to interpret. This alignment exercise was a huge success; it fostered an enthusiastic and in-depth discussion that helped me better understand the balance of visual qualities they were looking for.
Design Goals
Show Value
Communicate purpose and value of the myAU app.
Visualize Data
Create an intuitive mental model for managing data
Build Trust
Humanize the customer service chatbot experience
Concept Testing
User research is always an ideal part of the design process, but when designing a mobile app for a very different cultural and consumer context, we knew that the testing phase of this project would be especially critical. Luckily we were able to travel to Tokyo for live concept and usability testing with actual KDDI-AU customers. We couldn’t have done it without the recruiting, facilitation, and translation services of our local researcher partner, Infobahn, who helped us navigate all of the customs and complexity of doing design research in Japan. Our research was focused on understanding user perceptions and feedback on several key topics: what visual design direction resonated most with their millennial customers (playful vs. sophisticated), levels of trust with in-app chat, and how to display data intuitively to communicate usage and overages.
Visual Design Concepts
Concept A
Participants described this design as:
Stylish, elegant, cool, sleek, & smart
“Stylish like Muji. A bit cold, but cool.”
“Pretty, nice use of color”
“Information is easy to see with the bright white space”
“This feels adult”
Concept B
Participants described this design as:
Kawai, pop, choidasa, feminine, & childish
"Cute, but almost distracting, maybe easy to miss information.”
“Cute, pop, and round”
“The blue is childish and the orange is smart”
Recommendation Based on Customer Feedback
The app design should feel stylish and youthful, but serious enough to feel trustworthy. Building on the bold usage of orange is a key element that makes the experience feel authentic to the AU brand.
New Design Language System
The visual language was meant to feel fresh, modern, friendly, and simple—something that would appeal to AU’s target demographic of the young millennial without straying into kitsch or a cartoony look. We used illustration, iconography, and a bright color palette to make the app feel engaging to use, but the clean typography, flat design, and white space helps to maintain an aesthetic that is still clean & cool.
First Sign-in/Onboarding Flow
Adding Data
While in the U.S. most people have unlimited monthly data plans, in Japan the vast majority of consumers use pay-as-you mobile plans. This meant that by far, the number one use case for the myAU app was for the users to “top up” their data plans, often in small increments and multiple times per week. The old data app had a clunky workflow for adding data; we focused on creating a quick and easy process that would notify the users when they were running low and take them directly to the screen to add data. The visual gauge provided a clear visualization of how much data the user had left—we also used in-app content to reinforce what the GB meant in terms of terms of the user’s typical usage by number of days left. At a glance the user could see whether they’d make it to of their cycle, or whether they should purchase more data.
