Article Shortcut

Explore Related Articles

Create a Reading List

Read and Validate

Crypto Media App

Panony
media app
for crypto

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

Role

Product Designer, 3 Months

Team

PM, Developer

Tool

Research, Figma

Delieverable

Optimized component-buying workflow
End-to-end design for a web-based tool

Key Features

What is Panony App

Assisting experienced crypto-investors
to make their investment decisions,
with the two features to keep them 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 information updates 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 →
Challenge

News Website to
Mobile App

More and more investors are investing in blockchain startups through their mobile phones. Hence how easy it is to source crypto-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 crypto investors' information sourcing experience.

Research

Info-sourcing
on Mobile

Hoping to understand the difference between sourcing information from desktop versus mobile, I directed the research towards both how users source information and how users decide based on the information on their mobile phone.

I synthesized two overarching pain points that serve as guidelines for future design.

Research

1:1 Interviews

I interviewed 4 investors who are experienced in crypto-investing.
Interview questions surround investors' overall journey, especially on mobile, before they made their investment decision.

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?

Research Synthesis

Common Shade Adjustment

Natural Light Management

Raise in the morning to light up the area

Lower when needed to avoid glare

Raise when the view is beautiful

Close at night for uninterrupted time

Heat Management

Lower when too hot

Resume when the day cools down

Persona

Journey, obstacles, and how mobile takes its part

Investors 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

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

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).

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?

I came up with two layout options for the Crypto Dashboard: swipe bar (crypto-centric) and chronological scroll (time-centric). Since when the users are checking crypto updates they usually have a specific crypto in mind, I decided to go for the swipe bar. As the crypto-centric approach fits their mental model more.

How did I decide the organization of the information card?

I went back to the users and concluded three types of deciding information: Official Announcement, Articles from Opinion Leaders, and Reports of Incidents. After double checking with my editor-in-chief of our constraints, I started laying out these information based on the importance for users. Some rule of thumbs are: time always comes first, author is always attached to the article, etc.

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?

There were two options: a swipe-up drawer and a pop-over. Since while looking for other articles, users are still in the mode of "comparing," it will be helpful if the current reading is not interrupted. Hence I decided to go for the drawer design, as users can scroll through the related articles while staying at their current read.

Why extend the same sheet for saving to the Shelf?

Bringing users to the Shelf page to save the articles can be confusing as it interrupts users reading flow. From the user testings, I saw users getting confused about where are at, what they were doing, and how to get back to the article they were reading. With this extending sheet, users can stay at the current flow while finishing the sub-goal to save the articles 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