Defining Goals

The platform faced usability and engagement challenges due to complex visualizations, unclear content segmentation, ineffective interactions, and a lack of cohesive brand identity. Users struggled to interpret intricate diagrams, navigate a dual-purpose webpage, and make informed decisions due to inconsistent UI elements.

1.Simplify Data Visualization

• Convert intricate diagrams into clear, scannable visualizations that enhance comprehension and engagement.
• Ensure process flowcharts are structured to highlight essential functions, steps, and stakeholder interactions

2.Improve Content Relevance & Navigation

• Redesign the dual-purpose webpage to distinctly cater to buyers and sellers, minimizing confusion.
• Optimize content structure and layout to guide users toward relevant information efficiently.

3.Enhance User Experience & Interactivity

• Rework interactive elements to provide a more intuitive and user-friendly navigation experience
• Implement user-centered design principles to improve accessibility and engagement across all touchpoints

4.Establish a Cohesive Brand Identity

• Redefine UI elements to create a consistent, dynamic, and accessible design..
• Ensure the interface supports effective decision-making and enhances data comprehension for all users, including those in remote locations.

Problem statement

The platform's complexity hindered usability, making data visualization, content relevance, and UI cohesion key challenges to address.

Our Approach to designing

To enhance usability, clarity, and engagement, we restructured complex service maps, refined content relevance, simplified navigation, and established a cohesive brand identity. By aligning with user mental models, incorporating intuitive UI patterns, and adopting a conversational UX approach, we improved accessibility and decision-making while fostering user trust and satisfaction.

1. Simplifying Complex Service Maps

• Divided intricate service maps into smaller, digestible sections spread across the webpage.
• Established a clear information hierarchy to align with the mental models of buyers and sellers
• Developed multiple iterations of data visualizations and infographics to ensure clarity while preserving depth of information.
• Improve user engagement and conversion by making information easier to scan and understand.

2.Improving Content Relevance & Navigation

• Mapped out separate user journeys for buyers and sellers to pinpoint confusion points.
• Implemented a tabbed structure for content division, making navigation effortless.
• Adopted conversational UX writing to address user queries proactively, improving engagement and trust.
• Ensured global inclusivity by using relatable and user-friendly language, reducing user frustration.

3.Establishing a Cohesive & Dynamic UI

• Conducted competitive analysis to identify UI patterns that enhance scannability and engagement.
• Crafted a monochromatic UI that emphasized the brand’s primary blue color, reinforcing identity.
• Incorporated dynamic yet minimalistic design elements to keep the interface visually appealing while ensuring accessibility.
• Enhanced decision-making and usability, leading to increased user satisfaction and positive feedback.

4.Enhancing User Experience with Visual & Interactive Elements

• Integrated interactive elements that simplify navigation and improve user engagement.
• Designed a lightweight and accessible interface to accommodate users in remote locations.
• Implemented structured, scannable layouts that improve information accessibility.
• Ensured consistency across all touchpoints, reinforcing a seamless and user-friendly experience.

UI Explorations

Design Approach & Style Guide

• Since this was a one-page website, we created a streamlined style guide instead of a comprehensive design system, ensuring efficiency while maintaining visual consistency.
• The style guide included:
• • A detailed color palette
  • Typography documentation
  • Graphic assets, including images and illustrations
  • An icon library
• To facilitate implementation, we provided the development team with a full walkthrough of the designs.

Development Challenges & Collaboration

• The website was built using Thyssenkrupp’s proprietary web builder software, which came with certain technical limitations.
• To navigate these constraints effectively, we worked closely with the development team, ensuring the final build remained as true to the design vision as possible.