Work Project
Work Project
Work Project
Redesign Smart Desa Dangin Puri Kangin
Redesign Smart Desa Dangin Puri Kangin
Designed a ready-to-code mobile essential public service features.
Designed a ready-to-code mobile essential public service features.
Designed a ready-to-code mobile essential public service features.
My Role
My Role
UI/UX Designer
UI/UX Designer
UI/UX Designer
For
For
Foxbyte
Foxbyte
Foxbyte
Timeline
Timeline
May - July 2022
May - July 2022
May - July 2022
Tools
Tools
Figma
Figma
Figma
Team
Team
1 UI/UX Designer, 1 Project Manager, and 1 Developer
1 UI/UX Designer, 1 Project Manager, and 1 Developer
1 UI/UX Designer, 1 Project Manager, and 1 Developer
Client
Client
The goal is to implement Foxbyte's essential public service features with a fresh design and resolve usability issues.
Foxbyte as software agency based in Denpasar, Bali is actively involved in governmental digitalization efforts as respond to significant emphasize on public service digitalization placed by Indonesia’s government. They provide essential digital public service solutions (called Smart Desa or M-Desa) for urban village across Kota Denpasar.
Dangin Puri Kangin, one of urban villages in Denpasar (with 8000+ residents) approached Foxbyte to help them redesign and develop their new digital public services mobile app, later called SIPADU (Sistem Informasi Terpadu) Dangin Puri Kangin.
I was hired by Foxbyte as UI/UX Designer Freelance to make a ready to code mobile design of their essential public service features according to Dangin Puri Kangin’s need.
The goal is to implement Foxbyte's essential public service features with a fresh design and resolve usability issues.
Foxbyte as software agency based in Denpasar, Bali is actively involved in governmental digitalization efforts as respond to significant emphasize on public service digitalization placed by Indonesia’s government. They provide essential digital public service solutions (called Smart Desa or M-Desa) for urban village across Kota Denpasar.
Dangin Puri Kangin, one of urban villages in Denpasar (with 8000+ residents) approached Foxbyte to help them redesign and develop their new digital public services mobile app, later called SIPADU (Sistem Informasi Terpadu) Dangin Puri Kangin.
I was hired by Foxbyte as UI/UX Designer Freelance to make a ready to code mobile design of their essential public service features according to Dangin Puri Kangin’s need.
The goal is to implement Foxbyte's essential public service features with a fresh design and resolve usability issues.
Foxbyte as software agency based in Denpasar, Bali is actively involved in governmental digitalization efforts as respond to significant emphasize on public service digitalization placed by Indonesia’s government. They provide essential digital public service solutions (called Smart Desa or M-Desa) for urban village across Kota Denpasar.
Dangin Puri Kangin, one of urban villages in Denpasar (with 8000+ residents) approached Foxbyte to help them redesign and develop their new digital public services mobile app, later called SIPADU (Sistem Informasi Terpadu) Dangin Puri Kangin.
I was hired by Foxbyte as UI/UX Designer Freelance to make a ready to code mobile design of their essential public service features according to Dangin Puri Kangin’s need.
Alignment
Alignment
Scope
Scope
As we discussed, there will be two main users:
Villagers who will mainly utilize the public service features, mainly to submit request.
Administrator who will respond to any submissions.
My responsibility is to focus on the main customer aspect of the product, which are Villagers that will use the mobile app to utilize public service features. The Administrator site is already available and running in a form of Web Application.
As we discussed, there will be two main users:
Villagers who will mainly utilize the public service features, mainly to submit request.
Administrator who will respond to any submissions.
My responsibility is to focus on the main customer aspect of the product, which are Villagers that will use the mobile app to utilize public service features. The Administrator site is already available and running in a form of Web Application.
As we discussed, there will be two main users:
Villagers who will mainly utilize the public service features, mainly to submit request.
Administrator who will respond to any submissions.
My responsibility is to focus on the main customer aspect of the product, which are Villagers that will use the mobile app to utilize public service features. The Administrator site is already available and running in a form of Web Application.
Requirements
Requirements
In the initial meeting, the Project Manager & I discussed about the predefined essential features Foxbyte’s had. The features was actually based on but not limited to this sample app.
In the initial meeting, the Project Manager & I discussed about the predefined essential features Foxbyte’s had. The features was actually based on but not limited to this sample app.
In the initial meeting, the Project Manager & I discussed about the predefined essential features Foxbyte’s had. The features was actually based on but not limited to this sample app.
Features Prioritization
Features Prioritization
As we talk through and explore the sample app, I found some use cases the sample app didn’t cover. I think this problem will cause bad experience later. Therefore, we ended up ideating, choosing, and prioritizing features for this development.
The Eisenhower matrix is utilized to make sure we can realistically define the MVP based on available time and resources for this phase of development.
As we talk through and explore the sample app, I found some use cases the sample app didn’t cover. I think this problem will cause bad experience later. Therefore, we ended up ideating, choosing, and prioritizing features for this development.
The Eisenhower matrix is utilized to make sure we can realistically define the MVP based on available time and resources for this phase of development.
As we talk through and explore the sample app, I found some use cases the sample app didn’t cover. I think this problem will cause bad experience later. Therefore, we ended up ideating, choosing, and prioritizing features for this development.
The Eisenhower matrix is utilized to make sure we can realistically define the MVP based on available time and resources for this phase of development.
Features Prioritization
Features Prioritization
The final result, I wrote down User Stories to guide us through the agreed final cases that will be encountered by villagers.
The final result, I wrote down User Stories to guide us through the agreed final cases that will be encountered by villagers.
The final result, I wrote down User Stories to guide us through the agreed final cases that will be encountered by villagers.
Account
Account
As a Villager, I can Log In with my NIK (ID) & Date of Birth to start using the app.
As a Villager, I can Log Out from my account.
As a Villager, I can change the profile picture of my account.
As a Villager, I can see my profile.
As a Villager, I can Log In with my NIK (ID) & Date of Birth to start using the app.
As a Villager, I can Log Out from my account.
As a Villager, I can change the profile picture of my account.
As a Villager, I can see my profile.
As a Villager, I can Log In with my NIK (ID) & Date of Birth to start using the app.
As a Villager, I can Log Out from my account.
As a Villager, I can change the profile picture of my account.
As a Villager, I can see my profile.
Administrative Letter Service
Administrative Letter Service
As a Villager, I can submit letter of administration as needed.
As a Villager, I can see the submission status of my letters.
As a Villager, I can filter current and past letters (according to status & date).
As a Villager, I can submit letter of administration as needed.
As a Villager, I can see the submission status of my letters.
As a Villager, I can filter current and past letters (according to status & date).
As a Villager, I can submit letter of administration as needed.
As a Villager, I can see the submission status of my letters.
As a Villager, I can filter current and past letters (according to status & date).
"What if a villager wants to download the final letter?" is ignored because, after discussion with the Dangin Puri Kangin government, it was decided that the final letter must be picked up by the applicant at the government office because the signature used is not digital yet.
"What if a villager wants to download the final letter?" is ignored because, after discussion with the Dangin Puri Kangin government, it was decided that the final letter must be picked up by the applicant at the government office because the signature used is not digital yet.
"What if a villager wants to download the final letter?" is ignored because, after discussion with the Dangin Puri Kangin government, it was decided that the final letter must be picked up by the applicant at the government office because the signature used is not digital yet.
Public Complaints
Public Complaints
The Public Complaints feature actually is a new addition. We brainstormed how the feature would generally function before conducting further research and design.
The Public Complaints feature actually is a new addition. We brainstormed how the feature would generally function before conducting further research and design.
The Public Complaints feature actually is a new addition. We brainstormed how the feature would generally function before conducting further research and design.
As a Villager, I can submit a complaint by attaching picture as proof.
As a Villager, I can see the submission status of my complaint.
As a Villager, I can filter current and past complaints (according to status & date).
As a Villager, I can submit a complaint by attaching picture as proof.
As a Villager, I can see the submission status of my complaint.
As a Villager, I can filter current and past complaints (according to status & date).
As a Villager, I can submit a complaint by attaching picture as proof.
As a Villager, I can see the submission status of my complaint.
As a Villager, I can filter current and past complaints (according to status & date).
"What if a Villager wants proof of complaint resolution?" is archived for future development due to time and resource constraints. I suggested to use Local News to utilized to announce and report any resolution that has been done by the government.
"What if a Villager wants proof of complaint resolution?" is archived for future development due to time and resource constraints. I suggested to use Local News to utilized to announce and report any resolution that has been done by the government.
"What if a Villager wants proof of complaint resolution?" is archived for future development due to time and resource constraints. I suggested to use Local News to utilized to announce and report any resolution that has been done by the government.
SME’s Product Showcase
SME’s Product Showcase
As a Villager, I can see products of Dangin Puri Kangin local SMEs.
As a Villager, I can see products of Dangin Puri Kangin local SMEs.
As a Villager, I can see products of Dangin Puri Kangin local SMEs.
Village’s Profile
Village’s Profile
As a Villager, I can see a gallery of Dangin Puri Kangin villager activities.
As a Villager, I can see map of Dangin Puri Kangin village.
As a Villager, I can see local news of Dangin Puri Kangin.
As a Villager, I can see a gallery of Dangin Puri Kangin villager activities.
As a Villager, I can see map of Dangin Puri Kangin village.
As a Villager, I can see local news of Dangin Puri Kangin.
As a Villager, I can see a gallery of Dangin Puri Kangin villager activities.
As a Villager, I can see map of Dangin Puri Kangin village.
As a Villager, I can see local news of Dangin Puri Kangin.
Village’s Help & Support
Village’s Help & Support
As a Villager, I can directly contact village functionaries for certain purposes.
As a Villager, I can directly contact village functionaries for certain purposes.
As a Villager, I can directly contact village functionaries for certain purposes.
Resources
Resources
I was given the previous version of Dangin Puri Kangin and a Smart Desa sample app, which I was free to analyze and improve.
I was given the previous version of Dangin Puri Kangin and a Smart Desa sample app, which I was free to analyze and improve.
I was given the previous version of Dangin Puri Kangin and a Smart Desa sample app, which I was free to analyze and improve.
Gathering Context
Gathering Context
Challenge
Challenge
The current mobile app of Dangin Puri Kangin is outdated (last updated in 2018) and some of the features doesn’t reflect current public services provided by the local government. Foxbyte as a vendor also mention that they would like to standardize the essential public service features that should be available in the mobile app.
The current mobile app of Dangin Puri Kangin is outdated (last updated in 2018) and some of the features doesn’t reflect current public services provided by the local government. Foxbyte as a vendor also mention that they would like to standardize the essential public service features that should be available in the mobile app.
The current mobile app of Dangin Puri Kangin is outdated (last updated in 2018) and some of the features doesn’t reflect current public services provided by the local government. Foxbyte as a vendor also mention that they would like to standardize the essential public service features that should be available in the mobile app.
Current & Sample app Analysis
Current & Sample app Analysis
I did a quick analysis to the current and sample app to see if there is any opportunities for improvement I could make.
I did a quick analysis to the current and sample app to see if there is any opportunities for improvement I could make.
I did a quick analysis to the current and sample app to see if there is any opportunities for improvement I could make.
Analysis of Previous and Sample Mobile App
Analysis of Previous and Sample Mobile App
Findings
Findings
Findings
1
1
1
Problems
The previous app shows too much village profile instead of digitalize public services and is outdated. This cause the digitalize effort is not optimal.
Some design styles for the both apps doesn’t meet basic UX criteria, which are outdated design in the previous app, spacing, contrast, and touch target sizing. This might be a concern for the app’s usability.
The previous app shows too much village profile instead of digitalize public services and is outdated. This cause the digitalize effort is not optimal.
Some design styles for the both apps doesn’t meet basic UX criteria, which are outdated design in the previous app, spacing, contrast, and touch target sizing. This might be a concern for the app’s usability.
2
2
2
Opportunities
Adopt and optimize public service features from sample app to the redesigned app and cut off unimportant profile features from previous app.
Apply good accessibility for the redesigned app so it can accommodate wide range of villagers and increase credibility.
Adopt and optimize public service features from sample app to the redesigned app and cut off unimportant profile features from previous app.
Apply good accessibility for the redesigned app so it can accommodate wide range of villagers and increase credibility.
Adopt and optimize public service features from sample app to the redesigned app and cut off unimportant profile features from previous app.
Apply good accessibility for the redesigned app so it can accommodate wide range of villagers and increase credibility.
3
3
3
Needs
Additional digitalized public service features to provide villagers with a wider range of services while also using a modern and user-friendly interface, incorporating the latest design trends and accessibility standards.
Additional digitalized public service features to provide villagers with a wider range of services while also using a modern and user-friendly interface, incorporating the latest design trends and accessibility standards.
Additional digitalized public service features to provide villagers with a wider range of services while also using a modern and user-friendly interface, incorporating the latest design trends and accessibility standards.
Competitive Analysis
Competitive Analysis
Complaint Feature’s Competitive Analysis
Complaint Feature’s Competitive Analysis
I decided to do competitive analysis to explore how complaint works. It’s quiet hard to find public service app here in Indonesia, but there is an app called JAKI, a one stop public service platform for people in Jakarta. Fortunately, the app provides a complaint feature called “Laporan Warga” and I did further exploration.
Here’s the flow of how “Laporan Warga” works in JAKI
I decided to do competitive analysis to explore how complaint works. It’s quiet hard to find public service app here in Indonesia, but there is an app called JAKI, a one stop public service platform for people in Jakarta. Fortunately, the app provides a complaint feature called “Laporan Warga” and I did further exploration.
Here’s the flow of how “Laporan Warga” works in JAKI
I decided to do competitive analysis to explore how complaint works. It’s quiet hard to find public service app here in Indonesia, but there is an app called JAKI, a one stop public service platform for people in Jakarta. Fortunately, the app provides a complaint feature called “Laporan Warga” and I did further exploration.
Here’s the flow of how “Laporan Warga” works in JAKI
Competitive Analysis of Jaki "Laporan Warga" Feature
Competitive Analysis of Jaki "Laporan Warga" Feature
Insights
Insights
Insights
Essential report elements include proof of image, description of event, and report type.
Users must track report progress from start to resolution.
Strict rules must govern report validity and unwanted content, as users can take photos or videos.
Essential report elements include proof of image, description of event, and report type.
Users must track report progress from start to resolution.
Strict rules must govern report validity and unwanted content, as users can take photos or videos.
Final Design
Final Design
This is the current app's design
This is the current app's design
This is the current app's design
This is the redesigned's app
This is the redesigned's app
This is the redesigned's app
Homepage
Homepage
The main goal is to showcase concise information about public services, so I did some explorations.
The main goal is to showcase concise information about public services, so I did some explorations.
The main goal is to showcase concise information about public services, so I did some explorations.
Homepage Explorations
Homepage Explorations
The Final Homepage
The Final Homepage
The Final Homepage
The Final Homepage
The Final Homepage
After discussing the app with the team, we decided to emphasize essential public service features by changing the size of the feature tile section and selecting new icons.
After discussing the app with the team, we decided to emphasize essential public service features by changing the size of the feature tile section and selecting new icons.
After discussing the app with the team, we decided to emphasize essential public service features by changing the size of the feature tile section and selecting new icons.
Showcase the village's essential landmarks, highlighting their unique value and providing contextual information beyond just a carousel of plain images.
Showcase the village's essential landmarks, highlighting their unique value and providing contextual information beyond just a carousel of plain images.
Showcase the village's essential landmarks, highlighting their unique value and providing contextual information beyond just a carousel of plain images.
The sample app's tile view effectively captures the essence of available features, providing a familiar experience. To further enhance user engagement, key services like letter submission and complaints are prioritized, encouraging exploration of these essential functions
The sample app's tile view effectively captures the essence of available features, providing a familiar experience. To further enhance user engagement, key services like letter submission and complaints are prioritized, encouraging exploration of these essential functions
The sample app's tile view effectively captures the essence of available features, providing a familiar experience. To further enhance user engagement, key services like letter submission and complaints are prioritized, encouraging exploration of these essential functions
Enhance the product card design by adding visual depth to make it stand out, piquing the interest of villagers and encouraging them to explore products created by their fellow residents
Enhance the product card design by adding visual depth to make it stand out, piquing the interest of villagers and encouraging them to explore products created by their fellow residents
Enhance the product card design by adding visual depth to make it stand out, piquing the interest of villagers and encouraging them to explore products created by their fellow residents
Administrative Letter Service
Administrative Letter Service
To submit a new letter, villagers will select the type and then fill out the submission form.
Progress indicators show how many steps are required to submit a form, so villagers don't have to guess how long it will take.
To submit a new letter, villagers will select the type and then fill out the submission form.
Progress indicators show how many steps are required to submit a form, so villagers don't have to guess how long it will take.
To submit a new letter, villagers will select the type and then fill out the submission form.
Progress indicators show how many steps are required to submit a form, so villagers don't have to guess how long it will take.
Submitting a Letter
Submitting a Letter
Submitting a Letter
We noticed that some forms can be overwhelming due to the number of fields and the uncertainty about the completion time. Additionally, the requirement for specific documents, such as ID card numbers, can further hinder the submission process.
While implementing an information dialog to inform users about the necessary documents for each form would be resource-intensive, we decided to provide progress indicators to show the number of steps involved in submitting a letter. Fortunately, the document submission step is the final one, allowing users to preview the required documents beforehand
We noticed that some forms can be overwhelming due to the number of fields and the uncertainty about the completion time. Additionally, the requirement for specific documents, such as ID card numbers, can further hinder the submission process.
While implementing an information dialog to inform users about the necessary documents for each form would be resource-intensive, we decided to provide progress indicators to show the number of steps involved in submitting a letter. Fortunately, the document submission step is the final one, allowing users to preview the required documents beforehand
We noticed that some forms can be overwhelming due to the number of fields and the uncertainty about the completion time. Additionally, the requirement for specific documents, such as ID card numbers, can further hinder the submission process.
While implementing an information dialog to inform users about the necessary documents for each form would be resource-intensive, we decided to provide progress indicators to show the number of steps involved in submitting a letter. Fortunately, the document submission step is the final one, allowing users to preview the required documents beforehand
Enhancing the status badge's contrast improves readability compared to the sample app. Prioritizing newly submitted letters followed by complete status that requires action makes it easier for villagers to track and take action of their submissions.
Enhancing the status badge's contrast improves readability compared to the sample app. Prioritizing newly submitted letters followed by complete status that requires action makes it easier for villagers to track and take action of their submissions.
Enhancing the status badge's contrast improves readability compared to the sample app. Prioritizing newly submitted letters followed by complete status that requires action makes it easier for villagers to track and take action of their submissions.
Explorations
Explorations
While I was speaking to the developer, I provided him with two dropdown designs so he could choose which one would be easier to code.
While I was speaking to the developer, I provided him with two dropdown designs so he could choose which one would be easier to code.
While I was speaking to the developer, I provided him with two dropdown designs so he could choose which one would be easier to code.
Dropdown Explorations
Dropdown Explorations
Edge Cases
Edge Cases
Avoiding Spam
Avoiding Spam
To avoid spam and unwanted text content in a text area, the viable solution is to limit the characters.
To avoid spam and unwanted text content in a text area, the viable solution is to limit the characters.
To avoid spam and unwanted text content in a text area, the viable solution is to limit the characters.
Avoiding Spam
Avoiding Spam
Additional Form Fields
Additional Form Fields
The filling form step is adjusted to accommodate additional form fields required by some letter types.
The filling form step is adjusted to accommodate additional form fields required by some letter types.
The filling form step is adjusted to accommodate additional form fields required by some letter types.
Different Form Fields for different types of letter
Different Form Fields for different types of letter
Some letters with different Form Fields.
Some letters with different Form Fields.
Activity Pages
Activity Pages
I added activity pages so that villagers can easily track updates to their submissions.
I added activity pages so that villagers can easily track updates to their submissions.
I added activity pages so that villagers can easily track updates to their submissions.
Activity Pages
Activity Pages
Notifications
Notifications
I also wrote notification messages about status updates.
I also wrote notification messages about status updates.
I also wrote notification messages about status updates.
Notifications
Notifications
Submitting a Complain
Submitting a Complain
Submitting a Complain
Public Complaints
Public Complaints
To make a complaint, villagers must take a picture or select one from their gallery, and then fill out the complaint form. Taking a picture is required to deter inappropriate complaints.
To make a complaint, villagers must take a picture or select one from their gallery, and then fill out the complaint form. Taking a picture is required to deter inappropriate complaints.
To make a complaint, villagers must take a picture or select one from their gallery, and then fill out the complaint form. Taking a picture is required to deter inappropriate complaints.
To speed up submitting a complaint, especially when Villager want to capture incidental moments, we decided to add a complaint Floating Action Button at the navigation bar to be accessible anywhere.
To speed up submitting a complaint, especially when Villager want to capture incidental moments, we decided to add a complaint Floating Action Button at the navigation bar to be accessible anywhere.
To speed up submitting a complaint, especially when Villager want to capture incidental moments, we decided to add a complaint Floating Action Button at the navigation bar to be accessible anywhere.
We decided to simplify the complaint process by including only the essential things, as I said in the Competitive Analysis. This is because the village area is small, and a location pinpoint feature would require additional development effort.
We tried to direct villagers to make a accurate complaint, so I utilize placeholders of each forms to give an idea and example about what they should write.
We decided to simplify the complaint process by including only the essential things, as I said in the Competitive Analysis. This is because the village area is small, and a location pinpoint feature would require additional development effort.
We tried to direct villagers to make a accurate complaint, so I utilize placeholders of each forms to give an idea and example about what they should write.
We decided to simplify the complaint process by including only the essential things, as I said in the Competitive Analysis. This is because the village area is small, and a location pinpoint feature would require additional development effort.
We tried to direct villagers to make a accurate complaint, so I utilize placeholders of each forms to give an idea and example about what they should write.
Edge Cases
Edge Cases
Activity Pages
Activity Pages
Similar to the Letter, I added a Complaint tab to the Activity Page so that villagers can easily track updates to their submissions.
Similar to the Letter, I added a Complaint tab to the Activity Page so that villagers can easily track updates to their submissions.
Similar to the Letter, I added a Complaint tab to the Activity Page so that villagers can easily track updates to their submissions.
Additional Form Fields
Additional Form Fields
Notifications
Notifications
There are also another notification messages about status updates for Complaints.
There are also another notification messages about status updates for Complaints.
There are also another notification messages about status updates for Complaints.
Notifications
Notifications
SME's Product Showcase
SME's Product Showcase
Villagers can view SME (small and medium-sized enterprise) products showcased with pictures, descriptions, and prices.
Villagers can view SME (small and medium-sized enterprise) products showcased with pictures, descriptions, and prices.
Villagers can view SME (small and medium-sized enterprise) products showcased with pictures, descriptions, and prices.
Submitting a Complain
Submitting a Complain
Submitting a Complain
The product carousel on the homepage showcases recently added products, prioritizing new arrivals to attract user interest.
The product carousel on the homepage showcases recently added products, prioritizing new arrivals to attract user interest.
The product carousel on the homepage showcases recently added products, prioritizing new arrivals to attract user interest.
Product cards, displayed in a grid on the product detail page, maintain consistency with the familiar layout of e-commerce apps.
Product cards, displayed in a grid on the product detail page, maintain consistency with the familiar layout of e-commerce apps.
Product cards, displayed in a grid on the product detail page, maintain consistency with the familiar layout of e-commerce apps.
Explorations
Explorations
Product Detail
Product Detail
The sample app's product detail page only shows one product image, title, price, and description, which is insufficient information for users.
I added a product pictures carousel, unit and quantity section, and BUMDes (village SME organization) badge to the product detail page to showcase more information, including product variations, quantities, and official SME affiliation.
The sample app's product detail page only shows one product image, title, price, and description, which is insufficient information for users.
I added a product pictures carousel, unit and quantity section, and BUMDes (village SME organization) badge to the product detail page to showcase more information, including product variations, quantities, and official SME affiliation.
The sample app's product detail page only shows one product image, title, price, and description, which is insufficient information for users.
I added a product pictures carousel, unit and quantity section, and BUMDes (village SME organization) badge to the product detail page to showcase more information, including product variations, quantities, and official SME affiliation.
I proposed my exploration to the project manager and developer, who agreed that it would require some technical effort, such as adding new database columns and APIs for the new attributes.
However, I still believe that these attributes, especially Product Unit & Quantity, should be included.
After few discussion, we compromised by describing the product quantity and displaying the official badge in the description, using spacing to separate each element.
I proposed my exploration to the project manager and developer, who agreed that it would require some technical effort, such as adding new database columns and APIs for the new attributes.
However, I still believe that these attributes, especially Product Unit & Quantity, should be included.
After few discussion, we compromised by describing the product quantity and displaying the official badge in the description, using spacing to separate each element.
I proposed my exploration to the project manager and developer, who agreed that it would require some technical effort, such as adding new database columns and APIs for the new attributes.
However, I still believe that these attributes, especially Product Unit & Quantity, should be included.
After few discussion, we compromised by describing the product quantity and displaying the official badge in the description, using spacing to separate each element.
Edge Cases
Edge Cases
Skeleton & Placeholder
Skeleton & Placeholder
Because the list page shows mainly images, I provided skeleton and image placeholder loading for the developer to look out for.
Because the list page shows mainly images, I provided skeleton and image placeholder loading for the developer to look out for.
Because the list page shows mainly images, I provided skeleton and image placeholder loading for the developer to look out for.
Skeleton Loading and Image Placeholder
Skeleton Loading and Image Placeholder
Village's Profile
Village's Profile
Village's Profile
Village’s Profile
Village’s Profile
Villagers can view the profile of Desa Dangin Puri Kangin, featured activity galleries, a map, and news.
Villagers can view the profile of Desa Dangin Puri Kangin, featured activity galleries, a map, and news.
Villagers can view the profile of Desa Dangin Puri Kangin, featured activity galleries, a map, and news.
Village’s Help & Support
Village’s Help & Support
Because the app may not be able to provide all services, it's best to provide the contact information of village functionaries. Villagers can quickly chat on WhatsApp or call them using the shortcuts provided.
Because the app may not be able to provide all services, it's best to provide the contact information of village functionaries. Villagers can quickly chat on WhatsApp or call them using the shortcuts provided.
Because the app may not be able to provide all services, it's best to provide the contact information of village functionaries. Villagers can quickly chat on WhatsApp or call them using the shortcuts provided.
Village’s Help & Support
Village’s Help & Support
Village’s Help & Support
Considering the limited range of services currently available on the app, providing easy-to-find contact information is a paramount of importance.
Considering the limited range of services currently available on the app, providing easy-to-find contact information is a paramount of importance.
Considering the limited range of services currently available on the app, providing easy-to-find contact information is a paramount of importance.
The Whatsapp Button is made prominent because most of the villagers are using Whatsapp as their main communication app.
Recognizing WhatsApp's prevalence among villagers, the WhatsApp button is positioned prominently to enhance accessibility and streamline communication.
The Whatsapp Button is made prominent because most of the villagers are using Whatsapp as their main communication app.
Recognizing WhatsApp's prevalence among villagers, the WhatsApp button is positioned prominently to enhance accessibility and streamline communication.
The Whatsapp Button is made prominent because most of the villagers are using Whatsapp as their main communication app.
Recognizing WhatsApp's prevalence among villagers, the WhatsApp button is positioned prominently to enhance accessibility and streamline communication.
Development Handover
Development Handover
Preparing Loading State
Preparing Loading State
Preparing Loading State
I designed particular loading state with circular loading or skeletons according few cases.
Skeleton to load contents
Circular loading for redirects and refreshes.
I designed particular loading state with circular loading or skeletons according few cases.
Skeleton to load contents
Circular loading for redirects and refreshes.
I designed particular loading state with circular loading or skeletons according few cases.
Skeleton to load contents
Circular loading for redirects and refreshes.
Various Loading States
Various Loading States
Error States
Error States
Error States
I also made several possible error states that could be encountered by the villagers interacting with the app.
Error after submitting
Error when load a list of contents
Error when load a whole page
I also made several possible error states that could be encountered by the villagers interacting with the app.
Error after submitting
Error when load a list of contents
Error when load a whole page
I also made several possible error states that could be encountered by the villagers interacting with the app.
Error after submitting
Error when load a list of contents
Error when load a whole page
Various Error States
Various Error States
Empty States
Empty States
Empty States
There are also Empty States provided for several cases
There are also Empty States provided for several cases
There are also Empty States provided for several cases
Various Empty States
Handoff Discussion
Handoff Discussion
When development started, I was on standby to answer any questions the developers had about my design. We mainly discussed the pros and cons of the design alternatives I provided, from both the user experience and tech feasibility perspectives.
When development started, I was on standby to answer any questions the developers had about my design. We mainly discussed the pros and cons of the design alternatives I provided, from both the user experience and tech feasibility perspectives.
When development started, I was on standby to answer any questions the developers had about my design. We mainly discussed the pros and cons of the design alternatives I provided, from both the user experience and tech feasibility perspectives.
App Launch
App Launch
App Launch
The app was officially launched on November 2022. Dangin Puri Kangin villagers, can now easily access and utilize its features. As of now, the app is exclusively available for download on the Play Store, providing a convenient platform for the villagers to make the most out of its functionalities and services.
The app was officially launched on November 2022. Dangin Puri Kangin villagers, can now easily access and utilize its features. As of now, the app is exclusively available for download on the Play Store, providing a convenient platform for the villagers to make the most out of its functionalities and services.
The app was officially launched on November 2022. Dangin Puri Kangin villagers, can now easily access and utilize its features. As of now, the app is exclusively available for download on the Play Store, providing a convenient platform for the villagers to make the most out of its functionalities and services.
Key Takeaways
Key Takeaways
Designing this project was an overall great experience, as I learned to work closely with the developer and project manager. However, it was not ideal due to the absence of user research and the fact that the design decisions were based solely on the client perspective. However, we hope to gain feedback from users in the next iteration to improve the app.
Designing this project was an overall great experience, as I learned to work closely with the developer and project manager. However, it was not ideal due to the absence of user research and the fact that the design decisions were based solely on the client perspective. However, we hope to gain feedback from users in the next iteration to improve the app.
Designing this project was an overall great experience, as I learned to work closely with the developer and project manager. However, it was not ideal due to the absence of user research and the fact that the design decisions were based solely on the client perspective. However, we hope to gain feedback from users in the next iteration to improve the app.
1
Learnt to prioritize features for MVP
Due to budget and time constraints, I learned to prioritize the design of features based on their importance and to focus on delivering the minimum viable product (MVP) first. This helped us to ensure that the most important features were implemented early, and that the product was launched on time and within budget.
1
Learnt to prioritize features for MVP
Due to budget and time constraints, I learned to prioritize the design of features based on their importance and to focus on delivering the minimum viable product (MVP) first. This helped us to ensure that the most important features were implemented early, and that the product was launched on time and within budget.
1
Learnt to prioritize features for MVP
Due to budget and time constraints, I learned to prioritize the design of features based on their importance and to focus on delivering the minimum viable product (MVP) first. This helped us to ensure that the most important features were implemented early, and that the product was launched on time and within budget.
2
Providing ready-to-code design
The design must have a complete flows along with possible edge and error cases, or even preparing notification messages for the developer handover.
2
Providing ready-to-code design
The design must have a complete flows along with possible edge and error cases, or even preparing notification messages for the developer handover.
2
Providing ready-to-code design
The design must have a complete flows along with possible edge and error cases, or even preparing notification messages for the developer handover.
3
Maximize tiny information to showcase
When designing pages with tiny information, carefully consider the layout and use of white space to create a visually appealing and informative experience.
3
Maximize tiny information to showcase
When designing pages with tiny information, carefully consider the layout and use of white space to create a visually appealing and informative experience.
3
Maximize tiny information to showcase
When designing pages with tiny information, carefully consider the layout and use of white space to create a visually appealing and informative experience.