Website design
Cosmic Voyage
Travel Space was a collaborative UI design project created by three team members: Susan, Chareeya, and me. Our classmates and instructor voted it Best Project, recognizing its original concept, creativity, intuitive user flow, and cohesive visual design.
The Brief
The goal was to collaboratively design a responsive digital experience
design or import any common components such as icons, logos or UI elements like buttons. As a team, we were responsible for designing 3–4 key areas of the user experience, such as onboarding, registration, user settings, and checkout.
Each team member designed 2–3 pages or 4–6 screens, while working together to ensure the product felt consistent and connected.
PROJECT ROLE
UI UX designer
Challenge
Create an innovative concept for a futuristic space travel agency, combining a distinctive space-inspired visual identity with an intuitive and engaging user experience. Also, was to make the concept feel imaginative and futuristic while remaining functional and easy to navigate, maintaining a consistent design across desktop, tablet, and mobile.
Brainstorm
Solution
As a team, we began by brainstorming ideas to define the creative direction and overall experience of Travel Space. We explored futuristic typography, bold imagery, and space-inspired visual elements to create an immersive look and bring the concept of a space travel agency to life.
We established a consistent design system, reusable components, and clear user flows, ensuring a cohesive and seamless experience across desktop,
Design
Typography
Orbitron
Black 64 px
Headline 1
Trispace SemiBold 32 px
Headline 2
Trispace SemiBold 24 px
Headline 3
Trispace Regular 16 px
Body
Colour
#0E1E40
#DDE8F3
#265DAD
#7F39FB
#133173
#331C47
Components
Right from the start, we established a design system in Figma to maintain consistency across the website. Using reusable components, styles, and a consistent naming structure allowed us to apply changes efficiently throughout the design process while keeping the overall visual experience cohesive.
Approach
Next step create wireframes were created to test and agree on general directions and to clarify content blocks and fix the structure of the website.
Result
As the design progressed from initial wireframes to high-fidelity mock-ups, several refinements were made to improve the layout, visual hierarchy, and overall user experience. For the fictional Cosmic Voyage agency, the focus was on creating a consistent and intuitive user flow while introducing a futuristic visual style and engaging navigation that reflects the concept of space travel.
