UI/UX Product Design Case Study

Redesigning Planet Systems into a modern digital hub for products, trust, and growth

Planet Systems is a software solutions company in Uganda. We redesigned their legacy website to align with brand identity, improve information architecture, and showcase product value across education, enterprise, and managed services.

Role: Product Designer + Front-End Contributor Timeline: 10 weeks Tools: Figma, Adobe XD, Photoshop, Illustrator, Notion
View outcomes
Redesigned Planet Systems home page showing hero, overview, industry tabs, and a modern blue-themed layout.
Final home page concept used as the anchor for the visual direction.

Quick Facts

Client
Planet Systems, Uganda
Team
Product designer, developers, stakeholder leads
Goal
Modern brand-aligned website with dedicated product storytelling
KPIs
Engagement depth, product page visits, qualified inquiries

Problem & Opportunity

The previous website did not reflect Planet Systems' evolving product portfolio or visual identity. Key product lines lacked dedicated pages, navigation was shallow, and information architecture made it difficult for decision-makers to quickly evaluate solutions.

The opportunity was to build a scalable web foundation that positions Planet Systems as a trusted innovation partner while improving clarity, discoverability, and conversion pathways for prospective clients.

Research Highlights

Stakeholder Interviews

Mapped business goals to user needs and identified page-level gaps across products, services, and resources.

Content Audit

Reviewed legacy pages and uncovered inconsistent narratives, missing product proof points, and weak call-to-action placement.

Competitor Benchmarking

Compared regional and global B2B technology websites to define clear structure, trust-building content patterns, and visual standards.

Personas

Procurement & Operations Lead

Needs: Fast clarity on service coverage, implementation support, and credibility.

Pain points: Generic pages, vague product differentiation, hard-to-find contacts.

School / Institutional Decision Maker

Needs: Product fit, evidence of outcomes, and implementation confidence.

Pain points: Missing product pages, fragmented information, unclear next steps.

Key User Flows

Flow 1: Discover Product Value

  1. Land on home page from search or referral.
  2. Navigate to products and compare options.
  3. Review product detail page and social proof.
  4. Submit inquiry through contextual CTA.

Flow 2: Validate Company Credibility

  1. Open About page to understand mission and track record.
  2. Review team, awards, and office presence.
  3. Navigate to Contact and schedule a meeting.
Website sitemap showing structured sections across home, products, solutions, services, resources, and contact.
Final sitemap used to align navigation and page hierarchy.

Wireframes & Iterations

Wireframe-inspired service card exploration with selectable states.
Home page wireframe with updated navigation and content hierarchy.
Solutions page draft used to test industry segmentation and content density.
Product page wireframe with updated layout and content hierarchy.
Support page draft with structured support pathways and segment blocks.
About page wireframe with updated content and layout.

High-Fidelity Screens

About page high-fidelity screen showing mission, success pillars, and event highlights.
About page with storytelling and social credibility.
Contact page with meeting form, careers section, and contact information blocks.
Contact page designed for conversion and hiring visibility.
Resources page with downloadable materials, blog cards, and FAQ area.
Resources page balancing downloadable content and thought leadership.
Product detail page for TELA showing features, app previews, and related projects.
Product page template applied to TELA for consistent storytelling.

Design System Snapshot

Color Tokens

  • Primary: #0a4ccf
  • Primary dark: #083598
  • Surface: #f4f7ff
  • Text: #17243a

Type Scale

  • Display: 2.25rem / 800
  • Heading: 1.5rem / 700
  • Body: 1rem / 400
  • Caption: 0.875rem / 500

Component Rules

  • Buttons: 12px radius, high contrast states
  • Cards: subtle shadow + consistent spacing scale
  • Icons: blue accent, always paired with labels

Results & Metrics

+43%

Increase in visits to product-specific pages during the first launch period.

+28%

Improvement in average session depth due to clearer navigation architecture.

+35%

Growth in meeting and inquiry submissions through prominent, repeated CTAs.

Learnings & Next Steps

Aligning content structure with user intent was as important as visual modernization. Prioritizing product discoverability and consistent narrative blocks significantly improved how quickly users understood Planet Systems' value.

Next, we plan to run continuous usability testing on key conversion journeys, expand product-level proof (case metrics, testimonials), and incrementally optimize SEO landing pages for high-intent search terms.