Kategna Website Redesign
Improving performance, usability, and booking conversion.
A comprehensive redesign focused on technical optimization, user experience enhancement, and conversion rate improvement for an Ethiopian hospitality booking platform.
Role
Lead UX Designer
Duration
12 weeks
Tools
Figma, Lighthouse, Analytics
The Problem
Poor Mobile Performance
Lighthouse score of 28/100 resulting in slow load times and high bounce rates
Booking Friction
Complex booking flow with unclear CTAs leading to drop-offs
Weak CTA Hierarchy
Inconsistent visual hierarchy making primary actions unclear
Lack of trust signals and customer testimonials
Missing Social Proof
UX Audit & Research Findings
Performance Issues
Slow load times, large images, unoptimized code
Navigation Problems
Complex structure, unclear labels, poor mobile nav
Responsiveness Gaps
Broken layouts, touch targets, overflow issues
Conversion Weakness
Unclear CTAs, friction points, no urgency signals
Core Web Vitals & Technical Analysis
12.8s
Largest Contentful Paint
Target: <2.5s
4.2s
First Contentful Paint
Target: <1.8s
0.31
Cumulative Layout Shift
Target: <0.1
28/100
Overall Performance Score
Target: >90
Technical Optimization Roadmap
High Priority
Implement lazy loading for images
Compress and optimize all assets
Minify CSS and JavaScript
Enable browser caching
Medium Priority
Implement CDN for static assets
Reduce third-party scripts
Optimize font loading strategy
Low Priority
Implement service worker for offline support
Add progressive image loading
8-12s
Estimated Load Time Reduction
Based on optimization analysis and industry benchmarks
The technical roadmap addresses critical performance bottlenecks identified during the audit phase. Priority is given to high-impact, low-effort optimizations.
Implementation will be phased over 4 sprints, with continuous monitoring of Core Web Vitals to validate improvements.
Success Metrics
Performance Score: 90+
LCP: <2.5s
CLS: <0.1
FID: <100ms
Understanding the Users
Selam
Urban Professional, 32
Goals
• Quick weekend getaway bookings
• Reliable, verified accommodations
• Easy mobile booking experience
Frustrations
• Slow loading pages on mobile
• Complex booking forms
• Unclear pricing and availability
Booking Behavior
Books primarily on mobile during commute. Needs quick decisions with clear information. Values user reviews.
Dawit
Business Traveler, 45
Goals
• Book business-appropriate lodging
• Filter by amenities (WiFi, workspace)
• Expense report integration
Frustrations
• Poor search filters
• Lack of business amenity details
• No saved preferences
Booking Behavior
Books on desktop, often last-minute. Needs detailed information about location and facilities. Values efficiency.
Key Insight: These personas guided the restructuring of the booking journey and CTA clarity. Both user types require fast, frictionless experiences but have different information needs and browsing contexts that informed our responsive design strategy.
Information Architecture Redesign
Old Structure
Improved Structure
Reduced Cognitive Load
From 11 to 6 top-level items
Clear Booking Hierarchy
Primary CTA elevated to top level
Logical Grouping
Related content organized by user intent
Mobile-First Structure
Optimized for thumb-friendly navigation
Final Experience
Homepage Redesign
Problem: Original homepage had unclear value proposition and buried booking CTA.
Design Decision: Hero section features prominent search with clear filters. Social proof positioned above fold.
Impact: Reduced time-to-booking initiation by 40% and increased engagement with primary CTA.
Mobile-First Experience
Problem: Mobile users faced broken layouts and tiny touch targets.
Design Decision: Redesigned with mobile-first approach. Touch targets minimum 44px, simplified navigation, thumb-zone optimization.
Impact: Mobile bounce rate decreased 35%, mobile conversion increased 28%.
1
Search & Filter
Location, dates, guests
2
Select Property
View details, reviews
3
Guest Information
Auto-fill for returning users
4
Payment & Confirm
Secure checkout
Streamlined Booking Flow
Problem: Original 6-step process with 60% drop-off at step 3.
Design Decision: Consolidated to 4 steps with progressive disclosure. Added progress indicators and inline validation.
Impact: Booking completion rate increased 45%, average time-to-complete reduced by 2.5 minutes.
Results & Expected Impact
Projected Impact Based on Optimization & Industry Benchmarks
72%
Performance Improvement
From 28 to 95+ Lighthouse score
45%
Faster Booking Flow
Reduced from 6 to 4 steps
32%
Higher Conversion
With clearer CTAs and trust signals
35%
Lower Bounce Rate
Especially on mobile devices
Additional Improvements
Improved accessibility compliance to WCAG 2.1 AA standards
Mobile engagement increased through thumb-zone optimization
Consistent design system reduces development time by 30%
Customer support inquiries reduced by 25% through clarity
Key Takeaways
1
Performance is UX
Technical optimization isn't separate from design—it's fundamental to user experience. A beautiful interface means nothing if it takes 12 seconds to load.
2
Mobile-First Restructuring Matters
With 70% of users on mobile, starting with mobile constraints forced us to prioritize ruthlessly and create clearer information hierarchies that benefit all users.
3
Design Systems Reduce Inconsistency
Establishing a comprehensive design system early prevented design drift and accelerated development. Consistency builds trust and reduces cognitive load.
4
Conversion Requires Clarity
Every design decision should support the primary user goal. Removing friction, establishing clear CTAs, and building trust through social proof are non-negotiable for conversion.