Cliently – The Service Provider’s Booking Best Friend

TOOLS USED

• Figma
• Hand Sketch
• FigJam
• Notion
• Lucide Icons
• Adobe Photoshop
• Adobe Illustrator
• Zeplin
• Notion

Design a mobile-first SaaS app that empowers solo service providers to easily manage client bookings, availability, and payments — all from one app.

Many solo service providers like wellness coaches, makeup artists, and freelancers still manage bookings manually — through Instagram DMs, WhatsApp, Google Calendar, and bank transfers. This leads to:

• Missed appointments

• Payment delays

• Double bookings

• Mental stress

They need a simple, mobile-first tool to automate the entire flow: discovery → booking → payment → reminders → rebooking.

To better understand the needs of solo service providers, I conducted 1:1 interviews with three individuals working in wellness, design, and beauty. Each shared how they currently manage bookings, communicate with clients, and handle payments.

Key themes emerged:

• Most rely on a mix of DMs, messaging apps, and calendar tools

• Payment tracking is disorganized, with frequent delays

• There’s a strong desire for automation, especially around reminders and availability

Competitor Review

Insight:

There’s a gap between simplicity and completeness. Cliently fills that gap — mobile-first, clean, and efficient.

• When I share my services, I want a booking link to avoid chats.

• When a client books, I want payment up front to avoid chasing them.

• When a session nears, I want automatic reminders to reduce no-shows.

• When I check my dashboard, I want to see upcoming sessions clearly.

Wireframes

Created low-fidelity wireframes for:

“I prioritized clarity and hierarchy over early aesthetics.”

Paywise: A Bulk Payments Dashboard for Fast, Accurate Finance Workflows

TOOLS USED

• Figma
• Hand Sketch
• FigJam
• Adobe Photoshop
• Adobe Illustrator
• Zeplin
• Notion

Paywise is an enterprise dashboard designed to streamline the bulk payment process for finance teams. Legacy systems often forced users to manually upload large files, hunt for errors, and manage approvals without clear visibility. This project focused on redesigning the experience with modern UX principles—introducing intuitive data validation, real-time approval tracking, and a modular UI system to reduce friction and improve accuracy.

I led the end-to-end UI/UX design process: from user research and journey mapping to wireframes, prototyping, and usability testing—delivering a solution that was faster, clearer, and more scalable for enterprise needs.

Finance teams in large organizations regularly process bulk payments involving hundreds to thousands of transactions. Their existing tools were outdated, clunky, and prone to user error—especially during data uploads and approval workflows.

Key challenges included:

• Manual file uploads with no error feedback until after submission

• Lack of visibility into payment statuses and approval stages

• Confusing user flows, especially for non-technical users

• High error rates due to missing validations and unclear UI elements

The challenge was to redesign the bulk payments experience to be faster, more transparent, and error-resistant—without disrupting users’ existing mental models or workflows.

To design a solution that addressed real user pain points, I began with a thorough discovery phase focused on understanding how finance teams process bulk payments today, where they struggle, and what they truly need.

🗨️ Stakeholder Interviews

I conducted 5 interviews with finance managers, payment approvers, and operations staff across mid-to-large organizations. Key findings included:

• File uploads were prone to silent errors — users wouldn’t know something failed until long after submission.

• Approvers had no single view of what needed their attention, often relying on emails or spreadsheet filters.

• Users feared making irreversible mistakes, especially when working with large volumes.

📊 User Survey

A short survey was distributed to 20+ professionals in finance roles.

• 80% of users had experienced at least one payment rejection due to formatting issues.

• 65% said they lacked confidence in their approval system.

• 90% wanted clearer visibility and error feedback.

🕵️‍♂️ Competitive Analysis

I reviewed tools like Bill.com, SAP Concur, and QuickBooks to benchmark best practices and UX gaps.

1. Define: Synthesizing Research into Focus

After gathering insights through stakeholder interviews, user surveys, and competitive analysis, I distilled the core challenges into focused design goals:

• Minimize upload errors through real-time data validation

• Increase transparency with a clear view of approval status and priorities

