Project Overview

puzzale icon

Problem Statement

  • Users have no way to access business information online.
  • Need for clear navigation and usability.
  • Must create effective site structure and flow.
target icon

Goals & Objectives

  • Launch first online presence for the business.
  • Ensure smooth experience across devices.
  • Establish clear user flow and content hierarchy.
light bulb icon

Solution

  • Built complete website from scratch.
  • Manual testing on real devices for usability.
  • Created wireframes and high-fidelity prototypes in Figma.
Exit

Key Responsibilities

1

Research

  • Competitor analysis
  • Design & SEO trends

2

Analyse

  • Identify gaps & trends
  • User flow review
  • Content hierarchy

3

Prototype

  • Wireframes creation
  • Interactive prototype
  • User testing

4

Design

  • UI layout in Figma
  • High-fidelity visuals

User Testing

User Experience Evaluation

Pre-Launch

  • Nav
  • Responsive
  • Buttons
  • Usability
  • Devices
  • Sections
  • Review
✔

Why

Ensure smooth experience across devices and catch usability issues early.

✔

When

Post-development and pre-launch to validate final designs.

✔

What & Where

Navigation, responsiveness, buttons tested on hero, services, contact.

✔

How

Manual testing using real devices and Chrome DevTools.

✔

Who

Independently performed and reviewed by me.

Competitive Research

Who

All wireframes and layouts were developed and finalized by me.

Why

To define the website’s structure, content hierarchy, and navigation before design.

When

Created after research and content planning to establish a foundation for design.

Where

Applied to main layout covering hero, services, and contact sections for consistent flow.

Why & How

Created low-fidelity layouts in Figma focusing on user flow and content hierarchy.

Wireframes

Low-fidelity wireframe showing basic layout, content structure, and initial UX flow before visual design
High-fidelity UI mockup displaying final polished design, brand styling, colors, and refined user experience

Prototype

Concept Realization

When

After wireframes

Process

Created after wireframes to visualize the site.

Why

Visualize journey

Purpose

Help client understand design and make decisions.

What

High-fidelity layouts

Tool

Built in Figma with content and interactions.

How

Tested flows

Method

Lean methods with usability testing.

Where

Single-page layout

Coverage

Covered hero, services, and contact sections.

Who

Designed by me

Owner

Full ownership of prototype creation and testing.