2024

HowNow

Transforming a cluttered L&D platform into an engaging,
user-centric experience.

Project Overview

Role

UI/UX Designer

Duration

3 months (April 2024 - June 2024)

Team

Design Team, Product Manager, Development Team

The Challenge

The existing HowNow L&D platform homepage was failing to engage users effectively,

creating barriers to learning and platform adoption

The existing HowNow L&D platform homepage was failing to engage users effectively, creating barriers to learning and platform adoption

Key Problem Identified

  1. 78% bounce rate from homepage visitors

  1. Cluttered interface with no clear visual hierarchy

  2. Poor content discoverability - users couldn't find relevant courses

  3. Lack of personalization - no tailored content recommendations

  4. Overwhelming information presented without prioritization

Business Impact

  • Low user engagement and course completion rates


  • Poor first impression affecting platform adoption


  • Increased support tickets for navigation issues

Research & Analysis

Competitive Analysis

I analyzed leading content platforms to understand engagement strategies:

User Journey Mapping

While we didn’t follow a formal research-design loop, the solution emerged from

collaborative feedback, user pain points, and real-world program data.

Design Process 🎨

Requirements Analysis

Collaborated with Product Manager to define:

  1. Primary user goals and pain points

  2. Business objectives and success metrics

  3. Technical constraints and opportunities

Collaborated with Product Manager to define:

  1. Primary user goals and pain points

  2. Business objectives and success metrics

  3. Technical constraints and opportunities

Key Requirements:

  1. 📈 Increase engagement through effective content showcasing

  1. 📝 Display critical information (tasks, deadlines) prominently

  2. 🎯 Maintain brand consistency while modernizing the interface

Key Requirements:

  1. 📈 Increase engagement through effective content showcasing

  1. 📝 Display critical information (tasks, deadlines) prominently

  2. 🎯 Maintain brand consistency while modernizing the interface

Requirements Analysis

Collaborated with Product Manager to define:

  1. Primary user goals and pain points

  2. Business objectives and success metrics

  3. Technical constraints and opportunities

Collaborated with Product Manager to define:

  1. Primary user goals and pain points

  2. Business objectives and success metrics

  3. Technical constraints and opportunities

Key Requirements:

  1. 📈 Increase engagement through effective content showcasing

  1. 📝 Display critical information (tasks, deadlines) prominently

  2. 🎯 Maintain brand consistency while modernizing the interface

Key Requirements:

  1. 📈 Increase engagement through effective content showcasing

  1. 📝 Display critical information (tasks, deadlines) prominently

  2. 🎯 Maintain brand consistency while modernizing the interface

Ideation and Exploration

Layout Concepts for Enhanced User Engagement

Layout Concepts for Enhanced User Engagement

Design Principles Established

✅ Visual Hierarchy

UI/UX Guide attention through strategic use of size, color, and spacing

✅ Familiar Patterns

Leverage user expectations from popular platforms

✅ Content Prioritization

Surface the most relevant information first

✅ Progressive Disclosure

Reveal information based on user needs and context

Design Principles Established

✅ Visual Hierarchy

UI/UX Guide attention through strategic use of size, color, and spacing

✅ Visual Hierarchy

UI/UX Guide attention through strategic use of size, color, and spacing

✅ Familiar Patterns

Leverage user expectations from popular platforms

✅ Familiar Patterns

Leverage user expectations from popular platforms

✅ Content Prioritization

Surface the most relevant information first

✅ Content Prioritization

Surface the most relevant information first

✅ Progressive Disclosure

Reveal information based on user needs and context

✅ Progressive Disclosure

Reveal information based on user needs and context

The Solution ✨

Design Strategy

Transform the homepage into an engaging, personalized learning hub that balances

content discovery with critical task management.

Key Design Decisions

1

Hero Section Redesign

  • Large, visually compelling banner showcasing featured content

  • Personalized recommendations based on user behavior

  • Clear value proposition and call-to-action

Hero Section Redesign

  • Large, visually compelling banner showcasing
    featured content

  • Personalized recommendations based on user
    behavior

  • Clear value proposition and call-to-action

1

2

Information Architecture

  • Prominent task/deadline section for immediate user needs

  • Categorized content sections for easy exploration

  • Quick access to frequently used features

Information Architecture

  • Prominent task/deadline section for immediate user
    needs

  • Categorized content sections for easy exploration

  • Quick access to frequently used features

3

Visual Design System

  • Modern, clean aesthetic aligned with learning context

  • Consistent component library for scalability

  • Accessible color contrast and typography

Visual Design System

  • Modern, clean aesthetic aligned with learning context

  • Consistent component library for scalability

  • Accessible color contrast and typography

4

Responsive Design Approach

  • Desktop: Full hero experience with detailed content cards

  • Tablet: Adapted layout maintaining visual hierarchy

Responsive Design Approach

  • Desktop: Full hero experience with detailed content cards

  • Tablet: Adapted layout maintaining visual hierarchy

Result

Hero Section Redesign


  • Large, visually compelling banner showcasing
    featured content

  • Personalized recommendations based on user
    behavior

  • Clear value proposition and call-to-action

1

2

Information Architecture


  • Prominent task/deadline section for immediate user
    needs

  • Categorized content sections for easy exploration

  • Quick access to frequently used features

3

Visual Design System


  • Modern, clean aesthetic aligned with learning context

  • Consistent component library for scalability

  • Accessible color contrast and typography

4

Responsive Design Approach

  • Desktop: Full hero experience with detailed content cards

  • Tablet: Adapted layout maintaining visual hierarchy

Expected Impact & Success Metrics 📈

Project Improvement

  • 50% reduction in bounce rate through improved engagement

  • 30% increase in course discovery and enrollment

  • 25% improvement in task completion rates

  • Enhanced brand perception of the platform

  • 50% reduction in bounce rate through improved engagement

  • 30% increase in course discovery and enrollment

  • 25% improvement in task completion rates

  • Enhanced brand perception of the platform

Success Metrics to Track 💯

  • Time spent on homepage

  • Click-through rates on featured content

  • Task completion from dashboard

  • User satisfaction scores

Reflection ✨

This project was a great learning experience for me as it pushed me to think beyond just designing screens and really focus on solving real user problems. I learned how important it is to back design decisions with research, and how small changes in user flow can make a big difference in overall usability.

One of the biggest challenges we faced was in developing the banner cards, especially implementing the gradient effect along with both horizontal and vertical scrolling. Working closely with developers helped me understand the technical constraints better, and through constant collaboration and iteration, we were able to make it work without compromising the design intent.

Overall, this project not only strengthened my design process but also taught me the value of cross-functional teamwork. It reminded me that good design is not just about visuals but about creating experiences that are both usable and feasible.

Have a project idea in mind? Let’s chat about how we can bring it to life— virtually, from anywhere in the world!

Book a short call

Back to top

Have a project idea in mind? Let’s chat about how we can bring it to life— virtually, from anywhere in the world!

Book a short call

Back to top

Have a project idea in mind? Let’s chat about how we can bring it to life— virtually, from anywhere in the world!

Book a short call

Back to top

Back