case study [03]

Building a Strong Foundation: Designing Shopl's Landing Page to Drive User Discovery and Interaction

Endless tabs, missed discounts, and a cluttered shopping experience—frustrating, right? Super shoppers need a seamless way to browse, save, and buy, but too many steps can create friction.

Shopl needed a landing page that captured attention and drove downloads. I redesigned it to simplify messaging, highlight key features, and build trust, creating a smooth, intuitive experience that encouraged users to install the extension.

Year

2022

Project Type

eCommerce

Duration

4 Weeks

Role

Product Designer


Problem

Shopl, a Chrome extension aimed at frequent online shoppers, faced several challenges with their landing page. Key issues included:

  • Lack of Clear Messaging: The landing page didn’t clearly convey the value of Shopl’s features to "super shoppers".

  • Low Conversion Rate: Despite offering helpful features, the page wasn’t compelling enough to encourage users to download the extension.

  • Engagement Issues: The design failed to resonate with the target audience, resulting in poor user engagement and high bounce rates.

Solution

I redesigned Shopl’s landing page with the goal of increasing conversions by addressing key user concerns. The solution focused on:

  • Clear Messaging: Simplified the copy to clearly communicate the value proposition of Shopl, making it easy for users to understand the benefits of the extension.

  • Streamlined User Flow: Designed an intuitive layout with a clear call-to-action to encourage users to download the extension.

  • Trust-Building Elements: Added key information on security and user reviews to instill confidence in the product, addressing user concerns about privacy.

  • Modern and User-Friendly Design: Used a clean, minimalist design with visual hierarchy to make the page feel approachable and easy to navigate.

Design Process

Design Process

Discovery & Client Research

Before designing, I collaborated with my team to interview the client and understand their goals, target audience, and user feedback. We also analyzed competitor landing pages to identify best practices. The client wanted a minimalist design with a clear call-to-action that encouraged downloads while quickly conveying the app’s features and benefits. These insights guided my approach, ensuring the page stayed clean, focused, and user-friendly.


Heuristic Evaluation

I analyzed the existing landing page to identify key usability issues, such as unclear messaging, a lack of visual hierarchy, and missing trust indicators like security details. This evaluation helped me pinpoint areas that needed improvement and gave us a clear direction for the redesign.

Heuristic Evaluation

I analyzed the existing landing page to identify key usability issues, such as unclear messaging, a lack of visual hierarchy, and missing trust indicators like security details. This evaluation helped me pinpoint areas that needed improvement and gave us a clear direction for the redesign.

Before committing to a layout, I sketched multiple ideas to explore how to best balance clarity, visual appeal, and conversion goals. I considered how users would scan the page, ensuring that the call-to-action stood out while keeping the content concise and easy to digest. After reviewing with my team, we aligned on a direction that felt intuitive and focused on driving downloads.

My Approach

Translating these ideas into wireframes, I focused on:

  • A clear, high-visibility CTA so users immediately knew where and why to download Shopl.

  • A structured content flow that quickly explained key features without overwhelming users.

Since the client wanted a minimalist aesthetic, I deliberately kept the layout clean yet informative, ensuring the most important details stood out. To test different ways of guiding users toward conversion, we created two design variations, each emphasizing different messaging and layout structures.

Sketching & Low-Fidelity Wireframes

Before committing to a layout, I sketched multiple ideas to explore how to best balance clarity, visual appeal, and conversion goals. I considered how users would scan the page, ensuring that the call-to-action stood out while keeping the content concise and easy to digest. After reviewing with my team, we aligned on a direction that felt intuitive and focused on driving downloads.

My Approach

Translating these ideas into wireframes, I focused on:

  • A clear, high-visibility CTA so users immediately knew where and why to download Shopl.

  • A structured content flow that quickly explained key features without overwhelming users.

Since the client wanted a minimalist aesthetic, I deliberately kept the layout clean yet informative, ensuring the most important details stood out. To test different ways of guiding users toward conversion, we created two design variations, each emphasizing different messaging and layout structures.

Refining the Design Through User Testing

After exploring multiple layout options, the client preferred our second low-fidelity wireframe, which became the foundation for our high-fidelity designs. I refined the UI with a focus on clarity, visual hierarchy, and driving downloads before moving into user testing.

I tested the design with eight participants (ages 25-45, female or female-identifying) to evaluate how easily they could navigate the page, understand Shopl’s features, and install the extension.

