Project Title

Design a User-Friendly Website or Mobile App Interface Using Generative AI

Project Overview

In this project, you will design a user-friendly interface for a website or mobile application using generative AI tools alongside traditional UI/UX design methods. You will start by selecting one app or website idea, generate UI designs using AI-powered tools, refine the results through prompt iteration and manual editing, and then support your design decisions with user flow diagrams and UX research insights.

By the end of the project, you will have a complete UI design concept, a documented AI prompt workflow, a user flow diagram, and a summarised UX research review that reflects a practical UI/UX design process.

Steps to Complete the Project 1. Choose Your App or Website Idea

Select one project to work on, for example food delivery app, property management system, study planner app, e-commerce website, analytics dashboard, or any website or mobile app idea of your choice. You will focus on a single project throughout the entire design process.

2. Select the AI Tools You Want to Use

Choose one or more generative AI tools to support your UI design process, such as Google Stitch, Uizard, Visily AI, Nano Banana, Banani, Manus, v0, or any other AI tool covered in the class. You may use different tools for different stages of the design if you wish.

3. Write Your UI Design Prompt

Create a clear text prompt that describes your desired interface, including app or website purpose, key features and functionality, target users, design style such as modern, minimal, or professional, color preferences, and layout or component requirements. Use this prompt to generate your initial UI design using the selected AI tool.

4. Refine and Improve the UI Design

Review the generated UI design and decide how to improve it, you can edit the design manually using Figma, or regenerate the UI design by rewriting and enhancing your prompt. If you regenerate the design, clearly document how you refined your prompt and what changes were made, this step emphasizes iteration and thoughtful design refinement.

5. Create a User Flow Diagram Using Miro

Using Miro, create a user flow diagram that shows how users navigate through your app or website, including entry points such as landing page or sign-up page, key screens and actions, and decision points and navigation paths. This step helps connect your UI design with user experience logic.

6. Conduct UX Research Using UX Pilot

Upload your UI design image to UX Pilot and run an AI-assisted UX review to analyze usability and clarity, identify potential user experience issues, and generate UX insights and feedback. Summarize the key findings and explain how they relate to your design decisions.

7. Finalize, Upload, and Engage With the Community

Upload your final UI design image or images, a brief description of your app or website idea, the AI tools you used, your original and revised design prompts, a screenshot or export of your user flow diagram, and a short summary of UX research insights to the Skillshare Project Gallery. Explore other students’ projects, leave constructive feedback, and respond to comments to reflect on different design approaches and ideas.

Muhammad Babar

--

1