Data-Driven redesign of the Ecomz website boosting conversion rates by aligning user and business needs

Executive Summary

Outcomes

1333%

Increase in conversion rates

95%

Sales team utilization rate

AA

WCAG compliance

Role and Responsibility

  • Project lead
  • UX/UI design
  • Front-end development
  • Project management
  • Art direction

Project Scope

  • Website redesign
  • Accessibility improvements
  • SEO strategy
  • Multi-language support
  • Hubspot integration for lead maangement

Business problem

Ecomz needed a marketing website that effectively represented its new branding and converted visitors into customers. User research revealed that the website was difficult to navigate, and lacked structure. These findings correlated with poor SEO, traffic, and conversion rates recorded in the analytic tools.

User problem

Users found the old website confusing and difficult to navigate, with inadequate content that didn't clearly address their pain points or showcase the platform's features and benefits. Our research found that users often left the website feeling overwhelmed. The platform is based in the MENA region, but it lacked Arabic language support, which made users feel hesitant about joining the platform.

Coordination with Marketing

Engaged in daily stand-ups with the marketing team to ensure that the brand's visual identity was consistent across the new website. I worked closely with the in-house designer to finalize the color palette, typography, and iconography, ensuring that all visual elements aligned with the strategic goals of enhancing brand recognition and user engagement.

Art Direction Management

Worked closely with the marketing team to set branding guidelines, develop visual assets, and ensure consistency across all touchpoints. Managed the art direction, ensuring the website's visual identity aligned with the company's brand.

Image showcasing the Demo Request page on desktop in English. The form is placed on the right side of the screen, and the explanatory text content on the left. Image showcasing the Demo Request page on desktop in English. The form is placed on the right side of the screen, and the explanatory text content on the left.
Image showcasing the Demo Request page on desktop in Arabic. The form is placed on the left side of the screen, and the explanatory text content on the right. Image showcasing the Demo Request page on desktop in Arabic. The form is placed on the left side of the screen, and the explanatory text content on the right.
Form explaining how form data is captured. Entered form data is first validated and assigned a form based on language, and then captured by an integration that forwards the data to Hubspot Form explaining how form data is captured. Entered form data is first validated and assigned a form based on language, and then captured by an integration that forwards the data to Hubspot

User-Friendly Design

Developed custom HubSpot forms to capture leads efficiently. This involved creating multiple versions of the forms (for both English and Arabic sites) that were language-responsive and included phone number validation. I also integrated tracking mechanisms to capture referral and original sources, ensuring accurate lead attribution and reporting. This resulted in savings of approximately $1250 per year.

Backend and Frontend Development Leadership

Oversaw the complete development lifecycle of the website. On the backend, I structured databases for the theme store and blog, ensuring they were dynamic and scalable. On the frontend, I implemented responsive designs and multilingual support, optimizing for both desktop and mobile users. I personally coded key components like the CSS for responsive design, JavaScript for dynamic content generation, and integrated third-party libraries such as Intl-Tel-Input for phone validation.

HubSpot Integration

Implemented a custom form setup integrated with HubSpot, including phone number validation and source tracking for better lead scoring and conversion tracking. This solution saved the company $1,250 annually by eliminating the need for a pricier subscription service that offered similar capabilities.

Theme Store Development

Developed a dynamic theme store by setting up a database of available themes, applying the appropriate tags and features, and creating a filtering system. This setup allowed the marketing team to manage the theme store without requiring any code intervention.

Diagram explaining the relationship between how different databases work together to create a theme page.Marketing enters unique theme data to the theme page database form, and then plug 7 different database that contain lists of features that are shared acrosss all themes. Diagram explaining the relationship between how different databases work together to create a theme page.Marketing enters unique theme data to the theme page database form, and then plug 7 different database that contain lists of features that are shared acrosss all themes.

Sales Team Utilization Rate

