#designsystem
#web
#Figma
#SaaS
#Healthcare
Bitme Design System
Bitme Design System
Bitme Design System
Bitme Design System
Bitme Design System
Design system for a hospital finance & accounting web application.
Design system for a hospital finance & accounting web application.
Design system for a hospital finance & accounting web application.
Design system for a hospital finance & accounting web application.
Design system for a hospital finance & accounting web application.
2023
Timeline
UIUX Designer
Role
Background
Background
Background
Bitme is a Point of Sales system designed to efficiently manage sales and transactions, including real-time data processing, from cash, credit card, to other digital payment methods. Bitme integrates with payment devices such as credit card machines and barcode scanners to improve efficiency and accuracy in sales. However, currently, Bitme can only generate data from another application, NOTES SIMRS. With the system design, a product with good consistency and efficiency can be created.
Bitme is a Point of Sales system designed to efficiently manage sales and transactions, including real-time data processing, from cash, credit card, to other digital payment methods. Bitme integrates with payment devices such as credit card machines and barcode scanners to improve efficiency and accuracy in sales. However, currently, Bitme can only generate data from another application, NOTES SIMRS. With the system design, a product with good consistency and efficiency can be created.
Bitme is a Point of Sales system designed to efficiently manage sales and transactions, including real-time data processing, from cash, credit card, to other digital payment methods. Bitme integrates with payment devices such as credit card machines and barcode scanners to improve efficiency and accuracy in sales. However, currently, Bitme can only generate data from another application, NOTES SIMRS. With the system design, a product with good consistency and efficiency can be created.
Responsibility
Responsibility
Responsibility
I am responsible for ensuring consistency in user interface design across the product, including icons, colors, fonts, and other elements. This can be achieved by creating a good system design. In addition, communicating and collaborating with engineering team members, product management, and other stakeholders to ensure the design aligns with the product vision. Other responsibilities include conducting user testing and collecting feedback to continuously improve and evolve the system design.
I am responsible for ensuring consistency in user interface design across the product, including icons, colors, fonts, and other elements. This can be achieved by creating a good system design. In addition, communicating and collaborating with engineering team members, product management, and other stakeholders to ensure the design aligns with the product vision. Other responsibilities include conducting user testing and collecting feedback to continuously improve and evolve the system design.
I am responsible for ensuring consistency in user interface design across the product, including icons, colors, fonts, and other elements. This can be achieved by creating a good system design. In addition, communicating and collaborating with engineering team members, product management, and other stakeholders to ensure the design aligns with the product vision. Other responsibilities include conducting user testing and collecting feedback to continuously improve and evolve the system design.
Goals
Goals
Goals
1
Consistent guiding principles
Provided by the company or service can be delivered to customers based on consistent principles.
1
Consistent guiding principles
Provided by the company or service can be delivered to customers based on consistent principles.
1
Consistent guiding principles
Provided by the company or service can be delivered to customers based on consistent principles.
1
Consistent guiding principles
Provided by the company or service can be delivered to customers based on consistent principles.
1
Consistent guiding principles
Provided by the company or service can be delivered to customers based on consistent principles.
2
Efficiency
Streamline the design process by providing reusable components and guidelines, saving time and effort in development.
2
Efficiency
Streamline the design process by providing reusable components and guidelines, saving time and effort in development.
2
Efficiency
Streamline the design process by providing reusable components and guidelines, saving time and effort in development.
2
Efficiency
Streamline the design process by providing reusable components and guidelines, saving time and effort in development.
2
Efficiency
Streamline the design process by providing reusable components and guidelines, saving time and effort in development.
3
Collaboration
Foster collaboration among designers, developers, and stakeholders by providing a shared language and framework for communication and decision-making.
3
Collaboration
Foster collaboration among designers, developers, and stakeholders by providing a shared language and framework for communication and decision-making.
3
Collaboration
Foster collaboration among designers, developers, and stakeholders by providing a shared language and framework for communication and decision-making.
3
Collaboration
Foster collaboration among designers, developers, and stakeholders by providing a shared language and framework for communication and decision-making.
3
Collaboration
Foster collaboration among designers, developers, and stakeholders by providing a shared language and framework for communication and decision-making.
Challenge
Challenge
Challenge
As a Solo Designer in this project, I embarked on a challenge to create a design system. This project offered an exciting opportunity for me. With the sole responsibility of conceptualizing, designing, and implementing a comprehensive system, there was an opportunity to demonstrate flexibility, creativity, and attention to detail. However, this journey also presented unique challenges, from establishing a consistent design language to ensuring scalability and consistency across multiple platforms and components. Amidst these challenges, a single designer must navigate the complexities of user experience, meet stakeholder expectations, and overcome technological constraints, all while striving to create a solid framework.
As a Solo Designer in this project, I embarked on a challenge to create a design system. This project offered an exciting opportunity for me. With the sole responsibility of conceptualizing, designing, and implementing a comprehensive system, there was an opportunity to demonstrate flexibility, creativity, and attention to detail. However, this journey also presented unique challenges, from establishing a consistent design language to ensuring scalability and consistency across multiple platforms and components. Amidst these challenges, a single designer must navigate the complexities of user experience, meet stakeholder expectations, and overcome technological constraints, all while striving to create a solid framework.
As a Solo Designer in this project, I embarked on a challenge to create a design system. This project offered an exciting opportunity for me. With the sole responsibility of conceptualizing, designing, and implementing a comprehensive system, there was an opportunity to demonstrate flexibility, creativity, and attention to detail. However, this journey also presented unique challenges, from establishing a consistent design language to ensuring scalability and consistency across multiple platforms and components. Amidst these challenges, a single designer must navigate the complexities of user experience, meet stakeholder expectations, and overcome technological constraints, all while striving to create a solid framework.
Design Process
Research Competitive Analysis
Design Process
Design Process
Design Process
Design Process
Research Competitive Analysis
Research Competitive Analysis
Research Competitive Analysis
Research Competitive Analysis
Analyze competitors' design systems to understand industry standards, emerging trends, and areas of differentiation. Identify strengths and weaknesses in their approaches and use them to inform your own design system strategy.
Analyze competitors' design systems to understand industry standards, emerging trends, and areas of differentiation. Identify strengths and weaknesses in their approaches and use them to inform your own design system strategy.
Why of thinking
Why of thinking
Why of thinking
When tidying up the design system, I use Atomic design as a mindset to build consistence UI component
When tidying up the design system, I use Atomic design as a mindset to build consistence UI component
When tidying up the design system, I use Atomic design as a mindset to build consistence UI component
Learning
Learning
Learning
I started this project with some research. I read medium articles, studied the POS and finance guidelines by Google, and got insight from my team. The next step was to inventory every UI element in our application. I open the design assets on other big company design system. Once I felt I had captured every component, then I grouped them. Viewing them side-by-side revealed exactly why we needed a system. There were dozens of color styles, inconsistency of typography, components and used on whole apps.
I started this project with some research. I read medium articles, studied the POS and finance guidelines by Google, and got insight from my team. The next step was to inventory every UI element in our application. I open the design assets on other big company design system. Once I felt I had captured every component, then I grouped them. Viewing them side-by-side revealed exactly why we needed a system. There were dozens of color styles, inconsistency of typography, components and used on whole apps.
Deliverable
Deliverable
Deliverable
Structure
Structure
Structure
When building the components I tried to implement the Atomic Design Approach by Brad Frost to build the smallest object first. Also, I have several components that are used on all products and the others are for a specific product.
When building the components I tried to implement the Atomic Design Approach by Brad Frost to build the smallest object first. Also, I have several components that are used on all products and the others are for a specific product.
When building the components I tried to implement the Atomic Design Approach by Brad Frost to build the smallest object first. Also, I have several components that are used on all products and the others are for a specific product.
Color Token
Color Token
Color Token
Typography Style
Typography Style
Typography Style
Shadow & Spacing
Shadow & Spacing
Shadow & Spacing
Shadow & Spacing
Component
Component
Component
Impact
Impact
Impact
1
Consistency
Evaluate the level of consistency achieved across different products or features using the design system.
1
Consistency
Evaluate the level of consistency achieved across different products or features using the design system.
1
Consistency
Evaluate the level of consistency achieved across different products or features using the design system.
1
Consistency
Evaluate the level of consistency achieved across different products or features using the design system.
1
Consistency
Evaluate the level of consistency achieved across different products or features using the design system.
1
Consistency
Evaluate the level of consistency achieved across different products or features using the design system.
2
Time Savings
The Bitme Design System is impacted by faster time-to-market for new products. There is no need to reinvent the wheel for reusable components, which allows more focus on business logic-the Design System Guide to ensure a consistent experience across products.
2
Time Savings
The Bitme Design System is impacted by faster time-to-market for new products. There is no need to reinvent the wheel for reusable components, which allows more focus on business logic-the Design System Guide to ensure a consistent experience across products.
2
Time Savings
The Bitme Design System is impacted by faster time-to-market for new products. There is no need to reinvent the wheel for reusable components, which allows more focus on business logic-the Design System Guide to ensure a consistent experience across products.
2
Time Savings
The Bitme Design System is impacted by faster time-to-market for new products. There is no need to reinvent the wheel for reusable components, which allows more focus on business logic-the Design System Guide to ensure a consistent experience across products.
2
Time Savings
The Bitme Design System is impacted by faster time-to-market for new products. There is no need to reinvent the wheel for reusable components, which allows more focus on business logic-the Design System Guide to ensure a consistent experience across products.
2
Time Savings
The Bitme Design System is impacted by faster time-to-market for new products. There is no need to reinvent the wheel for reusable components, which allows more focus on business logic-the Design System Guide to ensure a consistent experience across products.
3
Cost Savings
Determine the cost savings achieved by using the design system, including reduced design and development time, and potential savings in maintenance and updates.
3
Cost Savings
Determine the cost savings achieved by using the design system, including reduced design and development time, and potential savings in maintenance and updates.
3
Cost Savings
Determine the cost savings achieved by using the design system, including reduced design and development time, and potential savings in maintenance and updates.
3
Cost Savings
Determine the cost savings achieved by using the design system, including reduced design and development time, and potential savings in maintenance and updates.
3
Cost Savings
Determine the cost savings achieved by using the design system, including reduced design and development time, and potential savings in maintenance and updates.
3
Cost Savings
Determine the cost savings achieved by using the design system, including reduced design and development time, and potential savings in maintenance and updates.
3
Cost Savings
Determine the cost savings achieved by using the design system, including reduced design and development time, and potential savings in maintenance and updates.
Tools
Tools
Tools
Figma
Outcome
Outcome
Outcome
More efficient time consumption when designing, improve design and
consistency and make better collaboration between stakeholders. Also, I am asking several feedback from the engineers, the reusable components and documentations make them easier when developing the UI. For the design team, it’s much faster when I work on the project and communicate the the design with my colleague.
My learning from this project is we can start small and always try to improve to be better every time. Also, I learned so much that the foundation is very important when we try to build and scale up something.
More efficient time consumption when designing, improve design and
consistency and make better collaboration between stakeholders. Also, I am asking several feedback from the engineers, the reusable
components and documentations make them easier when developing the UI. For the design team, it’s much faster when I work on the project and communicate the the design with my colleague.
My learning from this project is we can start small and always try to improve to be better every time. Also, I learned so much that the foundation is very important when we try to build and scale up something.
More efficient time consumption when designing, improve design and consistency and make better collaboration between stakeholders. Also, I am asking several feedback from the engineers, the reusable components and documentations make them easier when developing the UI. For the design team, it’s much faster when I work on the project and communicate the the design with my colleague.
My learning from this project is we can start small and always try to improve to be better every time. Also, I learned so much that the foundation is very important when we try to build and scale up something.
More efficient time consumption when designing, improve design and consistency and make better collaboration between stakeholders. Also, I am asking several feedback from the engineers, the reusable components and documentations make them easier when developing the UI. For the design team, it’s much faster when I work on the project and communicate the the design with my colleague.
My learning from this project is we can start small and always try to improve to be better every time. Also, I learned so much that the foundation is very important when we try to build and scale up something.
More efficient time consumption when designing, improve design and consistency and make better collaboration between stakeholders. Also, I am asking several feedback from the engineers, the reusable components and documentations make them easier when developing the UI. For the design team, it’s much faster when I work on the project and communicate the the design with my colleague.
My learning from this project is we can start small and always try to improve to be better every time. Also, I learned so much that the foundation is very important when we try to build and scale up something.
