Website redesign

Project Context

Celco's existing "CELCO® STRUCTOTERM" web page presented the following challenges:

• Information Overload: Content was dense, overwhelming users with too much text and visual clutter.
• Unclear Hierarchy: It was difficult to determine the most important information or the intended user journey.
• Outdated Design: The page's aesthetics felt dated, failing to reflect Celco's brand identity.

Goal

The redesign aimed to transform the "CELCO® STRUCTOTERM" page into a user-friendly, visually appealing destination that effectively communicates key messages and guides users towards desired actions.

Decision-Making Process

User Research:

• Target Audience Identification: I defined the primary user groups who would visit the "CELCO® STRUCTOTERM" page and their specific needs.
• User Surveys and Interviews: I gathered feedback on the existing page's pain points and desired improvements.
• Competitive Analysis: I analyzed how competitors structured similar web pages for inspiration.

Design Principles:

• Negative Space: I strategically used white space to create a clean, uncluttered layout that allows content to breathe. This enhances readability and guides the user's eye.
• Typography: I chose a legible typeface with a clear hierarchy of headings, subheadings, and body text. This hierarchy not only aids visual appeal but also improves scannability.
• Color Palette: I updated the color scheme to align with Celco's brand guidelines, using color to highlight important elements, create visual interest, and evoke desired emotional responses (e.g., trust, excitement).

Wireframes and Prototypes:

• Low-Fidelity Wireframes: I sketched basic layouts to explore different content arrangements and navigation options.
• High-Fidelity Wireframes: These detailed wireframes solidified the page structure, content placement, and user flow.
• Interactive Prototypes: I created clickable prototypes to simulate the user experience, allowing me to test the effectiveness of my design decisions.

User Testing and Iteration:

• Usability Testing: I observed real users interacting with the prototype, gathering feedback on navigation, clarity, and overall satisfaction.
• Iterative Refinement: Based on user feedback, I iterated on the design, adjusting layout, content, and interactions until I achieved an optimal user experience.

Design Rationale

Every design decision was rooted in improving the user experience:

• Clear Navigation: A simplified navigation menu with descriptive labels ensures users can easily find what they need.
• Visually Engaging Content: I used visuals (images, icons, charts) to break up text and enhance understanding.
• Call-to-Action: Prominent, strategically placed CTAs guide users toward conversion goals (e.g., requesting a quote, downloading technical specifications).
• Responsive Design: The page adapts seamlessly to different screen sizes, ensuring a great experience on desktop, tablet, and mobile devices.

Outcome

The redesigned "CELCO® STRUCTOTERM" page delivered the following results:

• Increased Time on Page: Users spent more time exploring the page, indicating greater engagement.
• Improved Conversion Rates: The clear CTAs and streamlined user flow led to a higher percentage of users completing desired actions.
• Positive User Feedback: Surveys and user testing revealed a significant increase in user satisfaction and perceived ease of use.