*In apps, providing feedback to users after they complete an action is important to ensure a satisfying experience. Toast notifications is one of the method (and used in Nusawork) and commonly used almost in any apps. But somehow we discover the effectiveness can vary depending on the context and user demographic, especially for elderly user.*

## **Problem**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2F1Z3UBOJah8iC6TXhnhkl%2F1e64748a-d2d8-4945-b2b8-0144ea88208b.gif?alt=media&token=47e8cfd3-c788-48e6-b6e6-786487eea3fa","id":"1e64748a-d2d8-4945-b2b8-0144ea88208b","width":600,"height":349,"filename":"ScreenRecording2024-08-27at22.58.58-ezgif.com-crop.gif","type":"image/gif","caption":"Successful toast notification","border":false}]}
```

The current problem with our default toast notifications in our system are:

* It didn't catch so many attentions to some of the users

* Brings frustration to users because they don't know whether the action is successful or not

* The message only lasts for a short time

## Process

We had a lot of discussions with the dev and product team. We discovered that a lot of users especially elderly admins frustrate a lot after doing certain tasks, especially when doing an action that's very crucial (like making changes, saving items). So we decided to set an objective:

* Enough to put attention to users

* Deliver a clear message

* Need the user to interact and acknowledge that the action is succeed

We gradually shipped the UI changes. The initial iteration was a toast that has a button to dismiss the toast.

After we gathered the feedback we acknowledge that user still didn't see the message. The user said they didn't pay much attention, or it's too small to look at.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2F1Z3UBOJah8iC6TXhnhkl%2Fe09adc5c-02bf-4779-ab78-4a0d0604cf29.gif?alt=media&token=c5c99c38-d228-4737-850b-555db97c5f64","id":"e09adc5c-02bf-4779-ab78-4a0d0604cf29","width":600,"height":349,"filename":"ScreenRecording2024-08-27at23.06.10-ezgif.com-video-to-gif-converter.gif","type":"image/gif","caption":"Toast with close button","border":false}]}
```

Based on Everett N McKay's book ***UI is Communication***, intuitive UI should have an appropriate combination of several things, in this context are Discoverability and Responsive Feedback. Meaning users can easily find the objective and is visible, also the UI has to be clear whether the action was successful or unsuccessful and providing specific details when needed.

## Pop Up Dialog

Since we discovered that Discoverability and Responsive Feedback is crucial in intuitive interface. So we decided to use the alternative, pop up.

Before the modern apps where screens are not as big as they are now, pop up dialog were mainly used in cellphones and computer softwares. They may sometimes intrusive because it demand the user's attention, requiring them to acknowledge the message before continuing with other tasks.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2F1Z3UBOJah8iC6TXhnhkl%2F2c4c9750-3421-495e-9f22-7db01e0b8e1e.gif?alt=media&token=c7e6d33e-d916-4db4-8d6a-be97d9d16dd1","id":"2c4c9750-3421-495e-9f22-7db01e0b8e1e","width":320,"height":180,"filename":"Nokia.gif","type":"image/gif","caption":"Nokia 3310 (2000) — phone review by MikeShowsPhone on YouTube","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fpop-up-dialog%2F8692afa0-aa9f-4c1d-89b8-b08d5c792f9a.png?alt=media&token=81b5d447-f551-42fc-b5b5-c5eb001ef5ec","id":"8692afa0-aa9f-4c1d-89b8-b08d5c792f9a","width":528,"height":332,"filename":"HR-786 Alert Success.png","type":"image/png","caption":"Success pop up on traditional software","border":false}]}
```

But screens are getting larger and we can put a lot of items there. Users can also distracted with a lot of items shown, especially elderly users. We assume by using pop up dialog rather than toast notifications will **minimize the risk of confusion, enhances user confidence, and ensures that these users receive clear, unavoidable feedback that they can acknowledge at their own pace especially for elderly users.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2F1Z3UBOJah8iC6TXhnhkl%2F4b733bbe-5661-4caf-ab8b-68c0a6b34be3.png?alt=media&token=7ef53ab6-5ee5-4f2c-8430-f0b6df40e8ce","id":"4b733bbe-5661-4caf-ab8b-68c0a6b34be3","width":3840,"height":2595,"filename":"Pop Up dialog contoh.png","type":"image/png","caption":"Usage of pop up components across the system","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2F1Z3UBOJah8iC6TXhnhkl%2F0a314141-aa58-4969-8f5e-9440a038b4ba.png?alt=media&token=aaa65b1c-1be2-466d-a5c0-f1b12b0a55d6","id":"0a314141-aa58-4969-8f5e-9440a038b4ba","width":4080,"height":2574,"filename":"Pop Up Dialog.png","type":"image/png","caption":"Figma Components","border":false}]}
```

