UI/UX CASE STUDY
ABOUT
Project Overview
I was tasked with designing a modern, e-commerce-ready business website for KPSE, a premium solar illumination company. The goal was to create a platform that reflected technical excellence, professionalism, and trust, while supporting a seamless shopping and browsing experience across all devices.
The design was inspired by the clean, product-centric style of Sunark.com, but tailored to elevate KPSE’s unique identity and technical strengths in solar innovation.
| Industry | Solar Technology & E-commerce |
| Project | KPSE.com |
| Year | 2025 |
Objectives:
- Design a fully responsive website (mobile, tablet, desktop).
- Incorporate e-commerce functionality including cart, quote requests, and product downloads.
- Develop a user dashboard with login/signup and download history.
- Showcase KPSE’s technical strengths and solutions through modular, visual layouts.
- Integrate video-enabled hero sections and SEO-friendly structure.
Challenges & Solutions:
- Combining e-commerce with inquiry-based products: Designed dual-CTA cards and intuitive toggles between “Add to Cart” and “Make an Enquiry”
- Maintaining contrast using brand orange on light backgrounds: Used graphite (#2E2E2E) for text and contrast-rich UI, reserving orange for buttons and accents.
- Structuring technical content for SEO: Applied semantic headings and structured layout blocks for performance and discoverability.
DESIGN PROCESS
Discovery & Strategy
- Conducted a competitive UI audit (notably Sunark.com).
- Held discussions with stakeholders to clarify target personas, KPSE’s value propositions, and functional priorities.
- Identified user segments:
– Direct B2B customers
– Engineers/consultants browsing product specs
– Visitors requesting quotes or company credentials
Information Architecture:
- Established semantic heading structures for SEO and readability.
- Included alternate CTAs like “Enquire Now” and “Request Quote” for non-purchasable items.
- Designed a clear site map to group pages.
User Flow:
Style Guide:
Font Used
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
Times New Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
Font Used
#F99F38
#2E2E2E
#000000
#FAFAFA
#585757
UI Design:
Mobile view:
