Article Shortcut

Explore Related Articles

Create a Reading List

Read and Validate

Panony
Media App

Help crypto investors to invest in the
evolving industry by improving
their information-sourcing experience.

Lead Product Designer / 3 Months
Figma, Adobe Illustrator, Sketch
User Research, Interaction design, Visual Design

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 →

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 experience 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

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 →

Check crypto updates

Users’ number one goal is to check updates from the crypto they invested. At Crypto Dashboard, users can follow cryptos, see who has update, and quickly access the information.

To follow a crypto, users tap on the search button and search for the crypto they intend to follow. The followed cryptos will be added to the swipe bar.

To read the crypto information, users simply tap the crypto on the swipe bar and they can access the crypto’s information page. When a crypto has recent updates, it will be push to the front of the bottom swipe bar.

Why a swipe bar?

How did I decide the organization of the information card?

Decide should they invest in a new crypto

Users' other important goal is to read and decide if crypto is worth investing in. With Article Shortcut, users can easily collect and read the articles in bulk.

To gather related information, users swipe up the article shortcut and scroll through related articles.

To create a read list, users tap on the add button to add the article to the temporary read list section. Users can freely switch between related articles and the temporary read list. After finishing the temporary read list, users can choose to clear it or save it to Shelf for future use.

Why a swipe-up drawer?

Why extend the same sheet for saving to the Shelf?

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!

Mobile App

The Pebbles
an Emotion Tracker

Design System

Slash
a gig economy app