CoinFolks – All About Web3 in One Hand

luginasp
June 24, 2023
Will be launched soon on Playstore

Role

UI/UX Designer

Responsibility

Ideating features, setup the design system, create Hi-Fi

Platform

Mobile apps

Tools

Figma

Project Background

CoinFolks is a multi-platform media that provides various information related to the web3 industry. With their purpose of sharing knowledge about cryptocurrency, they have a plan to build an online learning platform for people to learn investment using cryptocurrency. Since the usage of mobile phones is high among cryptocurrency enthusiasts, they have decided to build a mobile cryptocurrency learning app.

Project Overview

We started from zero. As the UI/UX Designer, I tried to understand the business needs and their users first, which I could then use to benchmark other mobile learning platforms and decide on the features. After benchmarking, I created a simple sitemap of the apps and brought it to the table for the team to discuss. Then, I continued making flows, sketching some wireframes, setting up the components library and designing the Hi-Fi. The deliverables I created were documented and presented in Figma, which the team used for further discussion.

Understanding Needs

Not only did they want to share knowledge about cryptocurrency, but this platform also planned to make it one of their revenue sources. The demand for learning cryptocurrency was high, so the challenge was how this platform can convince users to subscribe to their classes. To ensure subscriber loyalty, my job was to make the platform easy to use and engaging.

Coinfolks planned to offer video-on-demand classes. Since there were already many mobile platforms that offer such classes, it was better for me to start by benchmarking, listing down the features, and understanding their UI patterns. Then, with Coinfloks’ requirements in mind, I continued to create a sitemap to guide me and the team in structuring the app.

Crafting Time

For this MVP, we agreed to build five main features (Login/Register, Home, Explore, Class, and Account), followed by additional sub-features. As for the language, we chose to use Bahasa Indonesia since the target users are Indonesian. I drew the possible flow and quickly sketched the wireframe to assist me in designing the Hi-Fi.

Before diving into Hi-Fi, I prepared the style guide that matches the Coinfolks’ branding. For this project, we agreed to use a dark mode design. Not only did we want to align with the web3 design vibes, but based on what we knew, dark mode is also safer for our eyes during longer screen time, especially when watching videos. Additionally, it can save battery life better than the light mode, so users can watch longer.

Once the style guide was completed, I proceeded to prepare some micro components while simultaneously creating the Hi-Fi and other necessary components. By following these steps, I was able to establish a basic design system that ensures consistency in my designs, even for future changes.

The Results

After the long process, I finally finished all the screens. Below is the explanation of each feature I designed for the MVP.

Login/Register

Before logging in/registering, users are shown the onboarding screens. The goal is to inform users about the app’s purpose and functionality. However, they can choose to skip these screens and proceed to login/register or explore the app without creating an account. By allowing users to explore the app without logging in, I hope they can quickly experience a significant portion of the features and be encouraged to subscribe.

Homepage

This page provides users with a summary of all the features they can explore. The content displayed on the screen will vary depending on the user’s account status. Users with a subscription can access all the features, while users without a subscription or without an account cannot access certain features and are encouraged to register or subscribe using the banner at the top.

Explore

In addition to classes or modules, users can also search for news, reports, and upcoming events on the Explore page. This feature makes the app a rich source of web3 information for users.

Class

This feature provides users with a variety of pre-recorded modules and webinars. Users with a subscription can access all of the videos anytime and anywhere, while users without a subscription or without an account cannot access certain features and are encouraged to register or subscribe.

Account

Users can modify their information from the Account page. Additionally, they can create subscriptions and track their transactions.

Make it Happen!

After completing all the designs, it was time to deliver the project to the team. However, some adjustments were required due to engineering capabilities and minor additional requests. Therefore, I made quick adjustments and provided the updated designs. Currently, the developers are still working on it, and the apps will soon be published on Google Play and the App Store.

What To Do Next?

I wasn’t able to conduct any testing beforehand due to the tight schedule and limited resources. However, I hope there will be an opportunity to track the usage results of the app, which can be utilized for future improvements.