Introduction: Bella – AI Magic Wand for Product Uploads
Bella is an AI-powered tool designed to streamline the product upload process for eCommerce admins. The core challenge admins face is incomplete product data at the time of submission. Bella solves this with its unique AI Magic Wand feature, which allows users to generate placeholder (dummy) data on-demand when necessary. This assists admins in quickly populating product fields, ensuring a smoother, more intuitive experience.
By reducing manual entry friction and offering flexible data handling, Bella empowers teams to manage product uploads with greater efficiency.
Skills
UI Design
UX Design
Role
Designer (Solo)
Tools
Figma
Date
May 31 – June 7, 2024
Client
Redacted
Pssst…read me!
This project is a submission for a design task I completed for a company. For portfolio purposes, I have replaced the original branding with a mock company name and visual identity.
Assignment Background
Imagine an eCommerce platform where a core feature involves its admins uploading product data via a CSV template through the admin dashboard. The template serves to guide admins on the necessary data points or fields that need to be populated for each product, identifying required versus optional fields and any specific formats needed for certain data points (e.g., the “Date of Manufacture” should be entered as MM/DD/YYYY).
Problem
The current CSV template indicates required fields with an asterisk (*) next to the field name. However, the field names match their database entries, making them less intuitive or user-friendly (e.g., dateOfManufacture).
Here are some of the issues reported by admins when filling out the current CSV template before uploading it into the system:
“It’s not clear that fields marked with * are mandatory. We need clearer prompts for mandatory fields.” – Martha (Head of Inventory)
“You have to expand all the columns in Excel to read the text, which adds an unnecessary step.” – Eric (Warehouse Manager)
“I want to choose which fields I can fill in because I won’t always have all the product details. For example, I may not know the total stock count, but Eric would. I also want to do this in a more visually appealing and intuitive way.” – Rachel (Marketing Specialist)
Task
We would like you to create a high-fidelity design for the Product Upload feature, which will serve as a blueprint for the front-end developers to create a smooth and intuitive user experience within the dashboard. Feel free to use any design tool like Figma, Adobe XD, or others to best express your solution.
Define and outline
After carefully reading the brief, I highlighted text that I thought was important. Next, wrote them out on a sticky.
Deliverables
To keep me on track, I made notes of what I expected to deliver before the deadline.
Thoughts to paper
After defining the pain points, I spent a lot of time researching on how e-commerce product uploads are designed and how AI can be used to make data entry a smooth process.
The research phase allowed me to come up with a few ideas on how I wanted Bella to work. I made notes of them.
Task Solution
I had two solutions and since I couldn’t decide on which would be best, I decided to design for both: a CSV Data Importer and a Product Form.
Next, I outlined the specific features I wanted the final design to have – ensuring that I solve the user pain-points.
AI Magic Wand: Pre-fill Data
One key challenge I wanted to tackle was how to make data entry faster, smarter and more user-friendly. My solution to this was to create the AI Magic Wand Feature which is designed to reduce friction in the upload process.
How the AI Magic Wand Works
The AI Magic Wand addresses the admin pain points by prefilling mandatory fields with AI-generated suggestions. Here’s how it works:
Magic Wand Icon: Specific mandatory fields have a wand icon next to them. Users can click or tap the icon to instantly let AI populate the field.
“Magic Blue” Highlight: When AI fills a field, it’s highlighted in a distinct shade of blue, signaling that the value was auto-generated.
User Control: AI doesn’t make assumptions—it empowers users. Prefilled fields are editable, so users can tweak values or revert them if needed.
Feature One: CSV Upload
I designed a simple flow to illustrate the CSV upload feature:
Wireframe: CSV Upload
Keeping the pain points and CSV flow in mind, I designed the wireframes for the CSV upload. I will explain more in detail in the next section
As a note, the blue sticky notes are from me to me 😄. I tend to drop notes after I have looked through the design and spotted mistakes plus I did have more wireframes for this but somehow, I deleted them.
Design Breakdown: CSV Upload
To explain how this works, I have added notes to key sections of the UI.
Feature: Product Upload
Similar to the CSV feature, I designed a flow to illustrate how the product upload feature works
Wireframe: Product Upload
For the product upload feature, I made a list of the components I wanted on each page i.e. add and modify product page. Given the tight time constraint, the list helped me to design what was needed rather than explore different things and lose time.
After writing out the components, I designed the wireframes. Since I am already familiar with e-commerce designs, I created detailed wireframes.
Once completed, I just made slight modifications to the wireframes. I will explain how everything works in the next section.
Design Breakdown: Product Upload
Just like the CSV design breakdown, I added notes to key UI sections to explain how it works.
Final Thoughts
I enjoyed working on this design task as it had me think about ways AI could empower e-commerce admins. I also wished I had time to interview the admins to fully grasp their challenges. It would have helped me design better personas that I would use as a guide when designing the final solution.
On the design part, I feel the UI is lacking. It’s not, how do they say it again, yes, it’s not “giving” 😄. I can’t make any promises of making improvements as I have a backlog of designs to work on but you never know.
Hindsight: Nov 16, 2024
While working on this case study, I had new ideas about Bella. Aside from just pre-filling the form with data, the AI could study user patterns and predict the best data for a particular field.
Another idea is flagging and alerting the user on inconsistent data entered. For example, let’s say we have a product marked as peanut butter-free yet the user enters peanut butter as an ingredient. Bella should alert them of this mistake and make suggestions — either update the ingredient list or change the allergy information. This will be useful in fixing human errors due to oversight.
And finally, we could eliminate long data entry by providing Bella with key product details. Based on that, the relevant fields will be generated. All the user has to do is review and make modifications.
Fun Facts
Coming up with a name for the project was challenging as I struggle to name things (sometimes). The name “Bella” was inspired by the bottled water on my work table called Bell-Aqua 😄
If you got this far…Thank you
Thank you for reading. If you have any questions, feedback or suggestions, don’t hesitate to reach out to me on social media or via my email: menakeno.creative@gmail.com.
