UI Design Challenge

Exploring UI Design Trends and Techniques

Overview

This UI Design Challenge is an ongoing project aimed at exploring and improving my user interface design skills. It provides an opportunity to incorporate the latest design trends and push the boundaries of interface design. With each iteration, I experiment with intuitive design elements, and visually compelling interfaces to create a range of visually appealing and functional design aesthetic.

My Role

As a UI designer, I conceptualize, design, and iterate user interfaces. I research emerging trends in 3D and spatial design, experiment with innovative design elements, sketch, create wireframes, refine interfaces and prototyping within a limited amount of time. This challenge requires technical skills, a user-centric mindset, and an understanding of UI design principles to create engaging digital experiences.

Challenge Statement

Design user interfaces that incorporate AI, 3D elements and spatial design trends, focusing on interface design exploration and rapid prototyping within 4-6 hours for each challenge.

Client

Design Challenge, Self-directed

Timeline

04/01/2024 -04/14/2024

Team

Individual Designer

ACTIVITIES

  • Research & Ideation
  • Sketching
  • Wireframing
  • High Fidelity Mockups
  • Rapid Prototyping

Tools

Figma
Midjourney
ProtoPie
Spline

Design Challenge #1

Signup Page

I designed a sign-up page for this challenge to use spatial design principles and 3D elements to create an engaging user experience. The final UI design is optimized for both mobile and desktop devices, with the main focus being the spatial design visual mockup.
This image shows a signup page design concept for a website. It features a simple and clean layout with a 3D effect, making it visually engaging. The signup form includes fields for email, password, and confirmation password. There are also options to agree to terms of service and a submit button.
Preview the signup page mockup in Spline

Design Challenge #2

Product Checkout Page

This design challenge focuses on the product checkout page that draws inspiration from UI product design images generated in mid-journey. The challenge highlights the use of AR/VR experiences to enhance user engagement and product visualization during the checkout process.
This image shows a VR headset product checkout page. The design features an AR-style product image and progress bar tracking order stages. Text labels like "Description" and "Payment Details" guide users through the purchase process.
Preview the product checkout mockup here in Spline

Design Challenge #3

AI Smart Mirror

The AI Smart Mirror features Google Gemini AI technology and can be voice-controlled. It offers a multifunctional interface with a time display, weather updates, calendar integration, health metric monitoring, and IoT device control. It's a great example of AI integration for improved convenience and connectivity.
This image displays a concept for a smart mirror with a split screen. The left side shows a digital clock and weather icon. The right side showcases a calendar with event notifications. Text suggests possible functionalities like health metrics and smart home device controls.
Preview the AI Smart Mirror prototype here in Protopie

Design Challenge #4

Calculator App

The UI Calculator app features a neomorphic design with soft shadows and intuitive colors. Its minimalist layout and large buttons ensure ease of use and a modern interface.
This image shows a mobile calculator app design with a modern, minimalist layout. The calculator features large, rounded buttons with soft shadows for numbers and basic mathematical functions. A clear display shows the current calculation.
Preview the Calculator App here in Spline

Design Challenge #5

App Icon

The app logo design draws inspiration from the traditional abacus calculator, blending it with the sleek aesthetics of Apple iOS and adhering to the guidelines for app icons. It captures the essence of calculation and innovation, creating a visually appealing and recognizable logo.
This image depicts the design process for a mobile app icon. It includes sketches and the final icon design. The icon resembles an abacus calculator, referencing a traditional counting tool, designed within a square format following iOS app icon guidelines.
Preview the CalcAbacus App Icon Design here in Spline

Design Challenge #7

AI Website Chatbot

In this UI challenge, my main objective was to incorporate the AI capabilities of ChatGPT into a website chatbot. I aimed to use my existing knowledge and create a user flow for visitors to interact with the chatbot. The chatbot's interface design was inspired by the theme of my design portfolio website, which ensured a consistent and cohesive brand experience for the chat interface.

Design Challenge #9

VR/AR Music Editor

The Music Editor is a software application that is designed for Vision Pro. It utilizes spatial design principles for AR/VR music and sound editing. This innovative tool is customized to enhance the user's audio editing experience in immersive environments. The Music Editor combines cutting-edge technology with intuitive design, empowering users to create and manipulate music and soundscapes.
This animation showcases the development of a VR music editor user interface. It starts with concept sketches for the interface and music editing tools in VR. It then progresses through moodboard inspiration, low-fidelity wireframes, and concludes with the final design featuring various interactive components.
Preview the final interactive design mockup here in Spline

Design Challenge #10

UI Icon Set

I took inspiration from weather elements for the Icon Set Design challenge and created a set of vector icons using Figma. To ensure accuracy, I paid attention to every detail while designing each icon. Later, I extended the project into a 3D icon set using Spline, which gave the icons a more immersive look and feel.
This image shows the creation of a 3D weather icon set. It starts with 2D weather icon sketches and progresses through moodboard inspiration, mid-fidelity drafts, and culminates in final 3D weather icons like a sun and cloud raining, designed in Figma and Spline.
Preview the final weather icon set design here in Spline

Thank You!

I trust you found as much delight in observing this project as I did in crafting it.

Next Projects

UX/UI design project, QuantaCam 3D, a 3D AI generation concept app showcased on mobile mockup devices, featuring 3D designer screens, voice input screen and main logo loading screen.
Case Study

QuantaCam 3D

AI-driven 3D Modeling

UX and UI Design

Home page screenshots of KW Realtor marketing landing page, featuring real estate website design.
Case Study

Keller Williams Realty

Landing Page Design

UX and UI Design, Development