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

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.

Moodboards, wireframe sketches and high-fidelity mockups

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.

Moodboard inspiration, sketches, mid-fidelity wireframes, and high-fidelity mockups

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.

Initial sketches, moodboard inspiration, display concepts and mid-fidelity prototype

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.

Moodboard inspiration, low-fidelity wireframes, high-fidelity mockups with design components

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.

Ideation, sketches, and the final iOS and Vision Pro icon design

Preview the CalcAbacus App Icon Design here in Spline

Design Challenge #6

User Social Media Profile

The social media profile design is inspired by the design concept of bento boxes, combining functionality with a visually appealing layout and components.

moodboard, sketches, revisions, wireframes, and the final mockup

Final Design Device Mockup Image

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.

AI integration and user chat flow to moodboard inspiration, sketches, mid-fidelity wireframes, and the final design mockup

Final Design Mockups of the AI chatbot UI Design Image

Design Challenge #8

Airplane Entertainment Dashboard

The Ryanair Airplane Entertainment Dashboard has three screens. The first shows seating information and upgrade options. The second displays critical flight information. The third is the entertainment hub with TV shows, movies, podcasts, and duty-free shopping.

Research flight data, style guides, moodboard inspiration, sketches, mid-fidelity wireframes, and high-fidelity wireframes

Final mockups for Ryanair's seat dashboard design Gif Animation

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.

Concept sketches and moodboard inspiration to low-fidelity wireframes, mid-fidelity wireframes, and the final design with interactive components.

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.