We provided grayed out background for less distractions, big and concise message, also a button to click.

## **The Impacts**

After the UX changes, we discovered that:

* It has been proven to eliminate user frustration, and issues related to confusion after taking certain actions have decreased (based on report from Customer Service)

* Pop-up dialogs are not as intrusive as we previously thought; we haven't received any complaints about current behavior since making the change

Why Toast Notifications Fall Short: How It Affects Nusawork's UX

*Started as an attendance app for employee officers, Nusawork has expanded its platform into comprehensive self-service platform for human resources need. As the platform grew more complex and cluttered, the objective is to simplify the system to ensure all functionalities are easy to navigate.*

## **Problem**

We gathered feedback and synthesized the issues, discovering that the main problems are:

* We need to accommodate upcoming features, as roadmap is set and new features are actively requested

* The interface is cluttered due to the absence of a product designer at the start, which led to design compromises and accumulated issues

## **Research and Insights**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fnusawork-mobile%2Ff0ba527f-cce5-4203-8d2a-a39308cde4f4.png?alt=media&token=b2d6a533-e8a8-4274-8745-d795bf586de9","id":"f0ba527f-cce5-4203-8d2a-a39308cde4f4","width":1517,"height":658,"filename":"Google Keep.png","type":"image/png","caption":"Synthesizing insights from usability testing","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fnusawork-mobile%2F75f69998-44af-4b94-a919-84192559f22d.png?alt=media&token=1d13bcbb-d095-4231-8c30-775e6af7c891","id":"75f69998-44af-4b94-a919-84192559f22d","width":2010,"height":746,"filename":"Screenshot 2024-08-28 at 10.22.35.png","type":"image/png","caption":"Usability testing with user","border":false}]}
```

We also conducted a qualitative research with 7 users to asses the usability of Nusawork app. We also constantly checking feedback sheets and observe user behavior to determine which the most effective approach for improvement. We discovered different type of users and we categorized them:

* **Senior user**: who thinks x should do y

* **Effectivity based user**: who thinks one step, is better than two steps

The objective is to accommodate these types of users to create a design that meets diverse needs and enhances overall user experience. **We decided to focus on efficiency and streamlined workflow.**

## **Efficient Lean Process and Rapid Design Delivery**

We followed a lean process to address this issue. We quickly created wireframes, went through several iterations, and then handed them off to the developer.

The process was always fast due to our stakeholders' urgent needs. Sometimes, we managed to deliver the full polished design in one sprint for each cases.

## **What we did, based on the insight**

### Mobile home

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fnusawork-mobile%2Fe335e7db-64f2-4b5d-9de4-72c20191c5f6.png?alt=media&token=5d4d8435-cf61-4ac1-81e4-57938534cab0","id":"e335e7db-64f2-4b5d-9de4-72c20191c5f6","width":540,"height":960,"filename":"Old.png","type":"image/png","caption":"Home v1 (2021)","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fnusawork-mobile%2F15573980-5234-4407-bd9e-93e2e34e48ec.png?alt=media&token=1e4dc34b-679e-4913-a657-1f61ec3fb99e","id":"15573980-5234-4407-bd9e-93e2e34e48ec","width":540,"height":960,"filename":"Old.png","type":"image/png","caption":"Home v2 (2022)","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fnusawork-mobile%2F92be15e5-10a7-42b6-8ce4-bf03f02704ed.png?alt=media&token=92afee22-5b19-4cdb-9185-d12365f16ae5","id":"92be15e5-10a7-42b6-8ce4-bf03f02704ed","width":540,"height":960,"filename":"New.png","type":"image/png","caption":"Home v3 (2023)","border":false}]}
```

