Challenge

Strengthening the brand integrity and navigation of a diversified corporate website requires in depth understanding of the company, their products terminologies and website structure.

The organisation’s long history and diverse product offerings resulted in the existence of multiple microsites, each developed individually to address specific needs. Over time, this led to opportunities for enhancing and aligning the digital presence more closely with the overall brand. Without a centralised CMS, content updates required a manual approach, which presented challenges in ensuring consistency and efficiency across the sites.

Additionally, their product pages presented with room for improvements by enriching the key details and descriptions relevant to customers, enabling more informed decisions without the need for additional inquiries. These challenges presented a valuable opportunity to refine the digital experience, strengthening the brand’s presence and improving content accessibility for users. How can we maintain and improve the integrity of the deeply rooted brand through modern, unified and scalable designs that would eventually become the digital guide that attends to users needs rather than just a product repository?

THE PLAN

Building a cohesive digital experience and reinforcing brand consistency through defined design principles and scalable solutions.

To address the fragmented branding and content inconsistencies, the plan centered around strengthening right down to the core, which is the brand’s identity by clearly defining the key design principles that would serve as the guiding framework, or North Star, for all digital assets. This focus allowed the team to create a visual language that resonates with users and reinforces brand trust.

Moreover, understanding users’ needs for detailed and accessible product information allowed us to create a more intuitive experience, reducing the need to enquire for straightforward details. Scalability was a key priority too, ensuring that as the brand evolves, the digital experience can grow without losing its coherence. This positions the brand for long-term growth while maintaining consistency and relevancy.

process: design principles

Defining a unified design principles implementation as a guide for all digital designs.

The team collaboratively established cohesive design principles that served as a unified guide for all design efforts to ensure consistency across various design elements. The process began by identifying key principles that reflect Sumitomo Electric’s core brand values. After finalising that with the team and stakeholders, we followed with how that would be translated into designs. I meticulously detailed down how these principles could be visually and functionally embodied within the designs, from imagery to layout and tone of language.

process: atomic design system

Establishing a scalable component library system with controlled flexibility for efficient and seamless global adaptation.

With a focus on scalability and flexibility, the team decided on having atomic component libraries and page templates as part of the deliverables. The clients could choose among the available templates for products, microsites and pages with similar content type instead of having to create new ones. Components could also be hidden whenever necessary.

The idea is having controlled flexibility as the project and website progressed. The updates must adhere to the set constraints that contributes to the overall strategy. I played a key role in managing the system through each sprint cycle, ensuring seamless adaptability, while upholding consistency across all touch points to support a unified global brand experience.

process: Inverted pyramid content structure

Structuring content to guide users from key information to in-depth understanding for intuitive decision-making through logical progression.

By adopting an inverted pyramid structure, the top of the page was dedicated to the most important product information, ensuring that users could quickly understand the key features and benefits. As users explored further down the page, they encountered progressively more detailed and secondary information, allowing for a natural flow that matched the user’s intent and interest level.

By structuring content in this way, we not only captured attention quickly but also guided users through a logical journey—from initial awareness and education to deeper engagement and, ultimately, a well-informed decision. This approach streamlined navigation, increased product comprehension, and supported user goals effectively across all touch points.

Outcome

A more connected digital and brand experience of Sumitomo Electric website with robust components and templates, aligned on a user-focused content strategy.

Impact

• Guarding every design and functional actions with the ‘North Star’ formed, creating a seamless brand integrity and prioritisation.
  ‍

• Transforming the SEI Spirits into a thriving, scalable and actionable design framework and system that provides clear, practical guidelines for implementation and growth.
  ‍

• Creating high-functioning pages and faster time-to-market for new features and updates.