Simplify the commercial graph creation process
with Ecomtent AI
E-commerce | Web Design | Startup | Capstone Project | Spring 2023
MY ROLE
Product Designer
TIMELINE
4 months
TEAM
CEO
CTO
1 Developer intern
PROCESS
User ResearchCompetitor AnalysisInformation ArchitectureUser Experience DesignPrototype
Low cost
High Speed
High Flexibility
High Quality
About Ecomtent
Ecomtent's name comes from combining 'E-commerce' and 'content,' with a focus on boosting product marketing efficiency by automatically creating appealing product images. As a pioneering startup in the pre-seed phase located in Toronto, Ecomtent AI specializes in helping e-commerce sellers generate high-quality, lifelike product images. Our goal is to enhance the visual appeal of commercial content and improve conversion rates.
Target Customers
The target customers include E-commerce owners, ranging from small businesses to brand aggregators (who own multiple brands) across platforms (Amazon, Shopify, Ebay, and others. )
Project overview
Ecomtent is in its early startup stage, although the AI had fundamental features, it lacked a smooth flow and clear structure. My focus is on understanding the pain points of early users and iterate the MVP to enable users to self-serve with a smooth and simple experience.
Company goal
-
Minimum Viable Product 2 (MVP2)
-
Iterate the MVP to MVP web 2.
-
Empower users to fully self-serve.
-
-
Fundraising:
-
Prepare for future fundraising rounds by demonstrating the potential with intuitive and straightforward prototype.
-
-
Establish Branding:
-
Begin establishing a strong brand identity through visualization and User experience.
-
Understand the problem space
Primary Research
The initial MVP served its foundational purpose, but with feedback from early adopters, the product had accumulated various issues and challenges in user experience. To gain a better understanding of early users' perspectives, I conducted 2 semi-structured interviews. The data collected allows me to delve deeper into their thoughts and pain points regarding the initial MVP.
Key Takeaways
Users encountered results that did not meet their expectations, primarily due to two main reasons. Firstly, the confusing structure and guidance made users unsure of their location and which tool to use to achieve their goal. Secondly, users lacked familiarity with the prompt mechanism.
Vague Information Architecture
The information architecture was ambiguous, making difficulties for users to navigate within the application and increasing chances of losing context.
Confusing guidance
Users expressed feeling confused by the prompts, noting a disconnect between their thoughts and the guidance provided. They struggled with knowing what information to input and how to describe it accurately.
Confusing icons and unnecessary adjustments
Users frequently encounter challenges when interacting with the interface due to the presence of confused icons. This confusion contributes to a lack of clarity regarding the functionality.
Some adjusters are overly technical that irrelevant to users, leaving users unsure of their purpose.
Competitive Analysis
Before diving into the redesign process, I conducted a competitor analysis to gain a better understanding of industry standard and what users could expect in the market. I evaluated 5 competitors based on their features, information architecture, process, UI, and branding, uncovering the following pros and cons.
Pros: generate 10 images at once
Cons: Complex steps, slow speed,
Pros: Simple steps, simple UI
Cons: less flexibility to edit, limited theme
Pros: Clear steps
Cons: Limited themes, less flexibility, and inconsistent UI.
Pros: Offers a variety of themed background and editing functions.
Cons: More geared towards graph editing, overwhelm editing tools.
Pros: Low costs, high flexibility
Cons: Complex steps, requires an external account (Discord), public generation.
Features
Upload product image
Prompt to image
Background themes
Partially editing
Extend image
Resize image
Number of image generations
4
10
4
4
4
4
--Incorporate the feature
Blank -- Absence of the feature
To align with competitors, Ecomtent should enable users to self-serve by uploading images themselves.
The competitors lack image quality; they simply change the background instead of creating a lifelike scenario and blending the product with it. This could also be the competitive advantage of Ecomtent.
How Might We
How might we offer users a simple and smooth self-service experience to quickly generate customized product images?
Ideation and sketches
Add a dashboard
In response to clients frequently losing context and becoming confused about features, I implemented a dashboard to provide an overview of the structure and better organize features, tools, and projects. This empowers them to navigate freely to their desired destination.
Incorporate step-by-step guidance
The flow includes guided steps for users to follow, ensuring they stay oriented throughout the process.
-
Unnecessary icons and indicators were removed to maintain a clean and simple interface.
-
Recognizing that users conduct business across various platforms, canvases in different sizes were designed to meet their needs based on the platform requirements.
Integrate guided prompts
-
Different modes were designed to cater to both experienced users and those in need of guidance.
-
The manual mode allows users to freely input whatever they imagine.
-
In the assisted mode, complex technical terminology is replaced with simpler language, such as "surface" or "scenario." Additionally, users can choose from a selection of examples.
Re-generate or Multi-select at once
Users could either regenerate the images if they were not satisfied the results or perform multi-selection when they liked the images.
Other features
All features could be used in one project without needing to go back. Users could also enter specific function from the dashboard, starting with uploading a new picture. The partially editing feature was also guided by steps and used prompts to make the modifications. Similarly, the Expand and Resize function operated in the same manner.
The Final Solutions
New Designs
Step 1: Upload
Users have the autonomy to upload the product picture and choose the e-platform. The canvas for image generation adjusts the size accordingly, enabling users to easily use the image across platforms. Additionally, the AI will remove the background to seamlessly blend the product image into the scenario creation.
Step 2 - Enter prompt with Assistant Mode
Users can open the assistant mode if they need help when entering the prompts.
Step 2 & 3 Prompt to image - -Experienced Users
Users can directly enter the prompts they imagine and generate the images for download.
Challenges I encountered during the project
Despite the company was in the very beginning phase, with limited users available for user studies and testing,
What I did
-
Define clear task objectives:
-
Clearly outlining the goals and objectives in each activity with the team to ensure efficient use of limited resources.
-
-
Target user segments:
-
Prioritize specific user segments (users using Amazon) that are most critical to the project.
-
-
Deep dive into competitor analysis
-
Conduct an in-depth examination of competitors' strategies, gain comprehensive insights for strategic decision-making.
-
Reflection
As the sole UX designer on this project, the experience was both challenging and empowering. Being entrusted with the design process for AI was an enjoyable journey. Handling it independently allowed for a deep immersion in problem-solving. It also underscored the importance of collaboration. I felt I had the great fortune of working with a such exceptional startup,
Next step
The project's next steps could involve
-
conducting more user tests to refine the experience,
-
considering batch editing capabilities,
-
simplifying the learning curve for non-technical individuals writing optimized prompts.
-
sharable team work
-
connect to Amazon and other platforms as API