Revamp the Koinworks Website
Revamp the Koinworks Website
Revamp the Koinworks Website
About The Company
About The Company
KoinWorks is the first super financial app in indonesia to be registered and supervised by the financial services authority (OJK). KoinWorks offers a variety of financial services to help you achieve your financial goal
KoinWorks is the first super financial app in indonesia to be registered and supervised by the financial services authority (OJK). KoinWorks offers a variety of financial services to help you achieve your financial goal
My Role
UX Designer
UX Designer
Year
2021-2022
2021-2022
Tools Usage
Figma
Figma
01
01
Creative Team
Creative Team
We are a creative team consisting of a Creative Lead, UX Designer and UI Designer responsible for creating great user experiences. We work together to understand user and business needs, then design and build interfaces that are intuitive, engaging, and easy to use.
We are a creative team consisting of a Creative Lead, UX Designer and UI Designer responsible for creating great user experiences. We work together to understand user and business needs, then design and build interfaces that are intuitive, engaging, and easy to use.
Monica Chatlin
Creative lead
Monica Chatlin
Creative lead
Monica Chatlin
Creative lead
Agni Fauzan
UX Designer
Agni Fauzan
UX Designer
Agni Fauzan
UX Designer
Dhamapala Febrianto
UX Designer
Dhamapala Febrianto
UX Designer
Dhamapala Febrianto
UX Designer
Defri Arifin
UI Designer
Defri Arifin
UI Designer
Defri Arifin
UI Designer
02
02
Objective Project
Objective Project
Revamping the koinworks website to improve the user experience and user interface to help make it easier for koinworks customers to find important information and carry out transactions on the website.
Revamping the koinworks website to improve the user experience and user interface to help make it easier for koinworks customers to find important information and carry out transactions on the website.
03
03
Problem
Problem
Unclear Navigation: Unclear or inconsistent navigation systems can confuse users and hinder their ability to explore the platform smoothly. Consistent menus, easy-to-understand links, and effective search features can help improve navigation.
Lack of Focus on the Main Goal: Over-the-top design or too many distractions can distract users from the main goal of the P2P platform, such as making transactions or obtaining information about services. Focusing on the elements that are important and eliminating unnecessary ones can help improve the effectiveness of the design.
Lack of Attractive Visuals: A boring or less visually appealing design can reduce user interest and reduce the platform's credibility. The use of attractive visual elements, such as relevant images or graphics, can increase the visual appeal of a site.
Unclear Navigation: Unclear or inconsistent navigation systems can confuse users and hinder their ability to explore the platform smoothly. Consistent menus, easy-to-understand links, and effective search features can help improve navigation.
Lack of Focus on the Main Goal: Over-the-top design or too many distractions can distract users from the main goal of the P2P platform, such as making transactions or obtaining information about services. Focusing on the elements that are important and eliminating unnecessary ones can help improve the effectiveness of the design.
Lack of Attractive Visuals: A boring or less visually appealing design can reduce user interest and reduce the platform's credibility. The use of attractive visual elements, such as relevant images or graphics, can increase the visual appeal of a site.
04
04
Design Process
Design Process
A design-thinking approach to bring creative solutions to the table. Here's how the discover, define, develop, deliver framework can be adapted for this specific context:
Discover
Discover
This initial stage focuses on understanding the situation. You'll gather information through research, identify the core problem and explore different perspectives.
This initial stage focuses on understanding the situation. You'll gather information through research, identify the core problem and explore different perspectives.
During the initial phase of the project, our team conducted extensive research to understand the target audience, user needs, and project requirements. We gathered insights to inform our design decisions.
During the initial phase of the project, our team conducted extensive research to understand the target audience, user needs, and project requirements. We gathered insights to inform our design decisions.
Main Objective for Discovery Phase
Main Objective for Discovery Phase
By deeply understanding our company goals, we align every strategy to drive success and achieve our vision.
We prioritize understanding user needs to deliver solutions that truly resonate and create lasting value
With a dedicated focus on our service sector, we deliver specialized solutions that cater to the unique demands of our clients
Our unique selling point lies in our innovative approach and commitment to excellence, setting us apart from the competition
By deeply understanding our company goals, we align every strategy to drive success and achieve our vision.
We prioritize understanding user needs to deliver solutions that truly resonate and create lasting value
With a dedicated focus on our service sector, we deliver specialized solutions that cater to the unique demands of our clients
Our unique selling point lies in our innovative approach and commitment to excellence, setting us apart from the competition
Define
Define
It's time to define the problem or opportunity more clearly. Here, you'll synthesize the information gathered, analyze the data, and clearly define the specific challenge
It's time to define the problem or opportunity more clearly. Here, you'll synthesize the information gathered, analyze the data, and clearly define the specific challenge
User Persona
User Persona
During the initial phase of the project, our team conducted extensive research to understand the target audience, user needs, and project requirements. We conducted analyzed competitors, and gathered insights to inform our design decisions.
During the initial phase of the project, our team conducted extensive research to understand the target audience, user needs, and project requirements. We conducted analyzed competitors, and gathered insights to inform our design decisions.
Name
Anya
Age
28 Years
Occupation
Wiraswasta
Background
Anya is ayoung woman who has work experience and has clear financial goals. he looks for invesment that are ptofitable, safe and easy to manage. however, he is still unfamiliar with investing and has limited founds
Goals
Profitable invesment
Safe invesment
Easy to manage invesment
Frustation
Still unfamiliar with investing
have limited founds
don’t have much time tommanage invesment
How Might We
How Might We
To develop existing problems, it is necessary to ask questions so that the resolution of existing problems is more focused and clear. Here are 3 questions that must be answered in process design.
How can we ensure that every team member fully understands and aligns with our company goals to improve the company's business?
How can we better understand and meet user needs to provide better solutions for users?
How might we leverage our expertise in our focused service sector to create exceptional value for our clients?
How might we effectively communicate our unique selling point to differentiate ourselves in the market and attract more customers?
To develop existing problems, it is necessary to ask questions so that the resolution of existing problems is more focused and clear. Here are 3 questions that must be answered in process design.
How can we ensure that every team member fully understands and aligns with our company goals to improve the company's business?
How can we better understand and meet user needs to provide better solutions for users?
How might we leverage our expertise in our focused service sector to create exceptional value for our clients?
How might we effectively communicate our unique selling point to differentiate ourselves in the market and attract more customers?
Develope
Develope
At this stage creativity takes center stage. With a well-defined problem, you'll brainstorm and develop potential solutions.
At this stage creativity takes center stage. With a well-defined problem, you'll brainstorm and develop potential solutions.
Create Structure Page & Template Wireframe
Create Structure Page & Template Wireframe
Creating a structured page and template wireframe is an essential step in the web development process. This involves designing a detailed layout that outlines the placement of key elements such as headers, footers, navigation menus, content areas, and sidebars. The goal is to create a clear visual guide that ensures consistency and usability across the website.
Creating a structured page and template wireframe is an essential step in the web development process. This involves designing a detailed layout that outlines the placement of key elements such as headers, footers, navigation menus, content areas, and sidebars. The goal is to create a clear visual guide that ensures consistency and usability across the website.
Analyze the previous koinworks website
Breakdown all Coinworks website pages to find out what is missing from the current website
Define Page Structure for Koinworks
Outline the main pages needed on the website (Home, Services, About Us, Contact).
Create low-fidelity wireframes for the identified key pages.
Navigation Design: Design the website navigation, ensuring it is intuitive and aligns with Koinworks' brand.
Include clear calls-to-action (CTAs) to guide users through the site.
Analyze the previous koinworks website
Breakdown all Coinworks website pages to find out what is missing from the current website
Define Page Structure for Koinworks
Outline the main pages needed on the website (Home, Services, About Us, Contact).
Create low-fidelity wireframes for the identified key pages.
Navigation Design: Design the website navigation, ensuring it is intuitive and aligns with Koinworks' brand.
Include clear calls-to-action (CTAs) to guide users through the site.
WHAT
Pinjaman
Produk Pinjaman
sKor Kredit
Identitas user (Syarat & Ketentuan)
HOW
Pinjaman in app
Learn Pinjmana (Konsultan Kinworks)
WHY
Testimonials
Download App
WHAT
Pinjaman
Produk Pinjaman
sKor Kredit
Identitas user (Syarat & Ketentuan)
HOW
Pinjaman in app
Learn Pinjmana (Konsultan Kinworks)
WHY
Testimonials
Download App
STRUCTURE PAGE PINJAMAN
Banner + Penjelasan sedikit tentang Pinjaman + Kalkulator
Penjelasan pinjaman / Tagline
Menampilkan seluruh produk pinjaman
Koin Bisnis
Koin Invoice
Koin Gaji
Koin Pintar
SKOR
Cek skor kredit
Syarat & Ketentuan
Step by step melakukan pinjaman di apps
Testimonials user
Banner download app
Footer
Floating icon
STRUCTURE PAGE PINJAMAN
Banner + Penjelasan sedikit tentang Pinjaman + Kalkulator
Penjelasan pinjaman / Tagline
Menampilkan seluruh produk pinjaman
Koin Bisnis
Koin Invoice
Koin Gaji
Koin Pintar
SKOR
Cek skor kredit
Syarat & Ketentuan
Step by step melakukan pinjaman di apps
Testimonials user
Banner download app
Footer
Floating icon
Sitemap
Based on the research findings and the concept template wireframe, we have created a sitemap to visualize the structure of the website or application. This will help organize the information architecture and ensure a seamless user experience.
Analyze the current Sangfor website and list templates to use as a benchmark when creating a sitemap
Determining the level on the sitemap and creating a sitemap on the whimsicall application
Discussion with the internal team to discuss the final sitemap
Show final sitemap to client
Revision of feedback from client & sitemap successfully created
Sitemap
Based on the research findings and the concept template wireframe, we have created a sitemap to visualize the structure of the website or application. This will help organize the information architecture and ensure a seamless user experience.
Analyze the current Sangfor website and list templates to use as a benchmark when creating a sitemap
Determining the level on the sitemap and creating a sitemap on the whimsicall application
Discussion with the internal team to discuss the final sitemap
Show final sitemap to client
Revision of feedback from client & sitemap successfully created
Create Wireframe homepage, Personal, Business, About Us etc:
Create Wireframe homepage, Personal, Business, About Us etc:
Then, we create a wireframe based on the sitemap, we have to create a page that can be reused for other pages because we created a wireframe concept template
Then, we create a wireframe based on the sitemap, we have to create a page that can be reused for other pages because we created a wireframe concept template
Develop a specific wireframe for the homepage, highlighting key features, promotions, and navigation elements.
Create wireframes for individual and business service pages, detailing information about each financial service offered by Koinworks.
Ensure a visually appealing and engaging layout and prioritize clarity and ease of understanding for users.
Share wireframes with team creative for feedback and Iterate on the wireframes based on stakeholder input, ensuring alignment with Koinworks' brand and goals.
Develop a specific wireframe for the homepage, highlighting key features, promotions, and navigation elements.
Create wireframes for individual and business service pages, detailing information about each financial service offered by Koinworks.
Ensure a visually appealing and engaging layout and prioritize clarity and ease of understanding for users.
Share wireframes with team creative for feedback and Iterate on the wireframes based on stakeholder input, ensuring alignment with Koinworks' brand and goals.
⚠️
Examples of some wireframe templates when creating a Sangfor website, I can't show all the wireframes because they belong to the company
Examples of some wireframe templates when creating a Sangfor website, I can't show all the wireframes because they belong to the company
Deliver
The final stage focuses on implementing the selected solution. This involves refining selected concepts, testing and iterating based on feedback.
The final stage focuses on implementing the selected solution. This involves refining selected concepts, testing and iterating based on feedback.
High Fidelity
High Fidelity
Creating a high-fidelity user interface for a website like Sangfor involves several detailed steps, from conceptualization to implementation. Here's a breakdown of the process with a focus on mood boards, colors, typography, and asset creation:
Creating a high-fidelity user interface for a website like Sangfor involves several detailed steps, from conceptualization to implementation. Here's a breakdown of the process with a focus on mood boards, colors, typography, and asset creation:
⚠️
Examples of some wireframe templates when creating a Sangfor website, I can't show all the wireframes because they belong to the company
Examples of some wireframe templates when creating a Sangfor website, I can't show all the wireframes because they belong to the company
04
04
Final Solution
Final Solution
We improve user experience and business performance, enhancing website navigation with illuminated menus, clear links, and effective search features that suit user needs.
In addition, improving the website structure with optimal layout and easily accessible information will increase SEO, traffic and business opportunities.
Lastly, creating an engaging user interface (UI) in line with brand guidelines using relevant visual elements and insights will increase positive impressions and user loyalty.
