UXify

• 

  UXify - Uploading an Image

• 

  UXify Providing recommendations

Inspiration

I was inspired by existing website optimization tools but felt they lacked a visual analysis component. I wanted to leverage AI to analyze the visual layout of websites and apps for a more holistic approach.

What it does

• UXify is an AI-powered website and app optimization tool that uses Google's Gemini AI to analyze screenshots. It identifies potential design issues and provides actionable recommendations for improvement.
• Users simply upload a screenshot of their website or app.
• UXify analyzes the visual elements using Gemini AI and generates a report with suggestions on how to improve layout, navigation, button placement, color scheme, and other user interface (UI) aspects.
• UXify integrates with A/B testing tools, allowing users to test different design variations based on the recommendations and see which one performs better with real users.

How we built it

• I built UXify using Streamlit, a Python framework for creating web apps. Streamlit allowed me to quickly prototype and deploy the user interface.
• For the core analysis functionality, I leverage Google's Gemini AI. I explored its capabilities for image analysis and identified the best approach to extract insights from website and app screenshots.
• I also used libraries like Pandas for data manipulation and textwrap for formatting the recommendations report.

Challenges we ran into

• A challenge was ensuring the recommendations generated by the AI were clear, actionable, and relevant to the specific website or app being analyzed.
• Another challenge was ensuring accurate analysis of complex website layouts. I fine-tuned the Gemini AI integration to handle various design elements effectively.
• I also encountered issues when trying to grab a screenshot of a website using the Puppeteer library. Streamlit and Puppeteer kept crashing each time it needed to download a screenshot of a website.
• I opted to use an upload of an image instead of using the Puppeteer library for grabbing a screenshot.

Accomplishments that we're proud of

• I successfully integrated Gemini AI to analyze website screenshots, extracting meaningful insights about the visual design.
• The recommendations generated by UXify are clear, actionable, and tailored to the specific website or app being analyzed. They address common design issues and suggest improvements based on UI best practices.
• The A/B testing integration allows users to validate the impact of design changes suggested by UXify, providing data-driven decision making for website and app optimization.

What we learned

• I gained valuable experience working with Streamlit, a powerful tool for building user-friendly web applications.
• I learned a lot about the capabilities and limitations of Google's Gemini AI for image analysis. I developed strategies to optimize its performance for website and app optimization tasks.
• The project deepened my understanding of user experience (UX) best practices and the importance of visual design in creating user-friendly websites and apps.

What's next for UXify

• I plan to expand UXify's capabilities to analyze mobile apps in addition to websites.
• Future development will explore integrating with popular design tools to streamline the workflow for designers and developers.
• My vision is for UXify to become an essential tool for anyone creating websites and apps, helping them achieve optimal user experience and maximize conversion rates.

Built With

• ai
• gemini
• streamlit
• vertex
• vertexai