Utapass
website revamp
Utapass is a radio-based music service under KDDI - the second-largest Japanese telecommunications operator. This is a website revamp project of Utapass, I was mainly in charge of the experience and visual design.
The challange
Create deeper relationships
with customers
Currently, we have a certain amount of new subscriptions from the website. We assume that once the main site is revamped, new users can better understand product features as well as subscription types and prices.
Our high-level goals were:
-
To establish a brand image and make it visually attractive to users
-
To give users effortless experience in searching and subscribing to the service.
-
To compile pieces of information from different pages to the website so the users can easily find features and services.
My Role
Product designer
Starting in April 2018, I led the design of Utapass’s official Website across mobile, tablet and desktop. Up until then, I have improved the services to address customers’ troubles in browsing, searching, and billing. I also have created frameworks and prototypes to share the vision and design principles with Japanese stakeholders. This helped to evangelize ideas, gain alignment and drive decision making.
The approch
Find out our main target user
According to the internet user report of Japan, users age 20-29 are the most active. Over 90% of this particular age group will go online at least once a day. Therefore, we’ve re-designed the website based on this user group. We also have audited the existing work, reviewed the competitor landscape, understand the user's vision, and researched their needs and behaviors.
The discovery
What is important
for you?
We interviewed users to collect feedback on the old website and understand the challenges of using and accessing information. Most people thought the old website lacks a strong brand image, features highlight, and a clear price table. Moreover, a lot of the web pages were scattered on different sites which confused users. From this information, we were able to identify features that users needed the most, and as we consider the same features from the business perspective by red route analysis, we were able to define our priority for the minimum viable product (MVP).
red route analysis
we reorganized the website to improve the browsing experience,
so the users can easily find different information about Utapass App.
From the structure
to Interface
Information architecture
Aside from revamping the flow and experience of our users, we have organized our features, price table and Help page in a thorough yet simple display. Also, we have made the new website more energetic and vivid to develop a stronger impression. Take home page for example, compare the previous design with the new one, we can find the new one looks more attractive to the younger users and also displayed the features more clearly.
UI Redesign
Current Top page
Previous Top page
The Impact
A good start,
and we'll keep going
We collected the performance result a month after the website was published online. Gladly, the result was quite satisfying.
weekly active user
After revamping the website and optimizing search engines, active users per week had risen by 30.4%.
Subscription Button Clicks
Furthermore, after re-designing the subscription page and highlighting it onto the home page, there was a dramatic increase of 215% in subscription button clicks.
Average bounce Rate
The average bounce rate of all pages dropped significantly to almost 1%.
I am grateful for the opportunity to comprehensively create a website that gives Utapass a stronger brand image and at the same time improves user experience. Aside from achieving our goals, my favorite part was to made users’ feedback a concrete project online. This is perhaps also the main part that gave us all these awesome results.