Study Case: Redesigning Idol-Fan Community Platform (Fujii Kaze Official Application)
Introduction
No more concerts and fan meetings. No more crowds with the scream of fangirls and fanboys everywhere.
That being said, fans of idols are always beside them regardless of the physical boundaries. I noticed that a lot of musicians, bands, and groups have been trying to digitalize not only their music but also other kinds of fan-services that they usually do offline.
By making a lot of alternative options, idols are trying to give a bigger impact on their long-distance fans by connecting to them virtually, while at the same time growing their business in music.
Why… this app?
September last year, I started listening to Fujii Kaze, a big-hit, pretty much a rising star from Japan that paved his singing career through YouTube. I genuinely think that he’s a prodigy with piano.
I discovered that his company created a dedicated application for his exclusive updates inside the app, and decided to give it a shoot to improve the experience.
The reason was simply because I think there are a lot of opportunities that could be explored for the product to give more impact on the fans, the artist, as well as the business.
Currently, you could only download this application if you live in Japan, available for both iOS and Android, under the name of
藤井 風 公式アプリ『Fujii Kaze』.
Since I don’t live in Japan, I downloaded the apk version of the app, just like the other international fans (Yes — being a fangirl is ain’t easy).
1. First thing first: Research
Preparation
I began by listings the open-ended questions, then narrowed it down into eight main questions.
The first three interviews were conducted through direct messages (dm) on Twitter. Dms gave more personal senses that would be helpful to gain insights. Fans really don’t show much real identity when it comes to supporting their favorite idol, that’s why I thought it was best to have it done literally.
Initially, the plan was to conduct 5–6 dm interviews. But due to different timezones and limited time, I decided to also share an online form to support the previous findings, still with qualitative purposes.
Research Findings
After collecting all of the insights that users told throughout the survey, I could see users’ behavioral patterns and create a summary based on several parameters. The detailed sheet can be accessed here.
Then, I wrote down the pain points that users face and create a persona to get a better understanding of their goals and frustrations.
Benchmarking
There’s no better way to learn than from the OGs, so I conducted a comparative analysis with existing apps like V-Live and Weverse, both known well for their popularities bridging K-Pop idols with fans while making sales.
I also studied Medium’s app to see its flow and structure of compiling writing information, since the Staff Diary feature really attracts fans’ attention which has the style like a writing blog.
V-Live and Weverse both had more complicated structures because they are working mostly with short messages, photos, videos, with a lot of different groups as well as built-in shops.
However, I’m limiting the scope of my case study to focus more on making the users feel comfortable first by improving the app’s structure and help bridging connections between users and idols.
Application Study
Besides gaining insights from outside sources, I also studied the whole application. I took a screenshot of every page I landed on and created the app’s information structure. I made it here.
I noticed that the main concerns were the lacking clarity:
- If you click “back” video from home suddenly you’re in contents
- There are too many “big” choices that go for the same content
- It’s not intuitive for users to predict what exposure they’ll get from the certain features
- The division of the features is not underlining the hierarchy level of information of what’s most important and what could go after
So, how might we improve the fans’ experiences using the app?
2. Ideation
After understanding users’ problems, now comes the time to put my shoes on theirs. People say this a lot — but scribbling on paper really helps to generate better ideas. You could always digitalize it afterwards anyway.
Information Hierarchy
Before going further, I organized the information hierarchy first. The prejudice was made by positioning myself as a fan (which I truly am), and classify which information suits what a fan thirsts the most.
- Primary: Kaze and staff’s diary updates, videos, photo gallery, music, fellow fans updates
- Secondary: Schedule, seasonal information (previously labeled based on show, merchandise, media, news, update notifications, tour info, etc)
- Tertiary: Kaze profile & social media handles, fans’ profile, and company & developer’s details (information that is unchanged for a long term)
New Application Structure
The new structure was created based on the information hierarchy I created earlier. I’m using the standard four bottom navigations to create familiarity for users to bring intuitive decisions.
To simplify, here’s how I basically sort the information for each navigation.
- Home: Containing primary information sorted by recent time. Schedule. Divided into two tabs — artist’s feed, and fans’ feed.
- Discover: Categories of primary information from artist, ads section & flash info (for further exploration shop could be added here)
- Notification: Secondary (seasonal) information, user’s notification
- My profile: User’s profile settings and tertiary information
Board containing current and after ideation sitemaps can be accessed here.
User Flow
I also created user flows for certain tasks to help me acknowledge what kind of requirements are needed for the features and what kind of steps that user needs to follow to achieve certain goals.
3. Low-Fidelity Exploration
I used papers to help me initially draw what kind of designs that I envisioned in my mind. It is easier to see which direction I’m going for to see options that I have.
The hardest part, I must admit, is the “home” section. I curated 6–7 sketches to see what kind of design worth trying, especially accounts that this application really highlights idol but also has a great opportunity to be developed as a fan-community platform.
4. Implementation: Wireframe & Prototype
I designed a low-fidelity wireframe and prototype directly in Figma after sketches. I found that this is the most effective way to work on because if there are certain aspects that I want to change, I could get a literal visualization of what it looks like, rather than using third-app parties like Miro and Whimsical that I’ve used on the previous steps.
I make sure that when the app is opened, the first thing that popped up is the language settings choice on the onboarding process. This helps users identify things a lot faster made it easier to absorbs information that’s going to be provided to them. Register screen made easy and simple, requiring demographic information beside the basic information.
The first focus is on the “Home” navigation that contains recently updated content both from artists and fans.
Users will be automatically directed to the tab “Artist” to see the newest post. The translate button can be used when a user clicks on a post. For example, here, user chooses Staff Diary’s recent most (top card) and you will see the translate button. The translate button helps users to switch between languages faster without losing focus on the app’s main contents.
If a user clicks on the artist’s/team member’s post, they could go straight to their profile and see two main activities. The artist section includes the artist’s info and the posts that they made (in every form, from story, diary, gallery, to videography) and the activity shows their recent contribution to the fan-community.
For a fan-community to work, there has to be a medium for fans to share their thoughts too, or simply cheering their idols in times of need. In the tab “Fans”, fans could send their messages to idol and getting their lucky charms being noticed and commented back from the idol.
Here information is stored in a more neat way, using categorized items to make it easier for users to find contents they want to look for. The search button, on top of everything, also will help make things more discoverable.
The banner was added for the sole purpose of promotion and could be maintained especially for business requirements.
At first, I classified schedule and music into primary information, but after the exploration, with wireframes and prototypes, I realized both of them are more suitable as secondary information since the cycle of time does not go by quickly and are not being looked for as much as for the other primary contents.
The third navigation is used for notifications, divided into official updates and user’s individual updates from comments and likes they posted on the fan’s feed. Previously, there is differentiation for article-based information divided into certain categories like news, others, shows, and media.
The new design embraces everything and uses filters as well as labels to group each article-notifications when it is necessary for users to do so. The divided individual notification will also help users notice faster what kind of responses and feedback they receive from the community.
The last certainly not the least is the user’s “Profile”. Here is the section that is dedicated firmly for users’ to track their supports to the community from their posts, reading their marked bookmarks, and get control of their own preferences through settings.
Here are some important links I used throughout my process
In a Nutshell
I read quite a lot of articles about UX, but I guess to read and actually experience the whole thing is a completely different kind of situation. I get to understand the whole process and contemplating a lot of contexts.
It’s really interesting to get lost in your thoughts and the next day everything’s crystal clear because of research and continuous improvisation.
Here’s something I took note of.
The Things I learned
- Creating a consistent pattern for research to make a hassle-free analysis is a must. It’s GIGO after all.
- Storing information structurally by treating study cases like a logbook is helpful. Narrating is a way to go.
- Learn to name all your layers properly and use just one notebook for everything
My Limitations
- The language barrier when conducting the survey is real
- Unable to conduct research from the idol’s or data-driven business perspectives
- I didn’t call the structure IA, because from my understanding IA is larger than the scope of UX itself, and this scope of IA I didn’t involve here
What’s Next?
- Iteration, I would definitely ask a community I’m a part of for suggestions and critiques
- Usability testing to end-user
- (Sometime in the future) to give info about this to the idol and the company ;)
This took me two weeks to finish, starting from the preparation to the finishing of the small details. As you can see, I have no beautiful mockups here…just yet.
That’s also being said — there is going to be a part two! Pretty soon, I hope so.
Thank you for peeking in on my very first journey of making a study case!
