Article Shortcut
Explore Related Articles
Create a Reading List
Read and Validate
DesignSynthesisResearchTakeawayPreview
Panony Mobile App
Help blockchain investors to invest in the billion-dollar industry by improving their information-sourcing experience.
Product Designer / 3 Months
Figma, Adobe Illustrator, Sketch
User Research, Interaction design, Visual Design
I was a Design Strategist at Panony, a Blockchain Media/Consultancy.

I worked as a product designer for this project. I collaborated closely with the product manager, editor-in-chief, and the investors. While developing the app, I created information architecture, design system, interaction design, and illustration.
The go-to media app tailored to crypto investing
The app strives to assist experienced crypto-investors collect enough information to make their investment decisions. With the two features, investors can be on top of every crypto information they wish to know!
Crypto Dashboard
In the Crypto Dashboard, investors can follow different crypto info pages and receive their information updates! The information on the info page is gathered from multiple sources.

So now, investors don't need to visit all over the place to look for information. They can turn on their notification and get a comprehensive look at the crypto!
Close-up →
Article Shortcut
Article Shortcut is a tab where investors can store related (or interested) articles together for later reading. The swipe-up gesture of the tab allows investors to go back and forth between the articles quickly without exiting the article.

Now, to compare multiple articles, investors don't need to interrupt their reading repeatedly. They can hoard articles together and then read!
Close-up →
How did I got to the design solution?
The challenge I was given
Adapt the news website into a mobile media app to help investors source information before investing
More and more investors are investing in blockchain startups through their mobile phones. Hence how easy it is to source blockchain-related information on their mobile phone becomes more crucial than ever.

To cater to this on-the-go investing, I helped Panony adapt its news website into a mobile media app that fits blockchain investors' information sourcing experience.
The research process
Unravel what is complicating investors’ information-sourcing information on mobile
Investors' information-sourcing experience through desktop news sites is utterly different from that of mobile news app. The variations exist in user's preferences and expectations due to the mobile app's on-the-go characteristic.

Hence I directed the research towards both how users source information and how users decide based on the information on their mobile phone.
Who are the investors →
Interview
Insights around investors’ pre-investing information-sourcing experience
Interview questions surround investors' overall journey, especially on mobile, before they made their investment decision. The questions try to unveil investors' behaviors using mobiles as tools and their intentions behind the gestures.

Overall, I 1:1 interviewed 4 investors who are experienced in crypto-investing.
Walk me through the last time you source crypto-related information.
What are the frustrations experience while sourcing information from your phone
How do you make your investment decisions?
Journey-based persona
Investors’ pre-investing journey, the obstacles, and how mobile takes its part
My users collectively experienced these 4 steps: know about the crypto, collect information about the crypto, validate the credibility of the crypto, and finally make their investment decisions accordingly.
Vincent Chen
28 years old, engineer, practical and believes in number, cares a lot about efficiency
Know
Collect
Validate
Decide
Know startups from private WeChat groups
Collect information from: News, Influencers, etc
Care abouot the source of information
Read from different perspectives to validate the information
Overarching Insights
Pain points the design of mobile app should address
I synthesized the bulk of insights into two overarching pain points that can serve as guidelines for future design. These two pain points are the problems that Crypto Dashboard and Article Shortcut strive to solve, respectively.

Further, the two pain points represent the first two and the latter two steps of the user journey (from the previous paragraph).
Insight 1 from "Know" and "Collect" steps
Information of Cryptos Scatters across Platforms
Vincent centers his search around cryptos. He usually thinks of the crypto and then the information about the crypto. However, crypto information is scattered across different apps, so Vincent has to switch from app to app, page to page, to gather them.
Insight 2 from "Validate" and "Collect" steps
Comparing Information on mobile is Troublesome
Vincent tends to read extensively to validate the credibility of a piece of information. However, the process is cumbersome, especially on mobile, since it requires him to select the articles he is interested in and then compares them.
Design Process
Design the functions around insights synthesized from the user research
I ideated several ideas from the 2 insights from the user research and narrowed them down to 2 solutions: Crypto Dashboard & Article Shortcut.

