UX UI Design for mapserve.co.uk

To increase conversions and profits by improving the user experience of the map-buying process.

For this project, I was tasked with creating the artifacts for an AB testing on the website mapserve.co.uk. The client had a hypothesis that the most successful map on their site could sell better if the interface was more user-friendly. To get started, I conducted a thorough heuristic review of the site and watched multiple users go through the website using Hotjar. Through this research, I was able to identify pain points and potential areas of improvement in the funnel. Based on these insights, I developed a series of solutions to address the user experience issues and improve the overall site design.

In this portfolio entry, I will showcase my process, including identifying pain points, generating hypotheses, and designing solutions, as well as the results of the AB testing.


Design Process


    User Research and Problem Discovery:

    Hotjar recordings

    As part of my research for this project, I utilized Hotjar recordings to gain a deeper understanding of how users were interacting with the mapserve.co.uk website. Hotjar is a tool that allows you to see recordings of users as they navigate through your website, including their mouse movements, clicks, and other interactions.

    By reviewing Hotjar recordings, I was able to identify pain points and potential areas of improvement in the website's funnel. For example, I observed users struggling to draw the map area, select the map type, add it to the basket, and complete the checkout process. I also identified issues with the sign-up flow and user interface elements, such as confusing icons and labels.

    By analyzing these recordings, I gained valuable insights into the user experience of the website, which allowed me to develop targeted solutions to improve the design and functionality of the site. These insights were a critical part of the process and helped me to create a more effective and user-friendly website.


    In addition to utilizing Hotjar recordings, I conducted a thorough heuristic review of the mapserve.co.uk website. A heuristic review is an evaluation of a website or application based on a set of established usability principles or heuristics. These principles can be used to identify potential problem areas or areas of improvement.

    To conduct my heuristic review, I evaluated the website based on a set of common usability principles, such as visibility of system status, user control and freedom, and consistency and standards. I also made note of any specific pain points or usability issues that I observed while using the website.

    Mapserve.co.uk webpage



    Documented the findings from the user research and identified areas of improvement.



    Design Solutions



    Hotjar recordings

    Changed the sign-up flow to better cater to both new and professional users.
    • Redesigned the sign-up flow to streamline the process and make it more intuitive for new users, while still providing advanced options for professional users who needed them.

    • Collaborated with the development team to ensure that the new sign-up flow was technically feasible and integrated smoothly with the existing site architecture.

    • Conducted usability testing and collected feedback from users to refine the new sign-up flow and ensure that it met the needs of both new and professional users.


    Map interface iteration
    • Iterated the map interface to label tools properly and design icons for each one.

    • Created a walk-through tutorial for new users to explain how the tool works.
    New Tool bar


    Map flow

    Developed multiple versions of the select map and add to cart flow to improve the interface.

    Image 1
    Image 2
    Image 3

    A/B test design

    Conducted two A/B tests to identify the design that would increase conversions and profits. Two versions of the site were created for the A/B tests, with one test focusing on the map selection type panel and the other on the shopping cart side. The first A/B test involved changing the interface of the map selection type panel, iterating on the design to make it more user-friendly and intuitive. The second test was aimed at increasing upsell opportunities, and involved redesigning the shopping cart interface to highlight related products and encourage customers to add more items to their cart.

    New Tool bar
    New Tool bar


The results



Outcome

One of the most significant improvements came from running an A/B test using Google Optimize, which was live for 13 days and received over 5.6K sessions.

The A/B test focused on improving the shopping cart interface to encourage upselling and cross-selling opportunities. By redesigning the interface to highlight related products and make it easier for customers to add more items to their cart, we were able to generate a 37% increase in conversions, resulting in over £20K in additional revenue.

The success of this A/B test demonstrates the power of user research and iterative design in driving business growth. By identifying pain points and testing potential solutions, we were able to make targeted improvements that had a significant impact on the bottom line.

Mapserve.co.uk webpage