Optiwise

Winter/Spring 2023 Industry Project

Introduction

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.

Goal

• 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.

The Team

Satyam Goyal — ProjectManager

Matthew Fulde — Developer

Pranava Parasa — Developer

Xiaolin Ma — Developer

Dylan Ang — Developer

Nilesh Thiagarajan — Developer

Victoria Samaco — Designer

Timeframe

February — June 2023 | 15 weeks

Tools

Design: Figma

Development: React, Vite, FastAPI, PIL, Dall-E 2, BootStrap

The Project

Design

The Problem

• 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

Problem Statement

• How might we create a web application that allows users to upload an image and then add text to that image using text prompts?

User Research

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

This is an example of how a product can be mocked up in its intended environment.

This is an example of a product listing that uses its captions and call-out photos well.

Ideation

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.

Low-Fidelity Wireframes

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.

Mid-Fidelity Wireframes

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
• Beautify

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.

Design System

The colors and fonts were taken from Optiwise’s original website and branding.

Usability Testing

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

High-Fidelity Prototype

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!

Development

Software Architecture

Ideation

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.

Development Stages

1. Initial exploration using Jupyter Notebooks
2. Creating python modules from scratch or wrapping existing APIs
3. Integrating modules into web server
4. Wire-framing a frontend
5. Connecting frontend calls to backend

Module Development

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.

Frontend Overview

Our frontend makes use of 2 main tools: react JS and Vite. React is essentially a Javascript library developed with the goal of building user interfaces, and was used throughout our frontend code for the simplicity that it’s component based architecture provided us. Vite served as a local testing server to run our application, and was extremely useful because it allowed us to see our changes live on our website while writing code which greatly simplified the debug process. Apart from these 2, we also used HTML, JS, and CSS throughout our code. Although, for most of our styling we relied on Bootstrap CSS, which made our website responsive to different screen sizes and was more efficient overall than using 9vanilla CSS. To separate our front end code into different parts like our modules in the backend, we used pages and the react router with each different page representing a different functionality of our app. Overall, our front end was very simple, but still got the job done.

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.

Closing Remarks

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!