Website Redesign

SERVICE OFFEREDUI/UX

INDUSTRY TARGETEDEducation

TECHNOLOGY USEDFigma, UNDRAW, FREEPIK

Background, Goals and Focus Areas

This project is a strategic redesign of the Lettercube website, created to clearly communicate Lettercube's role as an enterprise-grade language translation platform serving multiple industries worldwide while strengthening its positioning. The redesign focuses on clearly communicating Lettercube's global reach, industry coverage, and credibility through a structured, modern layout.

We moved forward with a minimal redesign approach to maintain brand consistency, reduce cognitive load, and ensure clarity for enterprise users. The goal was to highlight value, trust, and scale without visual noise, allowing key messages—such as industry expertise, compliance, and global connectivity—to stand out, while also maintaining the design language of the Lettercube.

The redesign was executed in Figma using a structured design system, reusable components, and clear layout hierarchy. Thoughtful use of color, typography, motion concepts, and semantic illustrations ensures consistency, scalability, and an experience that supports both business goals and user understanding.

Figma

Primary tool for UI design, component system, Auto Layout, and interaction concepts.

Figma Prototyping

Used to demonstrate navigation flow and key interaction behaviors.

Figma Smart Animate

To simulate transitions and conceptual animations.

UNDRAW

Minimal, semantic illustrations aligned with the brand tone.

FREEPIK

Used for abstract backgrounds and main visual elements and illustrations needed.

Approach, Architecture &
Key Decisions

A minimal, enterprise-focused website redesign aligned with the existing design language.

Approach Used for Design

The layout is built on reusable components and consistent section patterns, allowing the design to scale across industries and future content. Information hierarchy is intentionally progressive: high-level value first, followed by proof points such as metrics, testimonials, and case studies. Motion and visual cues are used as supporting mechanisms to keep the user's attention and keep them engaged on the website.

What we designed or implemented for the client

Deliverables include:

A redesigned website structure aligned with Lettercube's existing design language.
Center-aligned hero section with multilingual animation and global map concept.
Industry-focused sections with semantic illustrations.
Enterprise challenge storytelling using stacked, scroll-based card concepts.
Trust-building components including metrics, testimonials, and case studies.
A conversion-focused CTA section aligned with the overall visual system.

Key architectural or design choices

Green-toned minimal illustrations are consistently used to support a calm, professional visual tone. Green represents trust, growth, and clarity; blue represents communication, reliability, and global connection. Together, these colors symbolize Lettercube's core purpose: enabling seamless global communication through language.

Design principles include minimalism and clarity, consistency in illustration tone and color with balanced visual rhythm through soft blues and greens, global accessibility and universal design language, bento-style grids to organize complex industry information, and abstract backgrounds to differentiate key sections without breaking brand consistency.

Workflow Design

Context & Alignment: Reviewed the existing Lettercube design language, business goals, and target audience to ensure the redesign respected brand equity while improving clarity.

Information Architecture: Mapped the content flow from awareness to conversion, defining section hierarchy and user intent at each stage.

Low-Fidelity Structuring: Established layout patterns and content blocks before visual refinement to validate structure and flow early.

High-Fidelity Design in Figma: Built screens using reusable components, Auto Layout, and consistent spacing rules to ensure scalability and maintainability.

Motion & Interaction Concepts: Defined animation intent (e.g., scroll-based stacked cards) conceptually within Figma, acknowledging technical constraints while clearly communicating interaction behavior.

Iteration & Refinement: Continuously refined hierarchy, spacing, and visual balance to improve readability, trust signals, and conversion clarity.

Outcomes & Impact

Design section breakdown - Solutions offered after overviewing the requirements

Hero Section

The hero section is designed with a center-aligned layout to create a clean, minimal layout that features an animated "Hello" in different languages, reinforcing Lettercube's identity as a multilingual platform. A subtle world map illustration in the background highlights Lettercube's mission—connecting the entire world through language, enabling global communication and cross-border collaboration. The combined animation and world map deliver a modern, tech-forward tone that immediately communicates the brand's global reach.

Industries Section

Industries are displayed in a bento-grid layout, creating a modern, modular and intuitive browsing experience. The section highlights various industries served by Lettercube using a balanced, structured layout with UNDRAW minimal illustrations for clarity, semantic consistency, and universal readability. Illustration color tone is kept in green hues to maintain harmony across the page; blue abstract shapes are introduced to bring contrast and visual interest.

Solving Enterprise Challenges Section

Includes three stacked cards that visually represent how Lettercube addresses key enterprise needs. Designed with scroll-based animation logic in mind (though limited in Figma), showcasing conceptual motion and modern interaction. The animated-card concept adds depth, innovation, and a more dynamic storytelling flow.

Client Testimonials & Case Studies

Showcases brand logos, real-world testimonials, and linked case studies to build authenticity. Layout is clean and minimal, keeping the user's focus on client voices and proof of excellence.

Final Call-to-Action (CTA)

Avoided using the system's primary blue button color, as blue already appears frequently in illustrations. Instead, the CTA uses a custom abstract pattern background, creating distinction without breaking the theme. The CTA aligns visually with the abstract elements used throughout the site while still drawing attention.

Design Operational improvements

Introduced a component-driven layout system, reducing future design and iteration. Standardized section patterns for industries, metrics, and testimonials for easier content updates. Created scalable design structures for new industries and services. Improved content clarity and hierarchy. Established consistent illustration and color usage to ensure visual reliability across pages.

Extensions / Future Work

Designer Growth & Learnings

Improved decision-making around when to redesign vs. when to preserve existing patterns. Deepened understanding of enterprise UX expectations, including trust, compliance, and scalability. Enhanced skills in aligning visual design with business strategy rather than aesthetics alone.

What Could Be Improved from a Design Perspective

Conduct usability testing with enterprise users. Explore deeper personalization for industry-specific user journeys. Expand motion concepts into fully prototyped micro-interactions.

Next Design Opportunities

Create industry-dedicated microsites and existing website templates with tailored messaging and visuals. Introduce an interactive trust center for compliance.