Key Findings & Iterations:

  • Users understood Shopl’s core functionality, but some hesitated to install due to security concerns. → I added a dedicated security section highlighting encryption and data protection.

  • Users wanted more trust signals, such as reviews or ratings. → I incorporated customer testimonials and a star rating section to build credibility.

  • The CTA was clear but could be more prominent. → I refined the visual hierarchy to make the download button stand out more.

By incorporating these insights, we delivered a final design that not only aligned with the client’s vision but also addressed real user concerns, resulting in a more compelling and high-converting landing page.

Key Takeaways

User-Centered Design
 This project reinforced the importance of user-centered design. Usability testing provided invaluable insights into how the landing page could better address user concerns and motivations. The redesign not only improved the user experience but also drove higher engagement and trust.

Cross-Functional Collaboration
 Working closely with my team and client ensured that we were aligned on goals and expectations throughout the process. Open communication helped streamline decision-making and led to a more efficient design process.

Looking Ahead
 Although we didn't see the landing page go live, I’m confident that the design would perform well, and I’d love to continue iterating based on further user feedback after launch.

Refining the Design Through User Testing

After exploring multiple layout options, the client preferred our second low-fidelity wireframe, which became the foundation for our high-fidelity designs. I refined the UI with a focus on clarity, visual hierarchy, and driving downloads before moving into user testing.

I tested the design with eight participants (ages 25-45, female or female-identifying) to evaluate how easily they could navigate the page, understand Shopl’s features, and install the extension.

Key Findings & Iterations:

  • Users understood Shopl’s core functionality, but some hesitated to install due to security concerns. → I added a dedicated security section highlighting encryption and data protection.

  • Users wanted more trust signals, such as reviews or ratings. → I incorporated customer testimonials and a star rating section to build credibility.

  • The CTA was clear but could be more prominent. → I refined the visual hierarchy to make the download button stand out more.

By incorporating these insights, we delivered a final design that not only aligned with the client’s vision but also addressed real user concerns, resulting in a more compelling and high-converting landing page.

After exploring multiple layout options, the client preferred our second low-fidelity wireframe, which became the foundation for our high-fidelity designs. I refined the UI with a focus on clarity, visual hierarchy, and driving downloads before moving into user testing.

I tested the design with eight participants (ages 25-45, female or female-identifying) to evaluate how easily they could navigate the page, understand Shopl’s features, and install the extension.

Key Findings & Iterations:

  • Users understood Shopl’s core functionality, but some hesitated to install due to security concerns. → I added a dedicated security section highlighting encryption and data protection.

  • Users wanted more trust signals, such as reviews or ratings. → I incorporated customer testimonials and a star rating section to build credibility.

  • The CTA was clear but could be more prominent. → I refined the visual hierarchy to make the download button stand out more.

By incorporating these insights, we delivered a final design that not only aligned with the client’s vision but also addressed real user concerns, resulting in a more compelling and high-converting landing page.

Based on user feedback, I made several changes to the body of the landing page to enhance trust and clarity:

  • Added customer reviews and ratings to build trust.

  • Added bottom banner to emphasize security, focusing on the blockchain technology used to protect user data.

Refined graphics to visually represent privacy and security features.

Key Takeaways

User-Centered Design
 This project reinforced the importance of user-centered design. Usability testing provided invaluable insights into how the landing page could better address user concerns and motivations. The redesign not only improved the user experience but also drove higher engagement and trust.

Cross-Functional Collaboration
 Working closely with my team and client ensured that we were aligned on goals and expectations throughout the process. Open communication helped streamline decision-making and led to a more efficient design process.

Looking Ahead
 Although we didn't see the landing page go live, I’m confident that the design would perform well, and I’d love to continue iterating based on further user feedback after launch.

Key Takeaways

User-Centered Design
 This project reinforced the importance of user-centered design. Usability testing provided invaluable insights into how the landing page could better address user concerns and motivations. The redesign not only improved the user experience but also drove higher engagement and trust.

Cross-Functional Collaboration
 Working closely with my team and client ensured that we were aligned on goals and expectations throughout the process. Open communication helped streamline decision-making and led to a more efficient design process.

Looking Ahead
 Although we didn't see the landing page go live, I’m confident that the design would perform well, and I’d love to continue iterating based on further user feedback after launch.