Work Management Platform
A role-based dashboard system for creatives and clients to manage jobs, milestones, and payments with clarity and efficiency.
Designing a portal that simplifies complex workflows, helping creatives track work and clients manage milestones and payments in one unified dashboard system??
Project Type
0→1 project??
Dashboard?
www.99yards.app
Team
2 Product Designers
1 Manager??
3 Engineers
Timeline
7 Weeks
Tools
Figma
FigJam
Google Meet
Lyssna??
Skills
UX/UI Design, IA, User Flows, Design System?, Wireframing, Prototyping, User Testing
OVERVIEW
This dashboard is a new feature that did not previously exist in the company’s product. I was responsible for defining the vision, structure, and interaction model from the ground upI designed a brand-new role-based dashboard that didn’t exist in the company’s product — creating the foundation for how creatives and clients manage jobs, deliverables, and payments in one unified experience....As this feature did not exist before, I co-led the end-to-end concept creation — defining the problem space, framing the opportunity, and designing both the UX architecture and final interface.
This project is a 0→1 desktop dashboard for a fashion-tech platform that connects creatives with clients for bookings. While the mobile app was still in early development and had no finalized patterns, the company needed a scalable web experience to support job tracking, communication, and operational tasks.
I designed the first version of the desktop dashboard from the ground up—defining workflows, interaction patterns, and structure that would eventually inform both desktop and mobile
Background
I identified workflow inefficiencies in the team’s existing processes, so I proactively proposed and designed a role-based dashboard to improve clarity and task management. —-resulting in % improvement in….
I realized there was no centralized dashboard and workflows were scattered. I proposed a role-based dashboard project. I researched pain points, analyzed existing screens, created flows, and designed a scalable system. This demonstrates my end-to-end UX thinking.
While the product has mobile elements, there was no centralized desktop dashboard to support users in managing multiple tasks, tracking progress, or accessing key workflows efficiently. The mobile screens only showed fragmented views, making it hard for users to see the bigger picture or perform desktop-level tasks.
While the product had some mobile elements, such as milestones and status indicators, there was no full workflow or centralized desktop dashboard. Users lacked a comprehensive view of tasks, progress, and actions, making it difficult to track work and make decisions efficiently.”
Problem
Solution
Design a role-based dashboard that helps both creatives and clients manage their bookings, track progress, communicate clearly, and handle transactions in one place.
The platform serves two distinct user groups—Creative Professionals and Clients—who interact with bookings in fundamentally different ways.
Instead of creating two separate products, I designed one flexible dashboard system with role-based views. Both user types share the same layout, design components, and interaction patterns, but the information hierarchy adapts based on their goals.
Creatives see tools for managing jobs, schedules, approvals, messaging, and earnings.
Clients see tools for tracking their bookings, payments, project status, and communication.
This role-based approach maintains consistency, reduces development complexity, and ensures each user gets a dashboard tailored to their workflow.
I used AI tools (Figma Make + ChatGPT) during early ideation to rapidly explore multiple dashboard layouts and generate realistic booking and transaction examples. This accelerated low-level exploration and allowed me to focus more on validating user needs, refining role-based workflows, and designing the final interaction patterns.
To accelerate exploration and focus more deeply on problem-solving, I used AI tools (Figma Make and ChatGPT) throughout the early stages of this project. AI assisted in rapidly generating wireframe variations, brainstorming role-based workflows for creatives and clients, and creating realistic sample content for bookings, payments, and job statuses. It also supported research synthesis and helped me identify patterns in user needs.
Importantly, AI was only used for low-level exploration. All information architecture, interaction patterns, usability decisions, visual design, and final UI work were created manually. This approach allowed me to leverage AI for speed while maintaining full control of the UX direction and design quality.
“0→1 Desktop Dashboard built from an existing mobile ecosystem”
OR
“Designing a new multi-role desktop platform from an existing mobile product foundation.
I designed a desktop dashboard to consolidate existing mobile features into a coherent, scalable interface, while adding new functionality to support users in a desktop environment.
The dashboard builds upon existing mobile components but adapts and expands them for desktop use, introducing new layouts, interactions, and data visualizations appropriate for a larger screen.
→ Research: Synthesized needs using secondary research + AI pattern analysis
→ Define: Two primary roles, different permissions
→ IA & Flows: Built structure to reduce complexity
→ AI Ideation: Used Figma Make to generate layout variations
→ Design: Created responsive dashboard screens
→ Test/Refine: Iterated to simplify and improve readability
→ Outcome: A scalable, role-based dashboard for booking and job management
Impact - make 3 boxes to display info
Design Preview
or scroll down to view the full case study
Accessible and reliable donation experience for global donors. (Transparency?)
Launch a new campaign with a funding goal to support local underserved communities
Efficient and seamless campaign management for administrative staff
PROCESS HIGHLIGHTS
Project Kickoff - getting rid of this or present goals and contraints in a easy to read way ??
Understanding the project goals and constraints
We began the project with a meeting with MCF’s managers and the development team.
Project goals:
- Simplify Donations: Make contributing easy, intuitive, and seamless for donors.
- Streamline Campaign Management: Enable admins to efficiently create, manage, and track campaigns and funds.
- Enhance Transparency: Provide clear, real-time visibility into how donations are used.
Constraints :
With an existing UI library in place, our design needed to align with the established components and project structure to maintain consistency and facilitate smooth implementation.
Take it into consideration Local communities lack advanced mobile phones and reliable network. would be great to design a tracking system.
Digital Wallet Access: Contributions are sent to the recipient’s mobile phone using MTN Mobile Money due to local people with less advanced smart phones and 2G/3G network.
Collaborating with stakeholders and developers across multiple time zones required clear communication and proactive planning to maintain alignment and meet deadlines.
Show this as three simple illustrated cards or icons:
🎁 Simplify Donations - Make donating quick and intuitive
🧮 Streamline Management - Let admins easily create and track campaigns.
🔍 Enhance Transparency - Show clear, real-time fund usage.
——-Use a visual list with small icons and color blocks (light gray or muted background).
🧩 Design Consistency: Aligned with existing UI library and design system.
📶 Tech Constraints: Designed for users with 2G/3G network and basic phones.
💰 Digital Wallet: Used MTN Mobile Money for fund distribution.
🌐 Collaboration: Worked asynchronously across time zones with clear communication plans.
Different user types, goals, and needs
Research
We talked to our user groups to understand considering for different users different interfaces
Donors
Goals: Find meaningful campaigns that you care about and contribute easily and get receipts of their donation, see the impact of their contributions.??
Needs: A simple, intuitive donation process. One-time or reoccurring payment options.
🎯 Donors
Goals:
💖 Discover meaningful campaigns
💸 Donate easily (one-time or recurring)
📄 Get instant receipts??
🌍 See real impact of their contributions / transparency
Needs:
✅ Simple, intuitive donation flow
🔁 Flexible payment options
🔍 See transparency
Competitive analysis??
Goals:
📊 Create, edit, and track campaigns efficiently
⚙️ Oversee campaign performance with ease
Needs:
🪄 Intuitive management tools
🚀 Streamlined administrative workflows.
AI for Early Wireframe Exploration
This is a big one and actually very common now.
You can say you used AI to:
Explore layout variations
Generate wireframe possibilities
Produce fast low-fidelity sketches
Compare dashboard layouts
Phrase:
Used AI to quickly explore multiple dashboard layout variations, enabling rapid iteration before committing to high-fidelity wireframes.
How to Summarize It in Your Case Study (clean + credible)
AI-Assisted Workflow
To accelerate early discovery and exploration, I integrated AI throughout the design process:
Generated and synthesized early user pain points
Created draft personas and user goals
Explored alternative dashboard layouts
Produced navigation labels and microcopy options
Used AI-driven flow analysis to simplify milestone and payment tasks
Drafted usability test scenarios to prepare for testing
This approach reduced exploration time by 30–40%, allowing more focus on refinement and testing.
User Flows — get rid of this????? considering users needs
2 user How to improve their flows ???
To help the team stay on the same page, we collaborated on creating user flows: donor flows simplify campaign discovery and donations, while admin flows streamline campaign management. Visualizing these flows highlighted pain points, optimized navigation, and guided intuitive wireframes, keeping the team aligned throughout the design process.
and help direct the different interfaces for different user groups??
Explorations??
One complex mobile UX problem I solved involved designing an AI-assisted job posting experience within an AI-powered B2B SaaS platform connecting fashion professionals with companies. The challenge was balancing automation and user control—ensuring AI could assist with writing and decision-making without feeling intrusive or unpredictable. To address this, I mapped the end-to-end posting workflow, identifying points where users wanted guidance versus autonomy. I integrated editable AI suggestions, clear decision points, and transparent labeling to build trust. Collaborating closely with the founder and engineers, I iterated on prototypes and tested with users to refine how AI feedback was presented. The final design improved task efficiency while maintaining users’ sense of ownership and confidence.
See how AI can speed up workflow but with sentiments of needing control ?
DESIGN
Just show final design screens based on the feature:
Design Solutions
We created mid-fi wireframes that makes donating easy for donors and managing campaigns and funds seamless for admins. Features include streamlined donation flows and accessible campaign management tools, all designed to enhance transparency and usability.
Staff workflow efficiency: ……………………..
New user sign up flow?? not important??
Discover campaigns and make a donation getting confirmations??
Transparency: Anyone, even guests, are able to follow the trail of contributions from source to beneficiary. — Notifications and updates, optional email sign up for updates?
(from user interviews, users want to see transparency. Solution: show where they funds will go and if they are delivered, they get an update)
Visibility of Progress: Anyone, even guests, are able to see the positive effects of contributions reflected on Campaigns and Projects.
-we have King Givers and Kind Words under each campaign. On the same screen, we also feature how the campaign is helping the local community, and who the receivers are.
Design System
Developer handoff
Show collaborations!! Collaborating communicating across different time zones
The team uses an existing UI design kit (material design)
Met with developers, designers, manager weekly.
Orgnaize the design system
straight inconsistency with former components, ???
TESTING &
ITERATIONS
User testing shows users were not clear about
Iteration 01
Adding labels makes it clearer about the step
Users were confused about……
Iteration 02
We created mid-fi wireframes that makes donating easy for donors and managing campaigns and funds seamless for admins. Features include streamlined donation .
Before
xxxxxxxxxxxx
xxxxxxxxxxxx
xxxxxxxxxxxx
Delete this seciton?!?!
??????
Success Metrics?????
What went well?
1. xxxxxxxxxxxxxxxxxxxxxx
Areas for Improvement
After
2. xxxxxxxxxxxxxxxxxxxxxx
Before
After
3. xxxxxxxxxxxxxx
Before
After
REFLECTION
Next Steps
Fund management??? Backend will integrate with MTN mobile services. All beneficiaries will have associated phone numbers that are compatible with the service.
Take it into consideration Local communities lack advanced mobile phones and reliable network
Ongoing project do next step would be create fund management tool for staff.
Since the platform is still in development, I would measure the following success metrics during implementation:
Task Completion
Track task completion rates by each user group, to assess if they are able to complete their goals within context
Intervention Rate
Track both success and friction in teacher interventions
Tech Integration
creating a dashboard tor easier manahement? scale it tp desktop and crewate dashboard….??
Lessons Learned
xxxxxxxxxxxxx
xxxxxxxxxxxxxx
