Alien Adoption Agency

UI/UX Design, Service Design, Front-End

INTRODUCTION

Alien Adoption Agency is a futuristic website offering alien adoption services as humanity transitions into a multiplanetary civilization. As humans begin adopting alien babies into their families, this platform provides detailed alien profiles, related products, and a strict adoption process.

This project envisions a seamless and efficient user experience, integrating all aspects of the alien adoption journey to ensure a cohesive and engaging experience for users.

MY ROLE

As a front-end developer, service designer, and UI/UX designer for this team project, I focus on building the website using HTML, CSS, JS, and jQuery. Additionally, I contribute to brainstorming services, analyzing future markets for the alien adoption journey, and designing an intuitive user interface and seamless experience that integrates all aspects of the alien adoption services.

PROJECT DELIVERABLES

Wireframes, Final Design, Prototypes

TIMELINE

November 2023 - December 2023 (One month)

PROJECT SCOPE

2 Service Designers, 2 Graphic Designers, 1 Front-End Developer, 2 UI/UX Designers

TOOLS

Figma, Adobe CC, Canva, Zoom, VS Code

Challenge

The adoption process, when facilitated online, can present several pain points for prospective parents.

Complex and Lengthy Application ProcessesMany online adoption platforms require lengthy forms that can overwhelm first-time users, especially without clear guidance or instructions.

Inconsistent or Poor User Interface (UI)Many online adoption platforms have outdated or cluttered interfaces, making it hard for users to find information, navigate steps, or track progress.

Inadequate Communication and SupportSome online platforms provide poor customer support, leaving adoptive parents without help for application or paperwork issues.

Information OverloadOnline adoption portals overwhelm users by presenting too much disorganized information, often burying key details like eligibility, next steps, or critical documents in lengthy text.

Limited Educational ResourcesMany platforms lack adequate educational resources on adoption laws, trauma care, or parenting skills, leaving adoptive parents unprepared for the challenges ahead.

Limited Post-Adoption ResourcesAfter the adoption process, many online platforms lack sufficient post-adoption resources like counseling, support groups, or educational materials for adoptive parents.

Problem Discovery

Many online adoption platforms focus only on matching, neglecting support throughout the entire adoption journey.

The majority of online adoption platforms focus only on the final outcome, often overlooking crucial details throughout the adoption journey. Prospective parents need a user-friendly interface, simple forms, and ongoing support from start to post-adoption to ensure a smooth integration of the child into the family for long-term success. This sparked a question -

HMW improve the online adoption experience with a more intuitive interface and continuous support?

My Solution - Alien Adoption Agency

A futuristic, intuitive, and supportive redesign of adoption websites.

Adopt anytime with peace of mind.

Registration Form

Quickly register for alien adoption in just a few steps.
Clear registration steps with an intuitive interface suitable for users of all ages.

Alien Profiles

Find your destined alien baby from the vast reaches of the galaxy.

An innovative interface for discovering alien babies across different planets.
Easily find the alien baby you wish to adopt through pre-sorted, detailed alien profiles.

Multi-Planetary Products

Purchase perfectly designed products to help alien babies adapt smoothly to life on Earth.

Browse all innovative interstellar products at a glance.
Effortlessly understand every product with detailed descriptions and quickly book products anytime.

Adoption Support

Access full support from the Alien Adoption Agency.

Find quick solutions to your questions or issues by exploring existing FAQs.
Directly message the Alien Adoption Agency for further inquiries and ongoing support.

The Process

Wireframes

Wireframes establish the essential structure and layout for the adoption website, providing a blueprint for content organization and user interface design.

To gain a comprehensive understanding of the alien adoption website's structure, I created wireframes for different pages or parts of the website. Each wireframe focuses on alignment, element sizing, and layout. To avoid cluttered design, I adopted a clean, minimalist design with a clear hierarchy for all wireframes, allowing users to find key information without difficulty.

Forms are a crucial component of service-oriented websites, requiring users to complete them before accessing services. I have developed these forms from scratch, ensuring they are both official in appearance and user-friendly. Partial wireframes are shown below.

Final Designs

Giving a true representation of typical adoption websites helps visualize the strengths and weaknesses of the design work completed so far.

To achieve a realistic view of the alien adoption website, I added text and graphics to the completed wireframes. I focused on making all call-to-action buttons clear and easily noticeable, guiding users toward their desired actions.

For specific website sections, I have designed multiple layout versions and refined details accordingly. Testing these completed designs holistically allows for comprehensive comparisons, enabling practical decisions when finalizing implementations.

Prototypes

Prototyping is the final and most crucial step in the design process that brings interactivity and dynamics to the website.

To simulate the actual website experience, I created prototypes for each user interface, linking web pages to demonstrate navigation when users click buttons or text. I also reviewed the logic behind the user flow to ensure that the connections are intuitive and user-friendly, providing a seamless interaction.

While finalizing the prototypes, I made minor adjustments to enhance web interactivity and practicality based on user testing feedback. These changes included adjustments in background opacity, colour schemes, section layouts, and interactive elements such as hover effects.

Home

Profiles

Certificate

Products

Project Takeaways

A deeper understanding of bridging UI/UX design with technical proficiencies in web development.

This is my first web development project, where I've had the opportunity to work with an exceptional team. Together, we've merged creative design with technical development, enhancing our ability to integrate aesthetic design with functional programming. This project has challenged us to master the delicate balance between visual appeal and seamless interactivity, ensuring optimal website performance.

Upon completing this project, my user experience skills have significantly improved. Designing an engaging and intuitive UI for the unconventional concept of an alien adoption agency has enhanced my ability to adopt the user's perspective. Additionally, my technical expertise with essential web development tools like HTML, CSS, JavaScript, and jQuery has grown, especially in implementing complex animations and responsive layouts.

Next project

View

PetFeast

UI/UX Design, Responsive Design, Front-End