## The Backstory

Diool is a B2B digital platform that's a game-changer for African companies. Think of it as your go-to hub for streamlining business payments. We're talking about centralizing transactions, fast-tracking payments, and saving time. The cherry on top? Partnerships with big names like Orange Money, MTN, and Express Union to make mobile money collection a walk in the park.

#### So, What's My Jam?

I hopped on board as Diool's solo designer, working elbow-to-elbow with product managers, engineers—you name it. Six months in, I gave the platform a total facelift while juggling new features and ongoing site tweaks. But wait, there's more! I also fine-tuned the onboarding experience, crafted an Ops portal for manual KYC checks, and designed a super-smooth payment request feature.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fdiool%2Fd1e31b82-1ceb-4c7d-ac77-f15e91970194.jpg?alt=media&token=f8be623c-58ad-4306-9b03-f4bff3a747c7","id":"d1e31b82-1ceb-4c7d-ac77-f15e91970194","width":1225,"height":775,"filename":"Diool_Before redesign.jpg","type":"image/jpeg","caption":"Old Mobile design","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fdiool%2F9e84bfbf-3b61-4472-9e70-aacfab746a2c.jpg?alt=media&token=eefad45c-9332-41dd-b78a-6ebda4d2938a","id":"9e84bfbf-3b61-4472-9e70-aacfab746a2c","width":1879,"height":1078,"filename":"Diool_Mobile design.jpg","type":"image/jpeg","caption":"New Mobile Redesign","border":false}]}
```

What's the Deal? Goals and Problems

Our mission was crystal: make the platform a dream to use for business owners and distributors. Users were scratching their heads over making transfers and reading their transaction history. Plus, the cash-is-king economy created a hurdle for digital invoice payments. So, I steered the ship towards an intuitive design that nails both digital and cash payments.

## The Recon Phase

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fdiool%2F35620bea-23fc-4899-8f90-3fb310941574.png?alt=media&token=c5c69cb5-2008-4bb9-aee1-07d549989e29","id":"35620bea-23fc-4899-8f90-3fb310941574","width":3124,"height":1974,"filename":"SCR-20231011-duc.png","type":"image/png","caption":"Qualitative data for UX research","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fdiool%2F5d591ec8-6e81-4297-a4f0-ee5006e54647.jpg?alt=media&token=4951b009-1f5d-4582-a76e-36334aacdead","id":"5d591ec8-6e81-4297-a4f0-ee5006e54647","width":1280,"height":960,"filename":"useability_test.jpeg","type":"image/jpeg","caption":"In-person useability test session","border":false}]}
```

Cue the usability test. Two days, 24-27 people, and 15-20 minutes per session. And guess what? Only a 35% task completion rate. Ouch. The pain points ranged from a lousy navigation experience to unclear icons and complex user flows.

#### The Game Plan

Armed with these insights, I tackled the Information Architecture using Hick's Law to keep choices simple and straight-up. For the visual design, I embraced Gestalt Theory to create a layout that makes immediate sense. And the color palette? Swapped it out for muted tones to make the platform WCAG compliant and easier on the eyes.

## Design Wins

##### **Redesigned Dashboard**

Who doesn't love quick, actionable insights? The new dashboard delivers just that—clear financial overviews customized for each user role.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fdiool%2Ffa4ae57b-8b04-487f-bf55-794fef8e0430.png?alt=media&token=1b12170a-fe9d-4883-b716-f035f5c948d5","id":"fa4ae57b-8b04-487f-bf55-794fef8e0430","width":2882,"height":1532,"filename":"Before_redesign.png","type":"image/png","caption":"Old Dashboard before redesign","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fdiool%2Fb35d2317-e242-4f7f-8cdc-a8d8c6530131.jpg?alt=media&token=4d1b28fa-b5bf-4f40-9a0e-546fa77a445f","id":"b35d2317-e242-4f7f-8cdc-a8d8c6530131","width":1920,"height":1440,"filename":"rfp-1.jpg","type":"image/jpeg","caption":"New Dashboard Design","border":false}]}
```

### **Unified Transaction History**

\
I got rid of the tab clutter and merged all transaction info into one neat table, making life a lot easier for users. Added a filter menu and an export feature. Less brainpower needed, more action taken.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fdiool%2Fb72cc471-808e-4100-ac45-9d917cd23cc7.jpg?alt=media&token=7d836f7a-900d-4d45-abc9-4de94f8aabbd","id":"b72cc471-808e-4100-ac45-9d917cd23cc7","width":1603,"height":1087,"filename":"Transaction view.jpg","type":"image/jpeg","caption":"Old transaction history","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fdiool%2Feb93e97b-2938-4e61-8fd7-ed5ae0c368ba.jpg?alt=media&token=e7d02c08-320a-47cf-b57b-a2f1cbb0fbf7","id":"eb93e97b-2938-4e61-8fd7-ed5ae0c368ba","width":2288,"height":1470,"filename":"New Transaction History v1.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### A Seamless Payment Transfer Flow

Let's talk money transfers. The older system had an annoying quirk: to send money to a new contact, you had to add them separately first. An extra step, more time wasted. In fact, this task had a 0% completion rate during the usability test.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fdiool%2F20db04ca-b196-4394-a154-dafc14664981.png?alt=media&token=243e1db9-b0e7-4ba6-b411-3c0885b1408d","id":"20db04ca-b196-4394-a154-dafc14664981","width":1448,"height":1698,"filename":"SCR-20231011-g8s.png","type":"image/png","caption":"Redesign transfer userflow diagram","border":false}]}
```

