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 design was created as part of a job application task. For portfolio purposes, the original branding has been replaced with a mock company name and visual identity.
Assignment Background
Here is the original brief I received for the project:
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 how e-commerce product uploads are designed and how AI can be used to make data entry smoother. The research helped me come up with a few ideas for how I wanted Bella to work, and I jotted them down.
Task Solution
I came up with two solutions, and since I couldn’t decide which was best, I designed both: a CSV Data Importer and a Product Form.
Next, I outlined the key features I wanted the final design to include. Ensuring they address the user pain points.
AI Magic Wand: Pre-fill Data
One key challenge I wanted to tackle was making data entry faster, smarter, and more user-friendly. My solution: the AI Magic Wand, designed to reduce friction in the upload process and speed things up for admins.
How the AI Magic Wand Works
TThe AI Magic Wand addresses 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 fill the field.
“Magic Blue” Highlight: When AI fills a field, it is highlighted in a distinct shade of blue, making it easy to spot auto-generated values.
User Control: AI doesn’t make assumptions. Prefilled fields are fully editable, so users can tweak or clear the values if needed.
Feature One: CSV Upload
I designed a clear flow to illustrate how the CSV upload feature works.
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 usually drop notes after I have looked through the design and spotted mistakes.
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.
Impact and Benefits
Bella helps teams upload products faster and with fewer mistakes:
Speeds up product uploads with smart AI suggestions.
Reduces manual copy-paste and repetitive work.
Makes collaboration easier, even when not all product data is ready at once.
Helps admins stay in control. AI assists, but users make the final call
Final Thoughts
I enjoyed working on this design task as it got me thinking about how AI could empower e-commerce admins. I do wish I’d had time to interview the admins to better understand their challenges. It would have helped me design stronger personas to guide the final solution.
As for the UI, I’ll admit it should be better.
Hindsight: Nov 16, 2024
While working on this case study, a few new ideas for Bella came to mind. Beyond pre-filling the form with data, the AI could learn from user patterns and suggest the most likely values for certain fields.
Another idea is adding smart validation to catch inconsistent data. For example, if a product is marked as peanut butter-free, but peanut butter is listed as an ingredient, Bella could flag this and suggest corrections: either update the ingredient list or change the allergy info. This would help catch simple human errors.
Finally, to reduce long form entry, Bella could generate a dynamic set of fields based on a few key product details. The user would then just review and adjust as needed.
Fun Facts
Naming this project was harder than expected (naming things is not my strong suit). In the end, “Bella” was inspired by a bottle of Bell-Aqua water sitting on my desk.
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.
Now, off to learn Blender. Byeee.
