DESIGN BRIEF
Creating a marketing website for VerdantHR
The objective was to design a marketing website for an HR management platform. The challenge wasn't building the product itself, but presenting a complex enterprise system in a way that quickly communicates its value, features, and credibility.
UNDERSTANDING THE DOMAIN
Understanding Modern HR Platforms
Before designing, I studied how modern HR platforms communicate their value across enterprise websites to understand common expectations and content hierarchy.
USER ASSUMPTIONS
Primary Audience
1
HR Managers
Work force visibility
Team Management
Reports
Engineering managers
Utilization
Projects
Delivery
2
Leadership
KPIs
Budget
Resource Planning
3
These are assumptions based on the project brief.
COMPETITIVE ANALYSIS
Primary Audience
These are assumptions based on the project brief.
DESIGN GOALS
Shaping the Experience to Reduce Booking Friction
Reduce complexity
Build trust
Increase clarity
VISUAL DIRECTION
Creating a Fast and Minimal Booking Entry Point
The home screen was designed to help users begin ride booking with minimal interaction effort.
Key Decisions:
•
Large destination search field for immediate action
•
Saved locations for quicker access
•
Recent destinations to reduce repetitive input
•
Spacious layout for accessibility and faster scanning
•
Bottom navigation kept minimal to reduce distractions
Outcome:
The experience supports quicker ride initiation while maintaining visual clarity and usability.
DESTINATION SEARCH
Reducing Typing Effort During Location Selection
The destination flow focuses on helping users search and confirm routes quickly.
Key Decisions:
•
Structured pickup and destination hierarchy
•
Recent searches and saved places for reduced effort
•
Minimal visual distractions during search
•
Map confirmation to improve route confidence
Outcome:
The flow simplifies location selection while supporting faster task completion.
RIDE SELECTION
Making Ride Comparison Faster and Easier
The ride selection experience was designed to improve pricing clarity and reduce comparison friction.
Key Decisions:
•
Consistent ride cards with reusable structure
•
Strong visual hierarchy for fare visibility
•
ETA and seating capacity included within cards
•
Clear selected states for interaction feedback
•
Spacious spacing for readability
Outcome:
Users can compare ride options more quickly and confidently.
BOOKING CONFIRMATION
Increasing Trust Before Final Booking
The confirmation screen focuses on reducing uncertainty before users confirm rides.
Key Decisions:
•
Clear pickup and drop visibility
•
Payment method visibility before confirmation
•
Transparent fare breakdown
•
Strong primary CTA hierarchy
•
Reduced visual clutter
Outcome:
The screen improves booking confidence through clarity and transparency.
LIVE DRIVER TRACKING
Improving Real-Time Clarity and Passenger Trust
The tracking experience was designed to feel clear, safe and reliable during live rides.
Key Decisions:
•
Driver information prioritized for quick recognition
•
Clear ETA visibility
•
Simple call and message options
•
Minimal interface distraction during tracking
•
Safety toolkit access included within the reach
Outcome:
The experience improves trust and communication during active rides.
TRIP COMPLETION
Designing a Smooth and Transparent Ride Completion Flow
The completion flow focuses on closing the experience with minimal friction.
Key Decisions:
•
Transparent fare breakdown
•
Payment confirmation visibility
•
Simple review interaction
•
Invoice download accessibility
•
Minimal completion steps
Outcome:
The flow creates a smoother and more trustworthy trip-ending experience.
DESIGN SYSTEM
Building a Consistent and Scalable Interface
To maintain consistency across the booking journey, I created a lightweight design system focused on clarity, usability, and production readiness.
Colour Systems
A minimal color palette was used to establish hierarchy and guide user attention.
• Raspberry Pink
Primary actions and active states
• Neutral Grays
Content hierarchy and supporting information
• Green, Orange, Red
Success, warning, and error feedback
Typography
A structured typography scale was created to support fast scanning and readability.
• H1 / H2
Screen titles and section headings
• Price Bold
Fare information
• Title Medium
Ride names and card titles
• Body
Supporting content
• Caption
Labels and navigation elements
Components
Reusable components were designed to ensure consistency across screens.
•
Ride Cards
•
Buttons
•
Status Chips
•
Search Fields
•
Action Cards
OUTCOME AND REFLECTION
Creating a Cleaner and More Confident Ride-Booking Experience
RAP was designed as a production-focused mobile ride-booking experience that prioritizes usability, speed, and visual clarity across the passenger journey.
The project helped strengthen:
•
UX decision-making
•
Mobile interaction design
•
Design system thinking
•
Production-ready UI structuring
•
Real-world usability considerations
The final experience focuses on helping passengers complete bookings faster with greater confidence and reduced friction.
PROTOTYPE
Explore the Interaction Flow
A clickable prototype was created to demonstrate how users move through key decision points in the experience.