In the design process, I have the insights as guide to materialize the interface of the two functions. The process is as follows.
How is the ideating process →
Crypto Dashboard -
Insight 1 from User Research
For the Know and Collect steps, users are struggling from getting information from different places. At this stage, they center their search around cryptos, they are extremely skeptical of information, and they continuously check information updates.
Step 1 Information Architecture:
How to showcase the crypto and the content of the crypto on the dashboard
I came up with two options for the layout of the Crypto Dashboard, and did a QOC analysis to figure out which fits Vincent's mental model more

I decided to go for the one not stacking all content together (startup-centered) since it fits investor's mental model of first the startup and then the relating information.
Step 2 Content:
What information is needed and how should they be laid out
I went back to users and realize the three types of information that is deciding: Official Announcement, Articles from Opinion Leaders, and Reports of Incidents. And I double checked with my editor-in-chief of our constraints.

For the layout for each type of content, I designed them to combat users' skepticism toward information.
Step 3 User Testing:
Testing the mockup with users to improve the experience of the Crypto Dashboard
I ran 2 rounds of user testings. During the testing, I asked them to demonstrate tasks and I observe and do post interviews. Several design changes are made accordingly.
Task 1
Follow a startup that you think is "investable"

Change
From putting the search button at the end of the swipe bar (the left mockup) to fixing the search button at the right of the swipe bar (the right mockup).

Reason
Users tend to go back and forth to different pages while performing the task. Some users also mentioned potential problem of following too many cryptos hence need to scroll all the way to the end
Testing 1: Before
Testing 1: After
Task 2
Gather enough information for making investment decisions
‍‍
Change
Linked the title of the startup's profile page with their basic information
‍‍
Reason
Users are not only skeptical of the information of the crypto but also the crypto itself. They also want some basic information of the crypto.
Testing 2: After
Article Shortcut-
Insight 2 from User Research
For the Validate and Decide steps, users are trying to compare articles on their mobile phones. At this stage, they like to hoard articles and read all of them together. When reading, they switch between articles a lot. When realizing that they need more articles, they go back to the Collect step, which can complicate their reading flow.
Step 1 Layout:
The method of saving articles to the Article Shortcut.
I came up with two options and did a QOC analysis to decide which one to adopt. During the process, I strived to fit the layout with Vincent's experience while thinking of comparing the currently-reading article with another.
Step 2 Flow:
Streamline the user flow of Article Shortcut according to Vincent's experience in comparing articles
The user flow of the Article Shortcut includes two parts: Adding articles to the Reading List & Saving the Reading List to the Shelf. For each part of user flow, I made wireframe and mockup. Further I took the mockup to Vincent to test if there are frustrations within the interaction.
Takeaway
Clarify Users' Mental Models and Center the Design Around Them
Across the process, I spent a lot of time contemplating what the users are trying to do and what their instincts are. I felt this helpful for my further design since I can have a clearer mind of how to center the design around users!

For instance, while coming up with the mobile app's information architecture, I was able to realize users' critical need for information. Hence I decided to set the mobile app's first tab to be of users' urgent need: check the startup updates. This approach that's totally different from the news website helps users quickly get their needs nailed and can communicate to the users that this is the exact app they need!
Ambiguity is Spicy Food!
I love spicy food. First sight, the hot mess might get you a bit worried. However, as the spicy kicks in, your body starts to generate endorphins, which gets you addicted (scientifically proved🤓), you start sweating, and you can pass through it and feel just good!

At the beginning of this project, the company handed me this vague task with no known constraints. Since we are a startup, I have to build up the product concept, test it, and design it on my own. This freedom leads to vagueness, which I know can lead to unlimited opportunities. Like I always like to bring friends to have spicy food together, I collaborated with my teammates, and we ended up getting addicted together!