PROJECT TYPE
Site analysis, Flow optimalisation, Personal Project
MY ROLE
UX/UI Design, UX Research
CONTRIBUTION
User Research
Wireframing
UI Redesign
Prototyping
Introduction
CONTEXT & PURPOSE
OVERVIEW
Conducted as a practical exploration, this analysis explores various aspects of Zonneplan's corporate website. The evaluation covers navigation, forms, content, visual design, interactivity, and conversion strategies. The main focus is on refining the solar panel application process, redesigning the contact page, and adjusting the overall navigation structure. The ultimate goal goes beyond improving user experience to boosting conversion opportunities and enhancing lead generation.
process
I initiated the project with an extensive website review, formulating assumptions about potential improvements. To gain deeper insights and understand user perspectives, I conducted interviews. These conversations helped identify prominent pain points and determine which aspects had the most significant impact on users.
To strengthen my design approach, I broadened my horizons by drawing inspiration from competitors and other relevant sources. This quest for innovative ideas fueled the resolution of identified issues. With these insights, I proceeded to create flows and low-fi wireframes and prototypes to further support the crafting of a seamless user experience.
My design solutions are not solely based on intuition; they are substantiated by thorough research. Each design choice is carefully justified, striving for a balance between functionality, aesthetics, and user needs.
Issue 1
SOLAR PANNEL APPLICATION PROCESS
IMPROVEMENT POINT
While navigating the application process, certain aspects proved disruptive for users. The primary concern was that after submitting their details, users felt somewhat 'obligated' to receive a phone call (see image below).
The statement indicating a call within 5 days if no choice is made could be perceived as intrusive, especially for potential leads in the exploration phase. Additionally, the option to not be called is missing. For many, phone communication can be anxiety-inducing; research indicates that around 40% of people aged 18 to 30 experience phone anxiety. Consequently, this might lead to potential leads hesitating to proceed with conversion.
Results
RECOMMENDATIONS
DESIGN SOLUTIONS
Results and Design Adjustments: Following a thorough analysis, I identified areas for improvement on the website, focusing on the solar panel application process, the contact page, and the navigation structure.
Example screens (see below) showcase the improvements before and after the changes in user interface, navigation, and aesthetics, aimed at providing a better user experience.
Option to not be called
The addition of the option not to be called gives users the autonomy to decide whether they want to be approached by phone. This considers potential leads who are hesitant about phone contact, thus enhancing conversion opportunities.
The addition of the option not to be called gives users the autonomy to decide whether they want to be approached by phone. This considers potential leads who are hesitant about phone contact, thus enhancing conversion opportunities.
Streamlined time options and merging with "an alternative moment"
The restructuring of time options and merging with "an alternative moment" ensures a more streamlined and efficient user experience. Simplifying the dual options reduces confusion and enhances clarity for users during the input process.
The restructuring of time options and merging with "an alternative moment" ensures a more streamlined and efficient user experience. Simplifying the dual options reduces confusion and enhances clarity for users during the input process.
Inclusion of multiple contact methods
By introducing various contact methods, leads have the flexibility to choose the most comfortable way to proceed with conversion. This increases flexibility and makes the application process more accessible to diverse users.
By introducing various contact methods, leads have the flexibility to choose the most comfortable way to proceed with conversion. This increases flexibility and makes the application process more accessible to diverse users.
Display of steps at the bottom to inform users
Displaying steps at the bottom of the application process provides users with an overview of progress and expectations. This contributes to a transparent user experience, making potential leads more aware of the process and potentially more inclined to continue.
Displaying steps at the bottom of the application process provides users with an overview of progress and expectations. This contributes to a transparent user experience, making potential leads more aware of the process and potentially more inclined to continue.
Addition of a back button
Implementing a back button simplifies navigation for users, allowing them to move naturally through the form and easily modify data if needed. This contributes to improved user-friendliness and efficiency.
Implementing a back button simplifies navigation for users, allowing them to move naturally through the form and easily modify data if needed. This contributes to improved user-friendliness and efficiency.
Issue 2
CONTACT PAGE ADJUSTMENTS
IMPROVEMENT POINTS
On the current service/contact page, various methods for asking questions and reporting issues are available. However, these options are not presented in a clear and organized manner. Each service has its accordion tab, and within each tab, there are differences in options such as calling, chatting, and redirects. During my initial impression, this felt confusing, and the flow was not streamlined.
I also noticed the absence of a form for general questions and that the email address was not immediately visible. A study involving 174 participating marketers revealed that 74% of them use a web form to generate leads. More than half of this 74% indicated that a web form yields the most conversions.
The contact page is one of the most crucial pages for generating conversions. Therefore, it is essential that this page is easily accessible. During my first visit to the website, I thought there was no contact page. I assumed that the phone icon in the navigation was the only contact option until I encountered the contact page in the footer. Later, I realized that "Service" is the same page. This confusing nomenclature could have adverse effects on search engine optimization (SEO) results.
Results
RECOMMENDATIONS
DESIGN SOLUTIONS
Conclusions after Figma adjustments in the application process:
Restructuring the Contact Page
The restructuring of the contact page will enhance the user flow. By redesigning the page, the layout has become more organized, allowing users to easily find the desired contact options without extensive searching or actions.
The restructuring of the contact page will enhance the user flow. By redesigning the page, the layout has become more organized, allowing users to easily find the desired contact options without extensive searching or actions.
Reducing Excessive Options
Decreasing the number of options has reduced complexity and increased user-friendliness. By retaining only essential contact options, the user experience is streamlined, alleviating choice stress and confusion.
Decreasing the number of options has reduced complexity and increased user-friendliness. By retaining only essential contact options, the user experience is streamlined, alleviating choice stress and confusion.
Reorganization for Simplicity
The reorganization of contact options has led to more simplicity and clarity. Instead of opening multiple tabs, general contact options are now provided, enabling users to select their preferred contact method more quickly and easily.
The reorganization of contact options has led to more simplicity and clarity. Instead of opening multiple tabs, general contact options are now provided, enabling users to select their preferred contact method more quickly and easily.
Adding a Questions Form
The addition of a questions form is a valuable inclusion. The absence of this feature in the previous design could result in missed leads and conversions. Providing a specific option for asking general questions promotes interaction with potential customers, thereby increasing the chances of conversions.
The addition of a questions form is a valuable inclusion. The absence of this feature in the previous design could result in missed leads and conversions. Providing a specific option for asking general questions promotes interaction with potential customers, thereby increasing the chances of conversions.
FAQ Section without Direct Redirect to the Service Portal
Implementing an FAQ section without a direct redirect to the service portal ensures an uninterrupted user experience. Only the most frequently asked questions are displayed, providing users with valuable information and potentially guiding them to pages where they may proceed with conversions. These interactive elements contribute to a more engaged and focused user experience. Of course, the service portal also has its own tab in the FAQ accordion, as it is a crucial part of Zonneplan's service.
Implementing an FAQ section without a direct redirect to the service portal ensures an uninterrupted user experience. Only the most frequently asked questions are displayed, providing users with valuable information and potentially guiding them to pages where they may proceed with conversions. These interactive elements contribute to a more engaged and focused user experience. Of course, the service portal also has its own tab in the FAQ accordion, as it is a crucial part of Zonneplan's service.
Issue 3
NAVIGATION MENU'S
While navigating through the current primary and secondary navigations, I encountered various frustrations that impact the user experience. The major stumbling block occurred on the services and product pages, primarily due to the secondary navigation. This section displays numerous additional pages with crucial information about the respective service, but it proved challenging to locate specific pages. As a result, some pages may not receive the attention they deserve, leaving important information inaccessible to visitors. On mobile devices, this requires significant interactions, and the vertical scroll is not immediately intuitive. The primary navigation has substantial potential to address these frustrations.
Results
RECOMMENDATIONS
RECOMMENDATIONS
CONFUSING & HINDERING
Conclusions after Figma adjustments in the application process:
Merging Primary and Secondary
Navigation Combining the primary and secondary navigations places everything in one location. This leads to simpler access to the desired page with just a few clicks. Users can now navigate quickly and easily without the complexity of separate navigation systems.
Navigation Combining the primary and secondary navigations places everything in one location. This leads to simpler access to the desired page with just a few clicks. Users can now navigate quickly and easily without the complexity of separate navigation systems.
Improved Mobile Experience
The user experience, especially on mobile devices, has been enhanced. Everything is now easily accessible via the menu, with the additional navigation not overwhelming the screen. This focuses more attention on the primary navigation, making the overall mobile experience simpler.
The user experience, especially on mobile devices, has been enhanced. Everything is now easily accessible via the menu, with the additional navigation not overwhelming the screen. This focuses more attention on the primary navigation, making the overall mobile experience simpler.
Dropdown Menu for Three Main Services
Adding a dropdown menu for the three main services not only makes it easier to access specific pages but also allows efficient expansion for potential future pages. This keeps the navigation structure flexible and scalable.
Adding a dropdown menu for the three main services not only makes it easier to access specific pages but also allows efficient expansion for potential future pages. This keeps the navigation structure flexible and scalable.
Inclusion of Information
Pages with Respective Services Each service now has information pages readily accessible, rather than being tucked away in a secondary navigation. Grouping these information pages with their respective services makes the relevance clearer and improves access to essential information.
Pages with Respective Services Each service now has information pages readily accessible, rather than being tucked away in a secondary navigation. Grouping these information pages with their respective services makes the relevance clearer and improves access to essential information.
In conclusion, the design analysis conducted aimed to refine the user experience on the Zonneplan website, with a specific focus on streamlining the solar panel application process, enhancing the contact page, and improving overall navigation. Through thorough research and analysis, several recommendations have emerged to further enhance the website's effectiveness, including ongoing research into user behavior, regular performance monitoring, and continuous updates based on user feedback. By implementing these solutions and staying attentive to user needs, Zonneplan can ensure a seamless and engaging experience for its users, ultimately driving increased conversion rates and lead generation.
