UI Design Portfolio
Project 1: Gaming App
This project is a comprehensive betting gaming app that offers users the ability to manage their profiles, place bets on various sports, and watch live games directly within the app. The design is focused on providing a seamless user experience with easy navigation and accessible features.
User Journey:
- Onboarding: Users are welcomed with a cover page and prompted to log in or sign up.
- Account Creation: New users can create an account by providing necessary details or by using their social media accounts.
- Home Navigation: Once logged in, users can navigate through the home page to view available sports and live games.
- Bet Placement: Users can select a game, view its details, and place bets on their preferred outcomes.
- Live Streaming: Users can watch live games and follow the action directly within the app.
- Profile Management: Users can update their account information, check their deposit balance, and manage their notifications.
Design Highlights:
- Intuitive Layout: The app features a clean and intuitive layout that enhances user experience.
- Real-Time Updates: Live updates on games and scores to keep users informed.
- Responsive Design: Optimized for various devices to ensure a smooth experience on both mobile and tablet.
Key Features:
- Cover Page: An engaging cover page to attract users.
- Login Page: Users can log in using their email or through social media accounts like Google, Apple, or Facebook.
- Signup Page: Allows new users to create an account by providing their first name, last name, email, and password.
- Home Page: Displays available sports and live games.
- Betting Sports Page: Users can view detailed information about different sports events, including live scores and betting options.
- Forget Password Page: Provides an easy way for users to reset their passwords by entering their registered email or username.
- Account Management: Users can update their profile information and manage their betting preferences.
- Deposit Balance: Users can check their deposit balance.
- Notifications: Users can receive updates and notifications about their bets and favorite games.
- Live Games: Users can watch live games and place bets in real-time.
- Favorites: Users can add games to their favorite list for quick access.
Tools and Resources Used:
- Design Tools: Figma, Photoshop.
- Prototyping Tools: InVision.
- Usability Testing: UserTesting, Lookback.
Fonts:
- Manrope
Colors:
Font Size:
- Heading 1 : 48 Bold
- Heading 2 : 32 Semi Bold
- Heading 3 : 24 Medium
- Heading 4 : 16 Medium
- Paragraph : 12 Regular
Project 2: Marketing Platform
The Marketing Platform is an all-in-one solution designed to streamline the creation, management, and tracking of marketing campaigns for businesses of all sizes. This platform offers a robust set of tools that allow users to create targeted campaigns, track their performance in real-time, and gain valuable insights through detailed analytics. The user-centric design focuses on making complex marketing tasks simple and efficient.
Problem Statement:
Marketing teams often face challenges in managing multiple campaigns across different channels, tracking their performance, and gaining actionable insights. The lack of an integrated platform results in inefficient workflows, scattered data, and difficulty in measuring ROI. This project aims to address these issues by providing a unified platform that consolidates all marketing activities, making campaign management more efficient and data-driven.
Research and Insights:
- User Research: Conducted interviews and surveys with marketing professionals to understand their pain points and requirements.
- Competitive Analysis: Analyzed existing marketing platforms to identify gaps and opportunities for improvement.
- Key Insights:
- Users need an intuitive interface that simplifies campaign creation and management.
- Real-time analytics are crucial for making informed decisions.
- Integration with existing tools and platforms is essential for a seamless workflow.
Design Process:
- Discovery Phase: Gathered requirements through stakeholder interviews and user research.
- Wireframing: Created wireframes to outline the structure and layout of the platform.
- Prototyping: Developed interactive prototypes to test user flows and gather feedback.
- User Testing: Conducted usability testing with target users to refine the design.
- Final Design: Iterated on the design based on user feedback and testing results, ensuring the final product is both functional and user-friendly.
Tools and Resources Used:
- Design Tools: Figma, Photoshop.
- Prototyping Tools: InVision.
- Development Tools: HTML, CSS.
Fonts:
- Noticia Text.
- Inter.
Colors:
Font Size:
- Heading 1 : 64 Bold
- Heading 2 : 40 Semi Bold
- Heading 3 : 32 Medium
- Heading 4 : 24 Medium
- Paragraph : 18/20 Regular/ Light
Project 3: Travel Agency App
Focus Creative Studio is a new creative agency based in the UAE, offering comprehensive digital services including web design, UI design, marketing, SEO, and graphic design. The goal of this project was to design and develop a user-friendly, visually appealing website that effectively showcases the agency’s services and engages potential clients.
Problem Statement:
The primary challenge was to design a mobile app that combines various travel-related services into a cohesive and user-friendly interface, catering to users with diverse needs and preferences.
Research and Insights:
User Research: Conducted user surveys and interviews to understand pain points and preferences of travelers.
Competitive Analysis: Analyzed existing travel apps to identify strengths and weaknesses, and to gather inspiration for innovative features.
User Personas: Created detailed personas to represent different types of travelers (e.g., business travelers, vacationers, backpackers).
Tools and Resources Used:
- Design Tools: Figma, Photoshop.
- Prototyping Tools: InVision.
- Usability Testing: UserTesting, Lookback.
Design Process:
Ideation:
Brainstormed features and functionalities with the team.
Developed user flow diagrams to outline the user journey and interactions within the app.
Wireframes:
Created low-fidelity wireframes to outline the structure and layout of each screen.
Iterated on wireframes based on user feedback and usability testing.
Prototypes:
Used Figma and Photoshop to create high-fidelity mockups.
Incorporated the client’s branding guidelines and color schemes.
Ensured consistency in design elements across all screens.
Fonts:
- jsmath cmmi10.
- Lato.
Colors:
Font Size:
- Heading 1 : 64 Bold
- Heading 2 : 32 Semi Bold
- Heading 3 : 24 Medium
- Heading 4 : 16 Medium
- Paragraph : 12 Regular
Golden Pro Cleaning Service, a premier cleaning service provider in the UAE, required a website to showcase their wide range of services, allow easy online bookings, and provide detailed information about their cleaning solutions. The primary goal was to design an attractive, user-friendly website that highlights the professionalism and reliability of Golden Pro Cleaning Service.
Problem Statement:
The client needed a website that could effectively present their various cleaning services, facilitate bookings, and attract new customers through an engaging and modern online presence. The challenge was to ensure the website was visually appealing, easy to navigate, and provided all necessary information clearly.
Research and Insights:
User Research: Conducted interviews and surveys with existing and potential customers to understand their needs and preferences when looking for cleaning services.
Competitive Analysis: Analyzed other cleaning service websites to identify best practices and areas for improvement.
Market Research: Studied trends in the cleaning industry to ensure the website meets current market standards and customer expectations.
Tools and Resources Used:
- Design Tools: Figma, Photoshop.
- Prototyping Tools: InVision.
- Development Tools: HTML, CSS.
Design Process:
Ideation:
Brainstormed design concepts focusing on a clean, professional look with intuitive navigation.
Developed user personas to represent different types of customers, such as homeowners, office managers, and landlords.
Wireframes:
Created low-fidelity wireframes to outline the website’s structure and key elements.
Iterated on wireframes based on feedback from stakeholders and initial usability testing.
High-Fidelity Designs:
Used Figma and Photoshop to create high-fidelity mockups with a professional, clean aesthetic.
Ensured consistency in branding, colors, typography, and imagery.
Fonts:
- Big Shoulder Display.
- Inter.
Colors:
Font Size:
- Heading 1 : 64 Bold
- Heading 2 : 32 Semi Bold
- Heading 3 : 24 Medium
- Heading 4 : 16 Medium
- Paragraph : 12 Regular
Focus Creative Studio is a new creative agency based in the UAE, offering comprehensive digital services including web design, UI design, marketing, SEO, and graphic design. The goal of this project was to design and develop a user-friendly, visually appealing website that effectively showcases the agency’s services and engages potential clients.
Problem Statement:
The client needed a website that could effectively present their various cleaning services, facilitate bookings, and attract new customers through an engaging and modern online presence. The challenge was to ensure the website was visually appealing, easy to navigate, and provided all necessary information clearly.
Research and Insights:
User Research: Conducted interviews and surveys with existing and potential customers to understand their needs and preferences when looking for cleaning services.
Competitive Analysis: Analyzed other cleaning service websites to identify best practices and areas for improvement.
Market Research: Studied trends in the cleaning industry to ensure the website meets current market standards and customer expectations.
Tools and Resources Used:
- Design Tools: Figma, Photoshop.
- Prototyping Tools: InVision.
- Development Tools: HTML, CSS.
Design Process:
Ideation:
Brainstormed design concepts focusing on a clean, professional look with intuitive navigation.
Developed user personas to represent different types of customers, such as homeowners, office managers, and landlords.
Wireframes:
Created low-fidelity wireframes to outline the website’s structure and key elements.
Iterated on wireframes based on feedback from stakeholders and initial usability testing.
High-Fidelity Designs:
Used Figma and Photoshop to create high-fidelity mockups with a professional, clean aesthetic.
Ensured consistency in branding, colors, typography, and imagery.
Fonts:
- Big Shoulder Display.
- Inter.
Colors:
Font Size:
- Heading 1 : 64 Bold
- Heading 2 : 32 Semi Bold
- Heading 3 : 24 Medium
- Heading 4 : 16 Medium
- Paragraph : 12 Regular
Project 6:Headphones App
This project involved designing a modern, user-centric mobile app for a company that specializes in high-quality headphones. The app offers both wired and wireless headphone options and includes a feature for users to leave and read reviews. The aim was to create an engaging and seamless shopping experience that highlights the product’s features and gathers user feedback effectively.
Problem Statement:
The client required an intuitive and aesthetically pleasing app to showcase their headphones, facilitate easy purchases, and build a community through user reviews. The challenge was to design an app that effectively emphasizes the quality and features of the headphones while ensuring an easy and engaging user experience.
Research and Insights:
User Research: Conducted surveys and interviews with potential customers to understand their preferences in headphone products and mobile shopping experiences.
Competitive Analysis: Analyzed other audio equipment apps to identify best practices and areas for differentiation.
Market Research: Examined current trends in the audio equipment market to ensure the app meets consumer expectations.
Tools and Resources Used:
- Design Tools: Figma, Photoshop.
- Prototyping Tools: InVision.
- User Testing Tools: UsabilityHub, UserTesting.
Design Process:
Ideation:
Brainstormed design concepts focusing on simplicity, elegance, and usability.
Developed user personas representing different types of headphone buyers, such as audiophiles, casual listeners, and tech enthusiasts.
Wireframes:
Created low-fidelity wireframes to outline the app’s structure and key elements.
Iterated on wireframes based on feedback from stakeholders and initial usability testing.
High-Fidelity Designs:
Used Figma and Photoshop to create high-fidelity mockups with a modern, clean aesthetic.
Ensured consistency in branding, colors, typography, and imagery.
Fonts:
- Roboto condensed.
- Laila.
- Inter.
Colors:
Font Size:
- Heading 1 : 64 Bold
- Heading 2 : 32 Semi Bold
- Heading 3 : 24 Medium
- Heading 4 : 16 Medium
- Paragraph : 12 Regular
This project involves designing a modern, user-friendly website for Gate One Clinic, a medical tourism clinic based in Turkey. The website aims to attract international patients by showcasing the clinic’s expertise in facial and body cosmetic surgery, dental treatments, and hair transplantation. The goal is to provide potential patients with comprehensive information about the services, the clinic’s credentials, and the medical tourism process.
Problem Statement:
Gate One Clinic needed a website that not only presents its medical services effectively but also builds trust and credibility with potential international patients. The website must facilitate easy navigation, provide detailed information about procedures, and offer a seamless user experience to encourage contact and inquiries.
Research and Insights:
User Research: Conducted surveys and interviews with potential patients to understand their needs and concerns regarding medical tourism.
Competitive Analysis: Analyzed websites of leading medical tourism clinics to identify strengths and areas for improvement.
Market Research: Studied the medical tourism industry trends to ensure the website meets the expectations of international patients.
Tools and Resources Used:
- Design Tools: Figma, Photoshop.
- Prototyping Tools: InVision.
- Development Tools: HTML, CSS.
Design Process:
Ideation:
Brainstormed design concepts focusing on clarity, trustworthiness, and ease of use.
Developed user personas representing different patient demographics such as cosmetic surgery seekers, dental patients, and hair transplant candidates.
Wireframes:
Created low-fidelity wireframes outlining the structure and layout of key pages.
Iterated on wireframes based on feedback from stakeholders and usability testing.
Prototypes:
Used Figma to create high-fidelity mockups with a professional, clean, and welcoming aesthetic.
Ensured consistency in the clinic’s branding, colors, typography, and imagery.
Fonts:
- Roboto.
- Lato.
Colors:
Font Size:
- Heading 1 : 64 Bold
- Heading 2 : 32 Semi Bold
- Heading 3 : 24 Medium
- Heading 4 : 16 Medium
- Paragraph : 12 Regular
Project 8:Cooking Recipes App
This project involves designing a mobile application focused on providing users with a wide variety of cooking recipes from different cuisines. The app features account registration, multiple recipe categories, step-by-step instructions, and video tutorials to enhance the user experience and make it easier to follow recipes.
Problem Statement:
The primary challenge was to create an intuitive and visually appealing app that allows users to easily discover, save, and follow recipes from various cuisines. The app also needed to support video tutorials to aid users in cooking the recipes accurately.
Research and Insights:
User Research: Conducted surveys and interviews with home cooks and professional chefs to understand their needs, preferences, and challenges in following recipes.
Competitive Analysis: Analyzed popular cooking apps to identify best practices and unique features that could be incorporated.
Market Research: Studied trends in the culinary world to ensure the app content stays relevant and appealing.
Tools and Resources Used:
- Design Tools: Figma, Photoshop.
- Prototyping Tools: InVision.
- User Testing Tools: UsabilityHub, UserTesting.
Design Process:
Ideation:
Brainstormed design concepts and features with the team.
Developed user personas representing different types of users, such as novice cooks, experienced chefs, and food enthusiasts.
Wireframes:
Created low-fidelity wireframes to outline the structure and layout of key screens.
Refined wireframes based on user feedback and usability testing sessions.
Prototypes:
Used Figma to create high-fidelity mockups with a modern, clean, and user-friendly interface.
Incorporated the client’s branding guidelines, ensuring consistency in colors, typography, and visual elements.
Fonts:
- Gizel.
- Lato.
Colors:
Font Size:
- Heading 1 : 64 Bold
- Heading 2 : 32 Semi Bold
- Heading 3 : 24 Medium
- Heading 4 : 16 Medium
- Paragraph : 12 Regular
Project 9:Itern2grow Website
Intern2Grow is an innovative platform that provides real-world tasks and tests for aspiring frontend developers, backend developers, UI designers, graphic designers, and more. Upon successful completion of these tasks, participants receive a certification of completion. The objective of this project was to redesign the Intern2Grow website with a modern and digital look to enhance user engagement and streamline the certification process.
Problem Statement:
Research and Insights:
User Research: Conducted surveys and interviews with current users to understand their experiences and identify areas for improvement.
Competitive Analysis: Reviewed similar platforms to identify best practices and unique features.
User Personas: Developed personas for different user groups including frontend developers, backend developers, UI designers, graphic designers, and other target users.
Tools and Resources Used:
- Design Tools: Figma, Photoshop.
- Prototyping Tools: InVision.
- Development Tools: HTML, CSS.
Design Process:
Ideation:
Brainstormed design concepts and features with the team.
Created user journey maps to visualize the user experience from task selection to certification.
Wireframes:
Developed low-fidelity wireframes to outline the new structure and layout of key pages.
Conducted usability testing to gather feedback and make necessary adjustments.
High-Fidelity Designs:
Used Figma and Photoshop to create high-fidelity mockups with a modern and digital aesthetic.
Ensured consistency with the client’s branding guidelines, incorporating modern design elements such as gradients, clean typography, and engaging visuals.
Fonts:
- Inter.
- Lato.
Colors:
Font Size:
- Heading 1 : 64 Bold
- Heading 2 : 32 Semi Bold
- Heading 3 : 24 Medium
- Heading 4 : 16 Medium
- Paragraph : 12 Regular
Project 10:Modern Real Estate
The client is an overseas real estate investment firm specializing in providing investors with the right opportunities to invest in the real estate sector. The objective of this project was to design a modern and intuitive website that showcases prime real estate investment opportunities across various countries, helping investors make informed decisions and facilitating the investment process.
Problem Statement:
The main challenge was to create a sophisticated and user-friendly website that effectively highlights investment opportunities, provides comprehensive property details, and supports investors in making informed decisions while ensuring a seamless user experience.
Research and Insights:
User Research: Conducted interviews and surveys with potential investors to understand their needs, preferences, and pain points.
Competitive Analysis: Analyzed websites of leading real estate investment firms to identify best practices and unique features.
Market Research: Studied the real estate markets in target countries to ensure the website content is relevant and up-to-date.
Tools and Resources Used:
- Design Tools: Figma, Photoshop.
- Prototyping Tools: InVision.
- Development Tools: HTML, CSS.
Design Process:
Ideation:
Brainstormed design concepts and strategies with the team.
Developed user personas to represent various types of investors, including individuals, corporate clients, and institutional investors.
Wireframes:
Created low-fidelity wireframes to outline the structure and layout of key pages.
Iteratively refined wireframes based on feedback from stakeholders and usability testing.
Prototypes:
Used Figma and Photoshop to create high-fidelity mockups with a modern and professional aesthetic.
Incorporated the client’s branding guidelines, ensuring consistency in colors, typography, and visual elements.
Fonts:
- Inter.
Colors:
Font Size:
- Heading 1 : 64 Bold
- Heading 2 : 32 Semi Bold
- Heading 3 : 24 Medium
- Heading 4 : 16 Medium
- Paragraph : 12 Regular