Digital Product Designer • UX • UI • Design Systems • Code

Impact

Bounce rate
Decreased
Conversion rate
Incresead
New visitor conversions
Incresead
Time on site
Incresead

Introduction

At The Eco Experts, we comprise a team of environmentally-conscious writers who specialize in providing precise guidance on lowering energy expenses and minimizing carbon emissions, all while enhancing the comfort and efficiency of your home. With our London-based team operating since 2009, we have assisted numerous individuals throughout the UK in adopting eco-friendly practices that are both cost-effective and energy-efficient. By staying abreast of the latest grants, technologies, and trends, we offer you the most optimal choices. We understand the significance of your home and are dedicated to helping you optimize its performance for the betterment of both yourself and the planet.

The hypothesis

Due to the high bounce rate of approximately 85% on our homepage, it is evident that there is a lack of trust among many users towards The Eco Experts. By implementing a more effective design that instills confidence in our brand, we can expand our reach and assist a greater number of individuals with our expert information.

The solution

Following the identification of the friction points, I designed the solution to address them.

◍

User interface (UI)

The existing website has a cluttered and outdated UI. The new design aims to create a clean and modern look that aligns with current design trends, improving visual appeal and usability

◍

Navigation and information architecture

The current website's navigation structure is complex and confusing for users. The redesign will focus on streamlining the navigation, creating clear and intuitive paths for users to find products and information easily

◍

Mobile responsiveness

With the growing number of users accessing the website through mobile devices, it's essential to prioritize mobile responsiveness. The redesign will ensure that the website adapts seamlessly to different screen sizes, providing an optimal browsing experience across devices

◍

Product presentation

The redesign will showcase high-quality product images, provide detailed descriptions, and incorporate customer reviews to build trust and help users make informed purchase decisions

My design process

A systematic and creative approach to solving problems and creating solutions that meet specific objectives:

◍

Competitor Analysis:

I evaluate and analyze competing products or services in the market. This analysis helps identify industry standards, understand user expectations, and identify potential gaps and opportunities.

◍

Discovery:

In this phase, I gather information and insights about the user needs, define project goals and objectives, and identify the target audience. This stage involves collaborating with stakeholders and understanding the project's requirements, constraints, and vision.

◍

Sketching:

Sketching involves ideation and conceptualization. I sketch rough ideas and concepts to explore different possibilities and visual directions. It's a creative phase that encourages free-flowing ideas and enables quick iteration.

◍

Wireframing:

The process of creating low-fidelity visual representations of the design. It focuses on layout, information architecture, and the overall structure of the interface focusing on the user experience and functionality.

◍

User testing:

Gathering feedback from real users to evaluate the design's effectiveness. I create prototypes or interactive mockups and observe how users interact with them. User testing helps uncover usability issues, validates design decisions, and ensures the final product meets user needs.

◍

Development:

The development phase involves translating the design into a functional product. I work closely with developers to implement the visual elements, interactive features, and backend functionality.

◍

Design QA:

In Quality Assurance I ensures the design is faithfully implemented and meets the established standards. Designers review the developed product against the original design specifications, ensuring visual consistency, usability, and adherence to brand guidelines.

Wireframing and pattern library

Wireframing is a visual representation technique used in the early stages of the design process. It involves creating simple, low-fidelity outlines or sketches that depict the structure, layout, and functionality of a website or application.