Crypto app services Wallethree
•Product Design •UX/UI Design •Web Development •Landing Page
Invest in crypto assets with ease on our platform. We simplify the investment process and provide expert insights to empower you to make informed decisions. Buy and sell Bitcoin, Ethereum, and more with just a few clicks. Join us today and invest in the future of finance.
Project Goal
The goal of this project is to create a cryptocurrency app called Wallethree that provides users with real-time data on the value of different cryptos. The app aims to accelerate crypto adoption through different services. The project also involves developing a design system to ensure consistency, rapid code implementation, and testing of prototypes to save time and money.
My Role
I served as both the Product Designer and Front-End Developer for this project.
As a Product Designer, I conducted user research to understand user needs, preferences, and behaviors. I then developed a design system using Figma and the Design Tokens Studio for Figma plugin.
The design system will ensure consistency in style and behavior across different digital touchpoints.
The design system will ensure consistency in style and behavior across different digital touchpoints.
As a Front-End Developer, I started developing the landing page of the app using Angular CLI, SCSS, and API calls to retrieve cryptocurrency data. I used the design system to create reusable components and to ensure consistency in the app's user interface.
Additionally, I transformed the design tokens stored in Gitlab to SCSS variables to ensure that changes to the styles are automatically propagated to the app. I also implemented a fluid typography system using sass functions to ensure that typography elements scale well across different screen sizes.
Additionally, I transformed the design tokens stored in Gitlab to SCSS variables to ensure that changes to the styles are automatically propagated to the app. I also implemented a fluid typography system using sass functions to ensure that typography elements scale well across different screen sizes.
Hypothesis
There is an opportunity to participate in the market of cryptocurrencies, apps, and wallets as they have not yet reached mainstream adoption. Therefore, the challenge is to make it accessible to everyone. By developing a cryptocurrency app that is easy to use and resembles a banking website or app, we can attract more users who have not yet adopted crypto products to Wallethree.
Approach
In order to make a crypto app easy to use for everyone, I plan to create an initial version that looks and functions like the current popular crypto apps in the market.
For those who are not familiar with crypto products, their understanding of financial tools comes from using banks' websites and apps. Therefore, I believe that creating a version of the app that resembles a banking website or app can attract more users who have not yet adopted crypto products to Wallethree.
To test if there is traction for the project, I started developing a design system to use in the landing page. By creating a design system, we can ensure consistency in style and behavior across different digital touchpoints and save time and money by streamlining the design to development process. The landing page will function as a prototype that we can use to test user reactions and determine if there is an attraction for the project.
Design UX/UI - Design System
•Figma •Studio tokens for Figma plugin
A design system ensures consistency in design elements, such as colors, typography, spacing, and UI components. It provides a unified visual language that can be easily applied across different screens and platforms, resulting in a cohesive user experience.
Color palette
Typography system
Component Properties
By defining component properties, I can create a consistent design language that can be applied across designs. When a designer updates a component property, any instance of that component that is used in designs will be automatically updated with new properties values, which is a huge time saver.
Figma also allows you to create "variants" of components, which are different versions of a component that share the same basic structure but have different properties.
Card components
Navigation-tabs components
Table
Design Tokens
I used the Tokens Studio for Figma Plugin to manage design tokens directly in Figma. These tokens represent key properties and values that define the visual styles of the design system. By organizing these tokens, I created a comprehensive design system that ensures consistency across our designs.
Design tokens act as a shared vocabulary between designers and developers, enabling effective communication and alignment.
They serve as a bridge between the design system and the UI engineering system, allowing seamless integration and collaboration.
Developing a complete token system has several benefits. It enhances the efficiency of feature and design iterations, simplifies app maintenance, and promotes implementation consistency. By using design tokens, we avoid using non-standard style values, which reduces errors and eliminates guesswork in UI styling.
Development
•HTML5 •CSS3(SCSS) •Angular •Git • REST API
Exporting design tokens to SCSS or CSS variables is an essential step in bridging the gap between design and development and helps to create a more efficient and consistent design system.
A design system aligns design with development outcomes increasing velocity.
By implementing a streamlined process for Design to Development, it is possible to cut the time required for product development by approximately 50%. By developing a cryptocurrency app that is easy to use and resembles a banking website or app, we can attract more users who have not yet adopted crypto products to Wallethree.
