Our Client: Optiwise
- SaaS platform to help e-commerce sellers optimize their content for marketplace listings, to boost their rank and sales.
- Allows for run-time analysis of data and seller analytics.
- Help sellers improve the ranking and conversion rates of their products by analyzing marketing parameters.
- Create a solution that automates the generation of image content for online sellers.
- Tailored for sellers with annual sales ranging from one to ten million.
- An easy and effective method to enhance or initiate listing optimization.
[Including pictures would be nice!]
Satyam Goyal — ProjectManager
Matthew Fulde — Developer
Pranava Parasa — Developer
Xiaolin Ma — Developer
Dylan Ang — Developer
Nilesh Thiagarajan — Developer
Victoria Samaco — Designer
February — June 2023 | 15 weeks
Development: React, Vite, FastAPI, PIL, Dall-E 2, BootStrap
- Optiwise AI helps online sellers optimize their product listings to maximize customer reach and profits on platforms such as Amazon and Walmart
- Many sellers have difficulty creating enough descriptive images for all of their products manually and would appreciate an easier method
- How might we create a web application that allows users to upload an image and then add text to that image using text prompts?
To first tackle this problem, we conducted literature reviews and competitive analysis to find out what product listings do well on Amazon and Walmart. We analyzed the top product listings of products from various categories (furniture, cooking appliances, tech gadgets, cosmetics, etc.) to browse possible image layouts. Some of our key findings were:
- The image of the main product must be the center of attention
- Adding additional captions of the product’s main functions and specs are very helpful
- Mocking up the product in their intended environments do well
After looking at possible layouts, we started to brainstorm possible inputs the user would need to produce their optimized photo. These inputs would essentially be the core functions the user would use to customize and edit their product listings. The inputs we came up with were: adding background, text, photos, and colors. From there, we sketched out different designs to place them on the landing page of our website.
Next, we translated our sketches onto wireframes to further brainstorm possible layouts. We were debating on whether or not it would be better to have all the functions on the landing page or make the user sift through multiple pages to use the functions.
After getting feedback from the client, we were able to finalize the user flow and solidify the four main photo editing functions:
- Edit Background
- Add Text
- Add Photos
Within these functions, the user would be able to further customize their photos in real time. This phase in the design process was more exploration with colors, layout, and user interactions with buttons.
After testing our prototype with a few users, we realized there was confusion with:
- Button hierarchy as some of the color and stylistic choices weren’t consistent
- Re-uploading photos as it was only a drag/drop function
- The progression and navigation between the edit background, text, photos, and beautify functions
The takeaways from the usability testing influenced a lot of the hi-fi prototype’s final design. We mostly focused on making amore consistent color palette, a stronger button hierarchy, and made sure the spacing on each page followed a responsive grid lay out.
Try out the prototype here!
First, we brainstormed all possible edits that an initial image would need in order to make a high-quality product listing. We could split all of these possible actions into feature modules and develop each of them individually before vertically integrating them into a web application.
- Initial exploration using Jupyter Notebooks
- Creating python modules from scratch or wrapping existing APIs
- Integrating modules into web server
- Wire-framing a frontend
- Connecting frontend calls to backend
The way we implemented the actions present in the modules is through modules. These modules independently take care of each of the desired action while also creating a way to easily link many of them together. The modules include removing background, AI image generation, text generation and placement, and cropping/shadow removal.
Takeaways & Challenges
Defining how to tackle abstract goals
One significant challenge our project team encountered was grappling with abstract goals and finding the best approach to tackle them. However, this challenge provided us with valuable takeaways that have greatly improved our problem-solving skills. Firstly, we learned the importance of breaking down complex tasks into smaller, more manageable components. By deconstructing abstract goals into concrete, actionable steps, we were able to gain a clearer understanding of the path forward.
Additionally, we realized the significance of writing clear and well-defined APIs for each action or functionality. This practice allowed for more modular implementations, enabling us to make changes without disrupting the overall interface. Moreover, we discovered the value of thoroughly defining the input and output requirements for every code module. This approach streamlined the integration process between different parts of the project, making collaboration and future development significantly easier. These takeaways have equipped us with a more systematic and efficient approach to handling abstract goals, ultimately enhancing our team’s problem-solving capabilities.
Losing a designer
One of the biggest challenges our project team faced was the unexpected loss of one of our designers. It posed a significant hurdle for us, requiring us to adapt and reorganize our workflow. However, this challenge ultimately taught us valuable lessons. First and foremost, it emphasized the importance of being interdisciplinary. With one less designer, we had to step outside our designated roles and collaborate across disciplines to ensure the project’s success. It reinforced the significance of having a well-rounded skill set and a flexible mindset within the team.
This experience highlighted the need to set realistic goals and effectively communicate them with the client. We learned the importance of managing expectations and keeping open lines of communication to ensure alignment and avoid any misunderstandings. Despite the difficulties we faced, this challenge pushed us to grow and strengthened our ability to navigate unexpected obstacles, ultimately enhancing our team’s resilience and adaptability.
In the end, we did it! Our awesome team of seven members has successfully wrapped up this project, and we couldn’t be more proud. The amount of teamwork, dedication, and expertise that went into this is truly remarkable. We want to take a moment to shout out Optiwise for giving us this incredible opportunity. We can’t thank you enough for believing in us and allowing us to showcase our skills. Your support, guidance, and feedback throughout this journey have been invaluable. We’re grateful for this experience and eagerly anticipate more collaborations with you in the future. Thank you, Optiwise, for being an amazing client to work with!