Company
Jinba Media
Audience
Existing Self-media Followers
Subscribers
Duration
Feb. – Nov. 2016
My Role
Leader UX/UI Designer,
VI Designer
Overview
Financial Gossip Girl is a self-media that has more than 20 million followers based on Chinese social media platform WeChat and Weibo, interprets financial and fashion news in an unique viewpoint.
​
This Application is to merge the followers from two different social media platforms for a more efficient way of spreading the news and establishing business cooperation.
Background
Our company owns its business account named as Financial Gossip Girl under two different social media platforms, after two years of operation, the WeChat based account has reached 17 million subscribers, and the Weibo account has also reached over 10 million followers. Some of our fans follow us in both Wechat and Weibo.
​Due to the different polity of WeChat and Weibo platform, in WeChat platform, we can only post once a day, but there is no limitation on how many essays we can send during one time; while in Weibo platform, we can send multiple posts with a 500-letter-restriction in one day. However, when some big news happened in one day, these limitations have caused so much inconvenience. To better serve our subscribers and followers, our company has planned to develop a new App.
WeChat Platform
Only post once a day
Not limited in one article
Differentiate news priorities
Slightly weak in the timeliness of news (compare to Weibo)
Weibo Platform
Multiple posts during one day
Limited in 500 letters per post
Do not distinguish news priority
Instant post when big news happened
Research
Survey
To know about our target audience, we set up several survey questions at the end of the essays in our daily post. Through these questions, we researched our followers and subscribers.
-
There are 76% females, and 87% of them are on the Internet and financial field.
-
There are 93% of our followers and subscribers most likely to read our posts at 8-10 a.m. and 9-11 p.m., which are usually on their way to work and off work.
-
Only 42% of our followers and subscribers can catch up at least one post/essay per day, 19% of them can read our posts every two days, 17% of them read twice a week, 13% of them may read our posts every two weeks, there are 9% of them rarely check our posts.
-
The most common reason for why they cannot check our posts is that they have followed too many self-media accounts, and if they cannot check it at the time we post it, they may miss our posts from others.
Task Analysis
According to the Survey, we have analyzed several points that we have to figure out. ​
-
Office ladies are the majority user group, especially in the Internet and financial field, expanding their friend circle is needed.
-
Our user has their preferred time to read the news and essays, ​by using their preferred time will help our articles to be seen.
-
Break the inconvenience caused by the different policy of two platforms.
-
We can provide a way for those users who want to check out earlier articles which they haven't seen yet.
-
By categorizing the articles, our user can easily choose their preferred essays and posts.
-
As 4G technique develops, the video essay is a new way that we can bring to our users.
User Goals
To read some interesting and unique essays or videos as well as to know different people during their spare time.
​Persona
Based on the research so far, we were able to craft our persona, Jessica. Jessica is an office lady works for a giant Internet company based in Beijing. She takes the subway to commute every day. It usually takes her one hour from her home to her company. She likes to use this one hour reading some interesting articles, so she is able to find excellent topics to chat with her colleagues.
Jessica
-
Commuter, office lady, people person
-
Followed FGG on WeChat platform for a year
-
Also follows 22 other self-media accounts on WeChat
-
Like to read on the subway with her smartphone
-
​Beijing, single, 28 years old
What does she say about ​Financial Gossip Girl?
-
The original articles and unique point of view grabs my eye;
-
​It not only has the gossip news but also contains some in-depth financial reports;
-
Every article is only 5-8 min to read, does not affect me to transit on the subway;
-
It's lovely to participate in their off-line activities, I can know more people in different companies, which is great for both my life and career.
Uncertainties
-
There are other self-media accounts also can post gossip or financial article.
Design Process
Brainstorming
With Jessica as our focus, we split into teams to explore how our ideas could solve her daily needs. We understood that most of the traffic to Financial Gossip Girl account takes place each morning between 8-10 am and each evening between 9-11 pm. This makes sense as users will use their time on commuting to doing some reading. Because of this, we held that morning and evening gossip as the key to serving our users.
Through affinity diagram and extensive collaborative meetings, we began to flesh out a general theme for our
new design.
Architecture
I proposed this architecture as a solution. Based on user needs so far, we can create a flow where users can jump straight to the content they’re looking for and more easily discover other pieces.
Visual Identity
The concept of Financial gossip girl's identity is based on the profile picture of its social media platforms. The most viewed news are financial scandals and gossips. So we decided to use a pictorial mark of the girl from its original profile picture wearing sunglasses and bikini to add familiarity and attraction to our target audience and pick the feminine rose-red as its primary color.
Sunglasses shows that the news we reported are provided by our mysterious informant; the smile on the girl’s face indicates that we are welcome to have news from our followers; the bikini means that our new application is fashionable and impressive.
Key Words:
Sunglasses Smile Bikini
Sketches/Lo-Fi Wireframe
With Jessica as our focus, we split into teams to explore how our ideas could solve her daily needs. We understood that most of the traffic to Financial Gossip Girl account takes place each morning between 8-10 am and each evening between 9-11 pm. This makes sense as users will use their time on commuting to doing some reading. Because of this, we held that morning and evening gossip as the key to serving our users.
Color Phases
Next, based on the concept of morning and evening gossip, I built a flow highlighting the daily recommended articles. This flow will appear when our user opens the Financial Gossip Girl App. Besides the literal clue, I also set a variable gradient color background as well as the sun and moon icon, representing the morning to evening concept. Then I put the recommended articles into card form which contains the image, the full title and small part of the article. These cards would bring a background of color to the layout as well as something that is simply dynamic throughout the day.
The drawback to this layout is it takes up considerable real estate on the main screen and only can show one article at the same time, and our user needs to keep swipe to check more. If they have already seen the most recent articles, they may soon lose their interest to see more.
-
Clear content for what's new today
-
Engaging
-
Allow our users to preread articles, give them a choice whether to read detail
-
​Too complicated to see more
Hover
Beyond the color phrases, we developed its advantage, which is what's new today and make it a hover. Our users will still see it when they open our App, they can swipe right to check the latest released articles, and they also can go directly to view the recommended article list when they quit this hover.
We finally selected this solution in our V1.0.0 version. The hover format encourages tapping and swiping, capitalizing on native gestures enabling users to take action on/in their forecast.
User Interface V1.o.o
Prototype
Here is the prototype of the basic function, to try to occupy the market faster and get enough feedback from our real users, we promoted our new App through our existing WeChat and Weibo platform.
Design Iteration
In the beginning, I only designed the graphic icon. But when we put it into the home page, the overall article title will be too overwhelmed, because our original article title already has too many characters. So I decided to add the Morning Gossip and Evening Gossip into the icon design.
Icon
Instead of the hover notification, I decided to simply place the Morning and Evening Gossip Articles as highlight banner. Our users can still use their familiar gesture like swipe left to check next and tap to see detail. To separate the highlights to our other recommended articles, I drew some icon to add to the title.
Though our very first V1.0.0 version, we noticed that our user didn't swipe right to see Morning and Evening Gossip articles as much as we expected, most of them usually choose to close hover and go directly to the aritcles list. So we decided to plan a quick iteration mainly on the home page.
Article List
Our original design was showing each article in a vertical card format, which is image first, then article title and a preview of the first two lines of the article. This format caused that our user can only see two articles in one screen, which was not effective enough. In this iteration, I redesigned the recommended list format, I made the title left, place the image right. Besides, I added the article category and viewed number as the additional information to help our user more efficiently decide whether they will see article detail.
Original
-
Allow users to preview articles
-
Maximum two articles in one screen
-
User needs to scroll multiple times to view more
Home page scroll down
Iterated
-
Clean interface
-
Efficiency
-
Contain more information in one screen
Home page
Onboarding Pages
Moving Forward
We hope that we can gather more new users through the links our existing user shared, so we also designed the Html5 page to attract more users to download our App.
Previous Project
SafeReturn
Previous Project
Next Project
Massive Destruction
Next Project