• Reduce user friction by simplifying workflows for both technical and non-technical users

• Preserve familiarity to reduce cognitive load for users accustomed to legacy systems

These goals framed every design decision that followed.

2. Ideate: Mapping Out the Solution

With clear user needs in mind, I began shaping the solution:

• User Flows: I mapped out key user flows—such as uploading files, resolving errors, and approving payments—to identify redundancies and bottlenecks.

• Sketching: Early hand-drawn sketches helped explore different interaction models, especially for complex areas like inline error resolution and multi-step approvals.

• Journey Mapping: I visualized the full end-to-end user experience across roles (e.g., uploader vs. approver) to surface emotional highs/lows and system gaps.

3. Structure: Wireframes and IA

To ensure clarity and scalability:

• Wireframes: I created low- to mid-fidelity wireframes to structure pages such as:

  • The bulk upload module with inline error handling

  • Approval dashboards with real-time status indicators

  • Notification systems and escalation paths

• Information Architecture: I introduced a modular layout that allowed finance teams to toggle between batch views, approvals, and error logs seamlessly—reducing clutter and cognitive overload.

4. Prototype: Bringing the Experience to Life

I developed interactive prototypes in Figma to simulate real user scenarios. These prototypes focused on:

• Immediate file validation feedback

• A multi-level approval system with activity trails

• Contextual error messages with actionable next steps

This allowed me to test not just static layouts, but also how the system behaved in real usage.

Redesigning Salid Agriculture’s Website for Trust, Clarity, and Growth

TOOL

• Figma
• Hand Sketch
• FigJaam
• Adobe Photoshop
• Adobe Illustrator

Salid Agriculture is a socially-driven agribusiness empowering rural communities through sustainable shea butter production and ethical sourcing. As the brand grew, its digital presence fell behind—failing to reflect its impact, credibility, and professionalism.

This project focused on redesigning Salid Agriculture’s website from the ground up. The goal was not only to modernize the UI, but also to build trust with partners, investors, and customers through thoughtful user experience design. The result: a clean, responsive, and conversion-ready platform that amplifies Salid’s mission and makes their work visible to the world.

The original website:

• Looked outdated and lacked visual appeal

• Had poor structure and weak messaging

• Didn’t communicate credibility or impact effectively

• Was hard for users (and the client) to navigate or update

• Visual Audit: Unaligned elements, inconsistent fonts, low-res images.

• Content Audit: No clear hierarchy, too much text in wrong places.

• Competitive Research: Compared with similar agribusiness brands in Africa and globally.

• Client Interviews: Identified key business goals — trust, social impact, investor confidence.

• ✅ Visual Identity: Unified color palette (greens, naturals) and consistent fonts

• ✅ Hero Banner: High-quality shea butter image and bold headline for instant message clarity

• ✅ Impact Metrics: 10,000 trees, 40,000 women — made prominent below About section

• ✅ Team Section: Added professional headshots and titles for trust

• ✅ Latest News: Modular layout to support updates and SEO

• Typography: Clean, accessible sans-serif

• Color Scheme: Green for growth/trust, white for clarity, black for contrast

• Icons: Custom-styled line icons for services

• Spacing & Grid: Improved whitespace for scan-ability

• Sketching: Early hand-drawn sketches helped explore different interaction models, especially for complex areas like inline error resolution and multi-step approvals.

6. Deliver: Ready for Development

• High-Fidelity Designs: I finalized polished UI screens aligned with Paywise’s design system, optimizing for enterprise scalability and accessibility.

• Developer Handoff: Delivered annotated designs and interaction specs via Figma and Zeplin. Also supported QA to ensure design integrity in implementation.

• Implemented the design using Divi with responsive behavior

• Made sure images scale well across desktop and mobile

• Delivered easy-to-edit modules so client could manage content without dev support

• ✳️ Improved visual credibility, leading to better stakeholder engagement

• ✅ Easier for the client to update blog/news

• 🔗 Increased “Get a Quote” interactions (based on anecdotal client feedback)

• 🎯 Clearer storytelling led to better presentations for funding and partnerships