SHOPLINE X AI

Powering Merchants with AI Content Creation.

Role

UX Designer

Team

‍PM, developers, senior UX designer and Myself

Duration

2 mons

What is SHOPLINE?

One stop E - C SaaS

SHOPLINE is a leading SaaS provider, empowering retailers to enhance their commerce with solutions for selling, marketing, and operations.

600K

Users (Merchants)

2000

Colleagues

10+

Years

Project Goal

Design and build an AI (Beta) generation function that helps merchants to create high-quality contents.

When the product team approached to explore the potential of an AI function for automating generation, I saw both an opportunity and a challenge. Integrating AI into the existing workflow could disrupt user experience if not executed thoughtfully.

To ensure clarity and alignment on the goals, I met with the product team, including PMs, developers, and senior designers. Together, we discussed the project's objectives and emphasized the importance of maintaining a seamless user experience while introducing the new AI capability.

Key metrics

Improve content quality

User engagement

Efficiency & User satisfaction

User journey map

Key insights from current user's journey.

Through collaboration with the researchers and marketing teams, I gained a better understanding of their pain points during content creation and research processes.

Time inefficiency

The manual process consumed hours daily.

Inconsistency

The quality of descriptions varied, impacting overall sales.

Lack of expertise

Not all merchants had strong writing skills, leading to underperforming product listings.

Solutions

Automated  - From Manual to Efficient

Reducing time waste

Consistent Brand Expression

Customized language and tone for consistent brand voice

Fast Fixe- Revitalize and Refine

Regenerating Content for a Polished Look

1.

The process

Analysis case study - frequently used scenarios.

Collaborating with the PM and researcher, I analyzed the users' most frequently related content in the case study, such as product descriptions and marketing materials.

Scenario

Usage Frequency

Best-Selling Product Descriptions

High

Sale Promotions

High

New Product Announcements

High

Email Subscriptions Campaigns

Medium

About Us/Branding Content

Medium

2.

Ideation - Key features solve users' needs

Quick prompt suggestions for the most frequently used scenarios.
I realized that to address the speed vs. quality problem, I needed to help users create content more efficiently and effectively. I then transformed these scenarios into "quick suggestions" for faster idea generation.
Our merchants have a global and diverse customer base.
So, making localization and cultural relevance essential. I added features for customizable tone and language to help merchants adapt their brand voice to specific audiences.

3.

General user flow

4.

Design Iteration - Default generation exploration
 

I explored different ways to display text boxes and suggestions, carefully noting the pros, cons, and important factors for each approach.

a.

‍

Pros:

  • Easy visibility of all recommendation options.
  • Clear distinction between input fields and options, making the interface user-friendly.

‍

Cons:

  • Interface may become cluttered with too many options; potential user overwhelm.

‍

Considerations:

  • How can we limit the number of options in the dropdown to avoid overwhelming users?
  • How to priority the essential options and might be consider having less frequently used ones?

b.

‍

Pros:

  • Simplified layout compared to Design 1.

‍

Cons:

  • Overly hidden, and default options appear too few.
  • More is not obvious, and there's an additional interaction step afterward to complete the task.

‍

Considerations:

  • How balance the users need for additional interaction with the desire for a straightforward experiences

c.

‍

Pros:

    • Minimal visual elements
    • "More" option with ellipsis ("…") instead of explicitly labeling it.
    • Users can quickly select relevant options without navigating to a separate area.

    ‍

    Cons:

      • Hidden suggestions require additional steps.

      ‍

      Considerations:

        • How can we balance the need for displaying "more" options with maintaining a clean layout?

        d.

        Pros:

        • Clear overview of more information.
        • Reduces the need for additional clicks or interactions, enhancing efficiency compared with Designs 2 and 3.

        Cons:

        • The absence of explicit words (e.g., “Email subscription” become "Email su") might confuse some users.

        ‍

        Considerations:

        • How to display all the text with clear information after users click ">" ?


        ✅ Final design decision - d.
        ‍‍
        After comparing and iterating, I meet with PM and senior UX designer, and we all agreed with that integrating suggestion buttons 2.0 inside the text box enhances the user experience by providing efficiency, clarity, and context which align with the project goals. And to address the concern, I designed when users click the suggestion navigation, it reveals the previously hidden buttons in full view.

        First time generation flow

        First time generation flow

        5.

        Design Iteration - Regeneration exploration
         

        I explored different ways to display text boxes and suggestions, carefully noting the pros, cons, and important factors for each approach.

        a.

        ‍

        Pros:

        • Simplicity and familiarity.

        ‍

        Cons:

        • Users can only see one content piece at a time which is inefficient for those seeking an overview or comparing multiple records.
        • Usability issue - when components are being navigated back and forth using arrow navigation, and the components are not aligned horizontally.

        Considerations:

        • Improve accessibility.

        b.

        Pros:

        • Lists provide clear and organized presentation of multiple options or items, making it easy for users to scan and read.
        • Users can easily compare different content generation results side by side.
        • Lists provide clear and organized presentation of multiple options or items, making it easy for users to scan and read.

        ‍

        Cons:

        • Too many results in a list can overwhelm users and make decision-making difficult.
        • List can take up considerable screen space when the many long generated results.

        ‍

        Considerations:

        • Need to more visual appealing and improve interaction.
        • How does the user select and insert the generated results?

        c.

        ‍

        Pros:

        • Combines the advantages of a list and navigation arrow.
        • Fixed generator box length enhances usability.

        Cons:

        • Limited information.
        • Less effective when compare many generative results a once.

        ‍

        Considerations:

        • Will users frequently need to generate long titles or descriptions？


        ✅ Final design decision - c.
        ‍‍
        After discussing with the PM, we have a clearer understanding of the tool’s effectiveness. Besides helping users generate relevant content more quickly, it also needs to be effective. Since this tool is primarily used in store design, rather than for product descriptions or blogs, we prioritize concise and impactful wording to attract customers in an e-commerce store. Additionally, for this text tool, unless specific instructions dictate otherwise, it generally produces shorter content to align with user scenarios.

        Reneration flow

        Contents insert flow

        What I learned

        Epilogue and reflection

        Key takeaways:

        1. Learned effective cross-functional team communication.
        2. Mastered balancing user needs with technical constraints.
        3. Developed attention to edge cases and interface details.

        Project growth:

        1. Improving design decisions and presentation skills.
        2. Cultivating a more detail-oriented design mindset.
        3. Finding design solutions that accommodate multiple stakeholder needs.

        © 2025 Junwen Yu. All rights reserved