The redesigned website and its underlying systems significantly boosted the efficiency of the sales team. By providing clearer information, reducing customer confusion, and streamlining the lead generation process, we enabled the sales team to concentrate more on closing deals and less on managing customer queries or coordinating with development and support teams. These improvements resulted in a 95% sales team utilization rate, allowing them to focus on high-value activities that drive revenue and reduce operational inefficiencies.

Market and Competitive Analysis

Conducted a deep dive into competitors' websites to understand industry standards and best practices. I analyzed what worked well for competitors and what didn't, using this information to guide the design strategy and ensure our website would stand out while meeting user expectations.

User Research

Analyzed site analytics, conducted user interviews, and usability tests to identify pain points. This research highlighted areas where users were dropping off and provided insights into how we could streamline the user journey to improve conversion rates.

User research revealed that the previous website's complexity and poor user experience were major barriers to customer acquisition. Users felt overwhelmed by the excessive information and unclear navigation, leading to high drop-off rates. Additionally, the lack of language localization led to doubts about whether the platform could effectively handle Arabic content. Our findings strongly suggested that by streamlining content, improving user flows, and introducing language localization, we would significantly boost conversion rates.

Stakeholder Identification

Defined personas based on target audiences, emphasizing small to medium-sized business owners seeking a no-code eCommerce solution. We discovered that the MENA region's target customers were not inclined to use a DIY approach but preferred paying a premium for platform setup services. This preference stemmed from the platform's complexity and the overwhelming nature of the previous website, which provided too much information and lacked clear direction, leading to confusion and increased pressure on the sales, customer support, and development teams.

Site Architecture

Simplified the site structure, focusing on quality over quantity. Prioritized essential pages and removed unnecessary ones to improve navigation and user experience. The goal was to provide high-quality content that directly addressed user needs and improved SEO.

Image showing the siteplan of the website. The website has 5 main navigation pages: Features, Solutions, Pricing, Support, Demo Request, and a link to the sign in page Image showing the siteplan of the website. The website has 5 main navigation pages: Features, Solutions, Pricing, Support, Demo Request, and a link to the sign in page

Journey Maps

Created detailed user journey maps that guided users from entry points through to conversion actions, such as signing up for a demo or purchasing a subscription. The user flows were designed to minimize friction and guide users intuitively through the website, with a focus on key conversion points.

Wireframes and Userflows

Created detailed wireframes and user flow diagrams to map out the user journey. These wireframes guided the design and development process, ensuring that each step of the user journey was intuitive and aligned with the overall business goals.

Wireframes showing the development of the interface on desktop Wireframes showing the development of the interface on desktop
Wireframes showing further development of the interface and experimenting with possible image schemes such as a wave Wireframes showing further development of the interface and experimenting with possible image schemes such as a wave
Wireframes trying to develop basic structure of the website on mobile devices Wireframes trying to develop basic structure of the website on mobile devices

Typography and Colors

Selected TTSuperMolot Neue for H1 tags and Roboto for body text to maintain consistency with the brand's visual identity. The use of REM units for typography and EM units for dimensions ensured that the website was accessible and adaptable to various screen sizes.

Prototyping

Created high-fidelity prototypes that included interactive elements that were used for usability testing. I gathered feedback from both internal stakeholders and users, iterating on the design to refine the user experience further.

Front-End Development

Implemented the design into a fully functional website, ensuring cross-browser compatibility and responsiveness. Integrated the site with HubSpot and other necessary tools, such as analytics and multilingual support.

Image showcasing the original homepage design that existed before I was involved in the project Image showcasing the original homepage design that existed before I was involved in the project
Image showcasing the new homepage after my intervention and after I took the lead and ensured UX was always prioritized Image showcasing the new homepage after my intervention and after I took the lead and ensured UX was always prioritized
Image showcasing the mobile homepage's hero image and landing area Image showcasing the mobile homepage's hero image and landing area
Image showcasing a section of the homepage that links to the Overview page with an image of the company's mascot flying to his target Image showcasing a section of the homepage that links to the Overview page with an image of the company's mascot flying to his target
Image showcasing the testimonial section on the homepage Image showcasing the testimonial section on the homepage

