A
Clean
RecommendedWhite pages and a photo hero with the search on it. Closest to Upwork.
TaskPro: Website Mock-up Plan
Pick one option for each part. Every screen works: click around, switch to Phone, change the colors, or expand it. Everything saves on its own.
- 1Pick here
- 2Kath builds the mock-up
- 3We check it against the paper
A proposed platform for SBA Group 2. All people, photos and amounts are placeholders.
The Whole Site
Your picks here restyle every screen below.
01
The Look
B
Bold
A deep top bar and hero, square corners and bold headings. Closest to Fiverr.
C
Friendly
A warm paper background and softer corners. TaskPro's own.
D
Compact
A light grey page with white cards and round buttons. Like LinkedIn.
E
Orange header
An orange top bar and hero, like the shopping apps people already use.
02
Brand Color
A
Tangerine
RecommendedBright orange with white button text.
B
Tangerine, dark text
The brighter orange on buttons, with dark text.
C
Sunset
A redder orange.
D
Mango
A yellower orange.
E
Coral
Softer and pinker.
F
Marigold, dark text
Yellow-orange, with dark button text.
G
Clay
Muted and earthy.
03
Greys
A
Warm grey
RecommendedWarm greys. Dark parts are a deep brown.
B
Slate and navy
Cool greys. Dark parts are navy.
C
Charcoal
Plain greys. Dark parts are near-black.
04
Font
A
Geist
RecommendedClean, and the easiest to read at small sizes.
B
Figtree
Rounder and friendlier, close to Fiverr's.
C
Hanken Grotesk
Close to Upwork's font.
05
Home Page
From your doc · 1. What is TaskPro?
- TaskPro is a digital platform focused on the Philippines that connects people seeking professional, project-based services with professionals looking for flexible work. Clients on the platform can post projects, look at the profiles and portfolios of professionals, get proposals, communicate with the service providers, and manage the projects, while professionals can display their qualifications, find appropriate projects, submit proposals, and develop their reputation by means of the work they have completed and the reviews they receive.
From your doc · 3. Geographic Scope
- Metro Manila
A
Search first
RecommendedOne search box on a photo, with Hire a pro or Find projects. Like Upwork.
B
Two doors
Clients and professionals pick their side right away.
C
Show the work
Photo tiles and work samples first. Like Fiverr.
D
Post from the hero
The hero is the start of a project post.
TaskPro Core Features
One part per feature in the paper. Same people and amounts in every option.
06
Project Posting
From your doc · 5. Project Posting
- allows businesses and individuals to describe their needs, budget, timeline, and requirements.
A
One page with preview
Every field on one page, with a live preview of what pros will see.
Doc check · 5 of 5 on screen
- allows businesses and individuals
- to describe their needs
- budget
- timeline
- and requirements
B
Step by step
RecommendedFour short steps. This one is budget and timeline; the others hold the rest.
Doc check · 2 of 5 on screen
- allows businesses and individuals
- to describe their needs
- budget
- timeline
- and requirements
C
Start from a common project
Pick a common project and the brief comes filled in.
Doc check · 5 of 5 on screen
- allows businesses and individuals
- to describe their needs
- budget
- timeline
- and requirements
07
Skill & Project Matching
From your doc · 6. Skill & Project Matching
- helps clients find professionals based on skills and project requirements.
From your doc · 3. Geographic Scope
- Metro Manila
A
List with filters
Filters on the left, including city, and one wide row per pro.
Doc check · 2 of 3 on screen
- helps clients find professionals
- based on skills
- and project requirements
B
Card grid
Each pro is a card led by a work sample.
Doc check · 1 of 3 on screen
- helps clients find professionals
- based on skills
- and project requirements
C
Matched to your project
RecommendedSays which of your skills and requirements each pro meets.
Doc check · 3 of 3 on screen
- helps clients find professionals
- based on skills
- and project requirements
D
Map of Metro Manila
Click a city on the map; the list sorts by distance.
Doc check · 1 of 3 on screen
- helps clients find professionals
- based on skills
- and project requirements
08
Verified Professional Profiles
From your doc · 4. Verified Professional Profiles
- builds trust by allowing professionals to showcase qualifications, experience, and portfolios.
From your doc · 10. Ratings & Reviews
- creates a reputation system based on completed projects.
A
Trust panel and work history
RecommendedWhat TaskPro checked sits beside the work and reviews.
Doc check · 5 of 5 on screen
- builds trust
- by allowing professionals to showcase qualifications
- experience
- and portfolios
- creates a reputation system based on completed projects
B
Portfolio first
A big gallery first. Best for visual work.
Doc check · 5 of 5 on screen
- builds trust
- by allowing professionals to showcase qualifications
- experience
- and portfolios
- creates a reputation system based on completed projects
C
Credentials first
Qualifications and experience before the portfolio.
Doc check · 5 of 5 on screen
- builds trust
- by allowing professionals to showcase qualifications
- experience
- and portfolios
- creates a reputation system based on completed projects
09
Find Appropriate Projects
From your doc · 1. What is TaskPro?
- TaskPro is a digital platform focused on the Philippines that connects people seeking professional, project-based services with professionals looking for flexible work. Clients on the platform can post projects, look at the profiles and portfolios of professionals, get proposals, communicate with the service providers, and manage the projects, while professionals can display their qualifications, find appropriate projects, submit proposals, and develop their reputation by means of the work they have completed and the reviews they receive.
A
Feed with best matches
RecommendedBest matches, most recent and near you, one card per project.
Doc check · 1 of 2 on screen
- professionals can ... find appropriate projects
- submit proposals
B
Board
A compact table you can scan in seconds.
Doc check · 1 of 2 on screen
- professionals can ... find appropriate projects
- submit proposals
C
List and detail
The list on the left, the full project on the right. Like JobStreet.
Doc check · 2 of 2 on screen
- professionals can ... find appropriate projects
- submit proposals
10
Proposal & Quotation System
From your doc · 7. Proposal & Quotation System
- professionals can submit their rates, approach, and estimated completion time.
A
Simple quote
RecommendedPrice, approach and finish time, plus what the pro receives.
Doc check · 3 of 3 on screen
- professionals can submit their rates
- approach
- and estimated completion time
B
Quote with milestones
The price split into parts, each with its own days.
Doc check · 3 of 3 on screen
- professionals can submit their rates
- approach
- and estimated completion time
C
Three options
Basic, Standard and Premium; the client picks one.
Doc check · 3 of 3 on screen
- professionals can submit their rates
- approach
- and estimated completion time
11
Project-Based Hiring
From your doc · 8. Project-Based Hiring
- Enables clients to hire professionals for specific projects without permanent employment.
From your doc · 12. Optional Secure Payments
- facilitates payments between clients …
A
Proposal list
One card per proposal, with Message and Hire.
Doc check · 4 of 4 on screen
- Enables clients to hire professionals
- for specific projects
- without permanent employment
- facilitates payments between clients
B
Side by side
RecommendedQuotes in columns, lowest price and fastest finish marked.
Doc check · 4 of 4 on screen
- Enables clients to hire professionals
- for specific projects
- without permanent employment
- facilitates payments between clients
C
Inbox
Proposals on the left, the open one on the right.
Doc check · 4 of 4 on screen
- Enables clients to hire professionals
- for specific projects
- without permanent employment
- facilitates payments between clients
12
Project Management
From your doc · 11. Project Management
- lets users track deadlines, deliverables, project status, and completion.
From your doc · 9. Communication Tools
- provides messaging between clients and professionals.
From your doc · 10. Ratings & Reviews
- creates a reputation system based on completed projects.
From your doc · 12. Optional Secure Payments
- facilitates payments between clients …
A
Tabs
Milestones, Messages, Files and Payment, one tab each.
Doc check · 7 of 7 on screen
- lets users track deadlines
- deliverables
- project status
- and completion
- provides messaging between clients and professionals
- creates a reputation system based on completed projects
- facilitates payments between clients
B
Chat with project panel
RecommendedChat in the middle, milestones and payment always in view.
Doc check · 6 of 7 on screen
- lets users track deadlines
- deliverables
- project status
- and completion
- provides messaging between clients and professionals
- creates a reputation system based on completed projects
- facilitates payments between clients
C
Timeline
The whole project as one line, from posting to review.
Doc check · 7 of 7 on screen
- lets users track deadlines
- deliverables
- project status
- and completion
- provides messaging between clients and professionals
- creates a reputation system based on completed projects
- facilitates payments between clients
Your Picks
Saves as you go.