So, I implemented the Jobs-to-Be-Done (JTBD) framework to cook up a sleek new transfer flow. Now, users can add a new contact in the same flow where they're sending the money. It's a win-win: users save time and stay in compliance with all the rules and regs.

## Was It a Hit? Absolutely.

Our redesign efforts didn't just pay off—they soared. We’re talking a 45% spike in user adoption and a 60% jump in customer satisfaction. Oh, and our customer base? Quadrupled. Yeah, that's a 400% increase, folks.

But wait, there's more! I conducted another usability test focusing on the same tasks as before to measure our improvements. Guess what? The completion rate skyrocketed from a dismal 35% to a whopping 100%. That's right, a perfect score. And let's not forget the existing users; they were head over heels for the new design.

## Takeaways: The Gold Nuggets

Look, every project is a learning journey. This one reminded me that usability testing isn't just useful; it's vital. And never underestimate the power of small changes; they can make or break your user experience.

So, that’s the Diool story, but rest assured, this isn't the end. We're always evolving, always learning. Stick around to see where we head next. Cheers!

Revitalizing Diool: A UX Journey from Confusion to Clarity in Business Payments

Intake Help is a platform designed to connect NDIS providers and participants, making it easier to request services.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fintakehelp%2Fc8bf545f-5655-4f1b-82a0-87a45d3b12bf.jpg?alt=media&token=bfc7b0fd-c222-4aea-81c6-0be42233c6e2","id":"c8bf545f-5655-4f1b-82a0-87a45d3b12bf","width":2880,"height":2160,"filename":"intakehelp_01.jpg","type":"image/jpeg","caption":"Dashboard design","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fintakehelp%2Fd2b40f48-bb82-4fd5-8710-37cc9ae505dc.jpg?alt=media&token=e2aeb7b4-a0de-4745-b1bc-b2dcb06d227b","id":"d2b40f48-bb82-4fd5-8710-37cc9ae505dc","width":1920,"height":1440,"filename":"intakehelp_request_preview.jpg","type":"image/jpeg","caption":"Request for service form","border":false}]}
```

Intakehelp Platform Redesigned

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fhark%2F0a9b151a-28ec-41f9-986e-ff18cb7dc947.jpg?alt=media&token=cf5471b8-b136-46ff-aa21-1814d4042f2d","id":"0a9b151a-28ec-41f9-986e-ff18cb7dc947","width":3840,"height":2880,"filename":"Mobile.jpg","type":"image/jpeg","caption":"Mobile responsive application","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FS5EMNGGgZDPLtHxVOBh9LkGQOHD2%2Fhark%2F75617bd0-9818-48c3-ab90-955d8cf4d68a.jpg?alt=media&token=99201b86-1ad6-4aaa-bda4-6be1ed3a8146","id":"75617bd0-9818-48c3-ab90-955d8cf4d68a","width":1280,"height":920,"filename":"Zendesk_Hark.jpg","type":"image/jpeg","caption":"Hark Intergration with Zendesk","border":false}]}
```

* Defined a visual language and designed a minimum viable product (MVP), which played a crucial role in securing **pre-seed funding.**

* The sole designer responsible for all product and UX decisions for solutions that have helped to **grow the customer base by 500%.**

* **3x customer adoption** and retention after designing and introducing a data-driven user-friendly design.

* Designed and developed a new website (with Webflow) that makes it much easier to understand the value proposition and increase user engagement.

* Design marketing materials and motion graphics to support marketing efforts.

Achievements at Hark