We redesigned Home v1 into Home v2 to showcase the main features and moved the Clock In/Clock Out section to a new dedicated navigation bar. However, as the number of features continued to grow, we decided to iterate on the designs further.

Home v3 resolves user frustration with side scrolling by reducing the extra steps needed to access features. Home v3 also displays more features directly within the interface, unlike in previous versions.

### Redesign the Feedback Form

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fnusawork-mobile%2F729dff43-927d-4129-b2de-8ceac65d99e3.png?alt=media&token=409dfa15-4301-4480-9fac-d608bd37cd4c","id":"729dff43-927d-4129-b2de-8ceac65d99e3","width":360,"height":641,"filename":"old fb.png","type":"image/png","caption":"Old feedback form","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fnusawork-mobile%2Fcbe236d3-37e1-494e-8521-290c60304ece.png?alt=media&token=d78a39d8-ba28-4f99-9102-f026e9b23f79","id":"cbe236d3-37e1-494e-8521-290c60304ece","width":360,"height":641,"filename":"new fb.png","type":"image/png","caption":"New feedback form","border":false}]}
```

The old form was too difficult to read thoroughly and overwhelming due to excessive texts. We decided to simplify the interface to make it easier for users to provide feedback.

### Cluttered calendar

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fnusawork-mobile%2F1edd275c-7c6a-4601-9b77-75d5c8fb54af.png?alt=media&token=6f52d0e7-60eb-43a2-a1ef-6c89c4840dd6","id":"1edd275c-7c6a-4601-9b77-75d5c8fb54af","width":360,"height":640,"filename":"Calendar & Schedule.png","type":"image/png","caption":"Old Calendar","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fnusawork-mobile%2F579f2458-9dc7-4f8c-b57e-e3405d744656.png?alt=media&token=d6ec76d3-f1d6-439e-b10c-d9ab9b4c6b98","id":"579f2458-9dc7-4f8c-b57e-e3405d744656","width":360,"height":640,"filename":"Kalender - Jadwal Kerja.png","type":"image/png","caption":"New Calendar for work schedule","border":false}]}
```

As shown above, some users found the interface cluttered and overwhelming because of too many actions. We revised the hierarchy to

1. At the top, we guide the user to choose which calendar they want to see: Work Schedule, Events and Holidays, or Overtime Schedule

2. The time picker, which allows the view to be changed to Day, Week, or Month

3. Finally, users can access the detailed content of the calendar

## **The Impacts**

After four sprints and user reviews, we succeeded to:

* Reduced the number of steps needed for certain flows, This change led to a noticeable increase in positive user feedback and a reduction in task completion time

* Some aspects of the UI are well-structured, which helps reduce user frustration indicated by fewer support requests following the changes

Restructuring Nusawork Mobile App

*A showcase of a CRM web app built specifically for internal company use. The third-party software the company used had limitations in requesting new features. The objective was to implement custom functionalities tailored to their specific needs and enhance business efficiency.*

## **Development Process**

The company relied on third party software to manage the customer relationships. However, many of the features are underutilized, as most customer primarily preferred using WhatsApp to communicate issues. So we decided to build a CRM that focuses on WhatsApp communication.

We held a meeting and discussion with PM and devs and the objectives are:

* Fast and reliable service
* System that follows specific rules about customer complaint flow
* Several custom functionalities

## **Research and Pre-design**

Some of the APIs are already built and some of the requirements have been discussed, the rest is to validate the discussed objectives align with the tech stack. We took one sprint to explore several CRM apps and iterate on the findings.