Multilingual Support

Developed a language-responsive design to support Arabic content. Implemented CSS and HTML adjustments to ensure the site was fully localized without duplicating code, enhancing the user experience for Arabic-speaking users.

Image showcasing the Arabic homepage in Arabic and how the elements change positions to adapt to the new language read direction Image showcasing the Arabic homepage in Arabic and how the elements change positions to adapt to the new language read direction
Image showcasing the Arabic homepage in Arabic and how the elements change positions around the section with the company mascot to adapt to the new language read direction and provide a localized version of the website Image showcasing the Arabic homepage in Arabic and how the elements change positions around the section with the company mascot to adapt to the new language read direction and provide a localized version of the website
Image showcasing how the homepage changes it's elements to provide a localized experience in Arabic on mobile screens Image showcasing how the homepage changes it's elements to provide a localized experience in Arabic on mobile screens
Image showcasing how the homepage's text elements automatically align to the right to provide a localized experience in Arabic on mobile screens Image showcasing how the homepage's text elements automatically align to the right to provide a localized experience in Arabic on mobile screens
Image showcasing how the text elements automatically align to the right to provide a localized experience in Arabic on mobile screens Image showcasing how the text elements automatically align to the right to provide a localized experience in Arabic on mobile screens

Contact and Request Flows

Simplified contact forms to streamline user submissions, increasing completion rates. Introduced specialized forms for custom integration requests, allowing the sales team to categorize and filter requests before forwarding them to the product team. This process enabled more strategic prioritization, reducing overwhelm for the development team and aligning requests with business goals.

Image showcasing the contact page on desktop focusing on the form. There is a background element that create a subtle design of an envelope where the form is centered against. Image showcasing the contact page on desktop focusing on the form. There is a background element that create a subtle design of an envelope where the form is centered against.
Image showcasing the Contat Page and focusing on the address book. The elements have plenty of wide space around them to ensure the addresses are not cramped or hard to read. Image showcasing the Contat Page and focusing on the address book. The elements have plenty of wide space around them to ensure the addresses are not cramped or hard to read.

Error 404 Pages

Checked for broken and non-existent pages resulting from the new design and migration. I redesigned the 404 pages to be visually engaging, encouraging users to linger for a few seconds before redirecting them to the appropriate subdirectory or back to the homepage. This approach helped keep users on the website and minimized bounce rates.

The Error 404 page on desktop with a message reading that the page the user is looking for does not exist The Error 404 page on desktop with a message reading that the page the user is looking for does not exist
The Error 404 page on mobile with a message reading that the page the user is looking for does not exist The Error 404 page on mobile with a message reading that the page the user is looking for does not exist

SEO and Performance Optimization

Enhanced SEO through keyword-rich content, meta descriptions, and optimized images. Ensured the website loaded in under a second by using asynchronous script loading and other performance optimization techniques.

Image showcasing website performance where it scored 98 on performance, 100 on accessibility, 100 on best practices, and 100 on SEO Image showcasing website performance where it scored 98 on performance, 100 on accessibility, 100 on best practices, and 100 on SEO

AA WCAG Compliance

Ensured the website was AA WCAG compliant, making it accessible to a broader audience, including users with disabilities.

Final Testing and Launch

Conducted extensive testing across devices and browsers to ensure a smooth launch. Successfully deployed the website ahead of the deadline, aligning with the company's marketing campaign.

Let's Collaborate to Shape Your Digital Journey

Looking to kickstart or improve an underperforming product? Taking a leap into the digital world? Whatever it is, I’m here to help — just reach out to me using this form.

Your information is confidential — I will never share it with anyone, for any reason.