Improved Flow and Display Efficiency for NDE Coofis
Improved Flow and Display Efficiency for NDE Coofis
Improved Flow and Display Efficiency for NDE Coofis
PT ARM
PT ARM
PT ARM
Internship
Internship
Internship
Role : Interaction Designer
Role : Interaction Designer
Role : Interaction Designer
2024
2024
Meet The Team
Meet The Team
This project was carried out by eight members during their internship at PT ARM We worked on a redesign project for a Coofis product, an electronic service note application.
This project was carried out by eight members during their internship at PT ARM We worked on a redesign project for a Coofis product, an electronic service note application.
This project was carried out by eight members during their internship at PT ARM We worked on a redesign project for a Coofis product, an electronic service note application.
Javier Ramadhan
Javier Ramadhan
Javier Ramadhan
UI Designer
UI Designer
UI Designer
Hendy Oktavian
Hendy Oktavian
Hendy Oktavian
UX Designer
UX Designer
UX Designer
Najla Nor Fauziah
Najla Nor Fauziah
Najla Nor Fauziah
Illustrator
Illustrator
Illustrator
Ramdan Mahfudz
Ramdan Mahfudz
Ramdan Mahfudz
UI Designer
UI Designer
UI Designer
Tyarra Aulia
Tyarra Aulia
Tyarra Aulia
Graphic Designer
Graphic Designer
Graphic Designer
Yusran Habibi
Yusran Habibi
Yusran Habibi
UI Designer
UI Designer
UI Designer
Agung Tauhid
Agung Tauhid
Agung Tauhid
UI Designer
UI Designer
UI Designer
Rustu Nur Ilham
Rustu Nur Ilham
Rustu Nur Ilham
UX Designer
UX Designer
UX Designer
1.Intorduction
1.Intorduction
Image
Image
Coofis Nota Dinas Elektronik
Coofis Nota Dinas Elektronik
Background
Improve and refine the design of the previous Coofis NDE web to be more consistent and improve aesthetics and semiotics with the design theory of the Coofis NDE web.
Improve and refine the design of the previous Coofis NDE web to be more consistent and improve aesthetics and semiotics with the design theory of the Coofis NDE web.
Trying Old Coofis App
Trying Old Coofis App
Image
Image
Trying The Coofis App For The First Time
Trying The Coofis App For The First Time
Identificating The Problem
Identificating The Problem
Use of icons that are still not Consistent
Use of icons that are still not Consistent
Lengthy login and 2FA process
Lengthy login and 2FA process
There is no Help and Report feature
There is no Help and Report feature
No use of text and colour library
No use of text and colour library
Some inconsistent appearance and confusing feature flow
Some inconsistent appearance and confusing feature flow
Image
Image
Identify What Can We Fix On This Product
Identify What Can We Fix On This Product
Divide Jobdesk
Divide Jobdesk
Image
Image
Distribute The Jobdesk Based On Expertise
Distribute The Jobdesk Based On Expertise
Identifying Coofis App For First Time
Identifying Coofis App For First Time
We first tried the coofis app for the first time to experience and learn more about the functionality of the app and then we identified what could be improved in the app.
We first tried the coofis app for the first time to experience and learn more about the functionality of the app and then we identified what could be improved in the app.
1.Intorduction
Image
Coofis Nota Dinas Elektronik
Background
Improve and refine the design of the previous Coofis NDE web to be more consistent and improve aesthetics and semiotics with the design theory of the Coofis NDE web.
Trying Old Coofis App
Image
Trying The Coofis App For The First Time
Identificating The Problem
Use of icons that are still not Consistent
Lengthy login and 2FA process
There is no Help and Report feature
No use of text and colour library
Some inconsistent appearance and confusing feature flow
Image
Identify What Can We Fix On This Product
Divide Jobdesk
Image
Distribute The Jobdesk Based On Expertise
Identifying Coofis App For First Time
We first tried the coofis app for the first time to experience and learn more about the functionality of the app and then we identified what could be improved in the app.
2.Pre Design Preparation
2.Pre Design Preparation
Coorporate
Retail User
Objective
transforming the product target from corporate users to retail users so that the market can be reached more widely
Coorporate
Retail User
Objective
transforming the product target from corporate users to retail users so that the market can be reached more widely
Image
Image
Brainstorming And Researching
Brainstorming And Researching
Finding what can be improved
Our mentor also said that the redesign we did was also a form of target market change in the product from corporate users to retail users and then we tried to sort out the solutions that could be provided to make this coofis product better than before and determine what could be improved.
Our mentor also said that the redesign we did was also a form of target market change in the product from corporate users to retail users and then we tried to sort out the solutions that could be provided to make this coofis product better than before and determine what could be improved.
Determine Guide Style
Determine Guide Style
Image
Image
Guide Color For Coofis
Guide Color For Coofis
Wireframing
Wireframing
Image
Image
Creating Wireframe For Coofis App
Creating Wireframe For Coofis App
Iconography
Iconography
Image
Image
Make Custom Iconography
Make Custom Iconography
Wireframe And Guideline
Wireframe And Guideline
In addition to updating some of the constraints that existed in the previous design, we also created a new design system that fits the Coofis identity for this Coofis NDE redesign work. We want users to enjoy the flow of the application with an attractive appearance while still feeling the functionality offered by the Coofis NDE application.
In addition to updating some of the constraints that existed in the previous design, we also created a new design system that fits the Coofis identity for this Coofis NDE redesign work. We want users to enjoy the flow of the application with an attractive appearance while still feeling the functionality offered by the Coofis NDE application.
Image
Image
A Set Of Illustration
A Set Of Illustration
Finishing The Pre Design Part
Finishing The Pre Design Part
After we finish determining the colour guideline, typography, margins, illustrations and wireframes then we can proceed to the stage of designing the high fidelity part. and so on we will use the Design System that we have made into the design so that the resulting visuals will look consistent.
After we finish determining the colour guideline, typography, margins, illustrations and wireframes then we can proceed to the stage of designing the high fidelity part. and so on we will use the Design System that we have made into the design so that the resulting visuals will look consistent.
2.Pre Design Preparation
Coorporate
Retail User
Objective
transforming the product target from corporate users to retail users so that the market can be reached more widely
Image
Brainstorming And Researching
Finding what can be improved
Our mentor also said that the redesign we did was also a form of target market change in the product from corporate users to retail users and then we tried to sort out the solutions that could be provided to make this coofis product better than before and determine what could be improved.
Determine Guide Style
Image
Guide Color For Coofis
Wireframing
Image
Creating Wireframe For Coofis App
Iconography
Image
Make Custom Iconography
Wireframe And Guideline
In addition to updating some of the constraints that existed in the previous design, we also created a new design system that fits the Coofis identity for this Coofis NDE redesign work. We want users to enjoy the flow of the application with an attractive appearance while still feeling the functionality offered by the Coofis NDE application.
Image
A Set Of Illustration
Finishing The Pre Design Part
After we finish determining the colour guideline, typography, margins, illustrations and wireframes then we can proceed to the stage of designing the high fidelity part. and so on we will use the Design System that we have made into the design so that the resulting visuals will look consistent.
3.Designing The High Fidelity
3.Designing The High Fidelity
Image
Image
Many Page Of Coofis Design
Many Page Of Coofis Design
Designing High Fidelity
then finally we did a high fidelity design of dozens of pages and started designing each flow with different division of tasks. after some time through a long process we finally finished it.
then finally we did a high fidelity design of dozens of pages and started designing each flow with different division of tasks. after some time through a long process we finally finished it.
High Fidelity
High Fidelity
Image
Mockup Coofis Product
Mockup Coofis Product
Prototype
Prototype
Image
Adding Prototype For Interactive Interaction
Adding Prototype For Interactive Interaction
Landing Page
Landing Page
Image
Making Landing Page For Promotion
Making Landing Page For Promotion
3.Designing The High Fidelity
Image
Many Page Of Coofis Design
Designing High Fidelity
then finally we did a high fidelity design of dozens of pages and started designing each flow with different division of tasks. after some time through a long process we finally finished it.
High Fidelity
Image
Mockup Coofis Product
Prototype
Image
Adding Prototype For Interactive Interaction
Landing Page
Image
Making Landing Page For Promotion
4.Coofis New Look
4.Coofis New Look
Image
Image
New Look Of Coofis Web App
New Look Of Coofis Web App
The Feature
in coofis of course there are main features in this application. there are creating letters, delegations, forwards, dispositions and many more features this feature has been updated in flow and design to be more modern again and we also develop some of these features more efficiently in flow and navigation.
in coofis of course there are main features in this application. there are creating letters, delegations, forwards, dispositions and many more features this feature has been updated in flow and design to be more modern again and we also develop some of these features more efficiently in flow and navigation.
Dashboard
Dashboard
Image
Image
New Look For Dashboard More Intuitive
New Look For Dashboard More Intuitive
Making Mail
Making Mail
Image
Image
Making Mail Flow Showing Step Flow
Making Mail Flow Showing Step Flow
Address Book
Address Book
Image
Image
Address Book New UI Display User On Click
Address Book New UI Display User On Click
File Manager
File Manager
Image
Image
Folder Feature UI New Look
Folder Feature UI New Look
Delegation
Delegation
Image
Image
Delegation Feature UI
Delegation Feature UI
Admin Tools
Admin Tools
Image
Image
Admin Tools For Retail Administrator
Admin Tools For Retail Administrator
4.Coofis New Look
Image
New Look Of Coofis Web App
The Feature
in coofis of course there are main features in this application. there are creating letters, delegations, forwards, dispositions and many more features this feature has been updated in flow and design to be more modern again and we also develop some of these features more efficiently in flow and navigation.
Dashboard
Image
New Look For Dashboard More Intuitive
Making Mail
Image
Making Mail Flow Showing Step Flow
Address Book
Image
Address Book New UI Display User On Click
File Manager
Image
Folder Feature UI New Look
Delegation
Image
Delegation Feature UI
Admin Tools
Image
Admin Tools For Retail Administrator
5.Responsive Design
5.Responsive Design
Image
Image
Design Breakpoint For Coofis
Design Breakpoint For Coofis
Design Breakpoint
Of course we also designed the UI of 3 device sizes, desktop, tablet and mobile so that this product can be used on various devices. we also designed the tablet size due to the habit of superiors often using tablets as their work devices.
Of course we also designed the UI of 3 device sizes, desktop, tablet and mobile so that this product can be used on various devices. we also designed the tablet size due to the habit of superiors often using tablets as their work devices.
Dekstop
Dekstop
Image
Image
Trying The Coofis App For The First Time
Trying The Coofis App For The First Time
Table Portrait
Table Portrait
Image
Image
Identify What Can We Fix On This Product
Identify What Can We Fix On This Product
Mobile Size
Mobile Size
Image
Image
Distribute The Jobdesk Based On Expertise
Distribute The Jobdesk Based On Expertise
Conclusion
During the internship period we have done many things ranging from design, research to collaboration, but the problem during the internship period this time is unfinished development so this project will still be continued by the next intern.
During the internship period we have done many things ranging from design, research to collaboration, but the problem during the internship period this time is unfinished development so this project will still be continued by the next intern.
5.Responsive Design
Image
Design Breakpoint For Coofis
Design Breakpoint
Of course we also designed the UI of 3 device sizes, desktop, tablet and mobile so that this product can be used on various devices. we also designed the tablet size due to the habit of superiors often using tablets as their work devices.
Dekstop
Image
Trying The Coofis App For The First Time
Table Portrait
Image
Identify What Can We Fix On This Product
Mobile Size
Image
Distribute The Jobdesk Based On Expertise
Conclusion
During the internship period we have done many things ranging from design, research to collaboration, but the problem during the internship period this time is unfinished development so this project will still be continued by the next intern.
This project is still ongoing and will be continued by the next intern.
This project is still ongoing and will be continued by the next intern.
This project is still ongoing and will be continued by the next intern.
Reflection On This Project
Reflection On This Project
Reflection On This Project
Design System Implementation
Design System Implementation
Design System Implementation
We are still lacking in applying the design system during this internship because the projects we work on are large-scale and the design system is very important.
We are still lacking in applying the design system during this internship because the projects we work on are large-scale and the design system is very important.
We are still lacking in applying the design system during this internship because the projects we work on are large-scale and the design system is very important.
Job Dividing
Job Dividing
Job Dividing
There are still shortcomings in the division of tasks, for example, my position as an interaction designer often works on UI design and sometimes works on the UX design part.
There are still shortcomings in the division of tasks, for example, my position as an interaction designer often works on UI design and sometimes works on the UX design part.
There are still shortcomings in the division of tasks, for example, my position as an interaction designer often works on UI design and sometimes works on the UX design part.
Time Management
Time Management
Time Management
We hope to improve time management so that the design process can run faster by dividing the work tasks evenly.
We hope to improve time management so that the design process can run faster by dividing the work tasks evenly.
We hope to improve time management so that the design process can run faster by dividing the work tasks evenly.
Check Other Study Case
Check Other Study Case
Competition
2023
Study Case
Personal Work
Solution For Expensive Art & Design Course
Competition
2023
Study Case
Personal Work
Solution For Expensive Art & Design Course
Competition
2023
Study Case
Personal Work
Solution For Expensive Art & Design Course
Let’s Collaborate Together You Can Contact Me Below This
Let’s Collaborate Together You Can Contact Me Below This
Let’s Collaborate Together You Can Contact Me Below This
@Javier Ramadhan 2024
@Javier Ramadhan 2024
Bandung , Indonesia
Bandung , Indonesia