## **Fast in User Experience**

We frequently heard feedback from our users, saying, "It would be nice if it took fewer steps to get things done." In response, our priority is to ensure that the most important actions are displayed prominently and are easy to access.

For example, when user needed to grab a ticket quickly, we implemented a hover action that allows them to do so effortlessly.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2FniJdNK9i4VlXcJX6CQq5%2Fbef7250a-517a-4f79-923a-f8c1f6e462cb.gif?alt=media&token=34d830a8-f4c3-4616-a49b-251b9ec5ce3e","id":"bef7250a-517a-4f79-923a-f8c1f6e462cb","width":530,"height":383,"filename":"ScreenRecording2024-08-28at00.54.36-ezgif.com-crop.gif","type":"image/gif","caption":"By hovering, user can easily access the most important actions (Block, Snooze, Assign Ticket)","border":false}]}
```

During early development, user needs often change, and we adapt to those changes as required.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2FniJdNK9i4VlXcJX6CQq5%2F04ce4305-04d1-4d8a-a461-99cd8886cdec.png?alt=media&token=771c0041-fe61-4493-8cbd-74a1eb216dff","id":"04ce4305-04d1-4d8a-a461-99cd8886cdec","width":1148,"height":384,"filename":"Screenshot 2024-08-28 at 01.00.53.png","type":"image/png","caption":"Early development of ticket banner","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2FniJdNK9i4VlXcJX6CQq5%2F8fa19daf-9515-490a-ad3e-03aeca56ce1a.png?alt=media&token=d19f5148-8101-4a98-97de-42285171365d","id":"8fa19daf-9515-490a-ad3e-03aeca56ce1a","width":2312,"height":966,"filename":"Screenshot 2024-08-28 at 01.02.48.png","type":"image/png","caption":"Revised ticket banner after few feedbacks from user","border":false}]}
```

## **Customer Complaint Flow**

In this company, there are specific rules for handling complaints, including ticket numbers and several Service Level Agreements (SLAs). One of them is how complaint are handled.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2FniJdNK9i4VlXcJX6CQq5%2Fdf52933a-1765-47d2-8395-9dedfe8b029a.png?alt=media&token=7aa3f648-3392-4de4-947e-44a9b5dacedb","id":"df52933a-1765-47d2-8395-9dedfe8b029a","width":2116,"height":272,"filename":"User Flow.png","type":"image/png","caption":"Tickets marked as 'Selesai' (Solved) can be moved back to 'Antrian' (Queue), allowing agents to take them again. The ticket number will remain the same.","border":false}]}
```

The interface also reflects which state of the flow the user is in, indicating their position in the process. Each state has different actions.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2FniJdNK9i4VlXcJX6CQq5%2F6652ddc0-c5a8-4eb1-a4aa-49895fd8bcf9.png?alt=media&token=6476b72f-bbfb-4bfb-b535-c325145c281d","id":"6652ddc0-c5a8-4eb1-a4aa-49895fd8bcf9","width":1911,"height":1158,"filename":"State Awal.png","type":"image/png","caption":"In Queued (Antrian), user can Assign the ticket to other agent or take the ticket themselves.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2FniJdNK9i4VlXcJX6CQq5%2Fabe55b96-d172-42ea-b7fe-0684732da87c.png?alt=media&token=6280a664-09c3-47e5-898d-8963d803b0f2","id":"abe55b96-d172-42ea-b7fe-0684732da87c","width":1911,"height":1158,"filename":"Ditugaskan.png","type":"image/png","caption":"In Assigned (Ditugaskan), user can bring back the ticket to Queue, assign the ticket to other agent or solve the ticket","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2FniJdNK9i4VlXcJX6CQq5%2Ff87de621-af19-4552-8c2a-c38198476204.png?alt=media&token=5834a572-7dd1-40dd-8544-167693c4411f","id":"f87de621-af19-4552-8c2a-c38198476204","width":1911,"height":1158,"filename":"Tutup tiket.png","type":"image/png","caption":"When the ticket is Solved (Diselesaikan), user can reopen the ticket back to queue.","border":false}]}
```

## **Custom Functionalities**

Based on the discussions with the PMs, and APIs that are already made, there are some custom features that needs to be implemented.

### Inbox Message Blur

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2FniJdNK9i4VlXcJX6CQq5%2F6e9b1074-095f-4eb9-9613-768a50c0d0c7.png?alt=media&token=eb0248fb-87dd-43d3-b116-12fce076f980","id":"6e9b1074-095f-4eb9-9613-768a50c0d0c7","width":2130,"height":675,"filename":"Message blur.png","type":"image/png","caption":"Blurred conversation preview","border":false}]}
```

The objective is to prevent agents from seeing and selectively picking issues. This issue occurred in some divisions, so we made it as an adjustable setting

### Different Inbox Filters

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2FniJdNK9i4VlXcJX6CQq5%2F99578c43-212e-4c57-ae49-1826e68c56dd.png?alt=media&token=ce562052-f144-4658-ad21-e9433529189d","id":"99578c43-212e-4c57-ae49-1826e68c56dd","width":4119,"height":2160,"filename":"Multiple inbox filter.png","type":"image/png","caption":"Filter can be applied to all inboxes or applied to each of three inboxes","border":false}]}
```

Most CRM systems uses a single filter for all inboxes (Queue, Assigned, Done). Our user requirements specify that each inbox should have its own distinct filter.

### Multi Number Indicators

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2Fcrm-software%2F7cc25ebb-77cc-429f-a04e-93b9acee6456.png?alt=media&token=7a58a798-addd-41f9-8b3b-fe35aba0ef5c","id":"7cc25ebb-77cc-429f-a04e-93b9acee6456","width":1542,"height":1310,"filename":"Screenshot 2024-08-28 at 02.07.41.png","type":"image/png","caption":"Blue and orange line represents a different phone number","border":false}]}
```

Indicators are considered valuable to our users for identifying which phone number a customer used to send a message, as we support multiple phone numbers. We implemented a colored line, and user can see which number corresponds to each color by hovering over the colored line.

### Custom Report with Specific Variables

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FNBDgYlstAEdvUfx7nahyx9uUiTz2%2FniJdNK9i4VlXcJX6CQq5%2F4ad712ed-d657-4790-92e9-e0040966b9db.png?alt=media&token=867190be-f514-4612-b9c6-123f2b8b3f7f","id":"4ad712ed-d657-4790-92e9-e0040966b9db","width":2970,"height":2070,"filename":"Design heatmpa.png","type":"image/png","caption":"Heatmap showing the times when customers most frequently submit complaints","border":false}]}
```

There are certain metrics that need to be collected and reported to evaluate each agent. One of the user requirements is a heatmap that displays the times when customers most frequently submit complaints.

## **The Impacts**

After reviewing a lot of feedbacks, users have been proven to be satisfied with our custom made CRM. They are no longer overwhelmed with features that often unused, Instead, users are benefiting from features designed to ease their workflow.

Moreover, since the app is developed by our internal team, the overall operation cost has been significantly reduced. Service maintenance has also become more efficient, as users can easily submit feedback or feature requests.

CRM Software for Company Internal Use

Product Designer

Aldo's Design Showcase

SEO Focused Blog

Nusawork has expanded its platform into a one-stop self-service for HR needs. As it became cluttered, designers were tasked with tidying up the mobile interface.

Restructuring Mobile App

Study Cases

Nusawork is a B2B SaaS focuses on integrated system for HR.

My main role is to create user-friendly interfaces for both web and mobile platforms. This includes designing user flows, validating needs, and integrating feedback to meet user requirements. I also work with stakeholders to align on business needs and discuss upcoming feature requests

Nusawork HR

Doing Search Engine Optimization both on-page and off-page, while researching trending keywords. Also setting up websites to be SEO friendly

Aldo F

2024

2023