Overview
Overview
This is a web development project for a fictional space company called Orbit. The goal was to design a responsive website for their business, focusing on helping users discover the latest space-related news and articles. Users can also book upcoming space events or explore the latest activities. I developed an MVP to showcase the website’s core features and functionality
This is a web development project for a fictional space company called Orbit. The goal was to design a responsive website for their business, focusing on helping users discover the latest space-related news and articles. Users can also book upcoming space events or explore the latest activities. I developed an MVP to showcase the website’s core features and functionality
Timeline
Timeline
Apr 15 2024 - May 13 2024
Apr 15 2024 - May 13 2024
Project Team
Project Team
Relevant Coursework
Relevant Coursework
Role
Role
Web Developer
Web Developer
UX & UI Designer
UX & UI Designer
Tool
Tool
VS Code
Figma
Photoshop
Illustrator
Skills
Skills
Web Development (HTML + CSS)
Web Development (HTML + CSS)
UX Design
UX Design
Responsive Design
Responsive Design
What is Orbit?
Project Overview
Orbit is dedicated to space exploration. We believe there are still many unknown mysteries awaiting to be revealed, and we will continue our space discoveries, educating, and inspiring the public about space. Visitors can check out the latest events, news, and announcements on the Orbit website.
What is Orbit?
Project Overview
Orbit is dedicated to space exploration. We believe there are still many unknown mysteries awaiting to be revealed, and we will continue our space discoveries, educating, and inspiring the public about space. Visitors can check out the latest events, news, and announcements on the Orbit website.
What is Orbit?
Project Overview
Orbit is dedicated to space exploration. We believe there are still many unknown mysteries awaiting to be revealed, and we will continue our space discoveries, educating, and inspiring the public about space. Visitors can check out the latest events, news, and announcements on the Orbit website.
Problem Statement
Problem Statement
Problem
Problem
Information overload, making it hard to locate specific details.
Easy browsing of latest articles.
Simplified booking and searching for events and activity details.
A convenient way to subscribe to the newsletter.
Information overload, making it hard to locate specific details.
Easy browsing of latest articles.
Simplified booking and searching for events and activity details.
A convenient way to subscribe to the newsletter.
Design Solution
Design Solution
Display all the latest headlines on the homepage.
Enable users to save, like, or dislike articles so they can revisit them anytime.
Include a "Book Tour" button in the header, which will display all the latest events.
Display all the latest headlines on the homepage.
Enable users to save, like, or dislike articles so they can revisit them anytime.
Include a "Book Tour" button in the header, which will display all the latest events.
Research
Research
User Persona
User Persona
I created two personas to represent our target audience: a 14-year-old middle school student who is curious about science and space-related topics, and a graduate student studying aerospace engineering who enjoys checking out the latest space news.
I created two personas to represent our target audience: a 14-year-old middle school student who is curious about science and space-related topics, and a graduate student studying aerospace engineering who enjoys checking out the latest space news.
empathy Map
empathy Map
Observe user behaviors and how they interact with the product to identify ways to keep them engaged and eventually lead them to sign up for the newsletter.
Observe user behaviors and how they interact with the product to identify ways to keep them engaged and eventually lead them to sign up for the newsletter.
Design
Design
Style Guide
Style Guide
I chose carbon black, orange, and light grey as the primary colors, with typography inspired by NASA.
I chose carbon black, orange, and light grey as the primary colors, with typography inspired by NASA.
Prototype
Prototype
hi-fi Mockup
hi-fi Mockup
I created three pages of high-fidelity mockups for the website, featuring the homepage, article page, and Tour booking page.
I created three pages of high-fidelity mockups for the website, featuring the homepage, article page, and Tour booking page.
Deliver
Deliver
Final Design
Final Design
On the homepage, viewers can see all the latest articles and events featured on the landing page.
On the homepage, viewers can see all the latest articles and events featured on the landing page.
Try Dragging It
Try Dragging It
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg"><path d="M 7.793 0.293 C 8.183 -0.098 8.817 -0.098 9.207 0.293 L 13.707 4.793 C 14.097 5.183 14.097 5.816 13.707 6.207 L 9.207 10.707 C 8.815 11.086 8.191 11.08 7.805 10.695 C 7.419 10.309 7.414 9.685 7.793 9.293 L 10.5 6.5 L 1 6.5 C 0.448 6.5 0 6.052 0 5.5 C 0 4.948 0.448 4.5 1 4.5 L 10.5 4.5 L 7.793 1.707 C 7.403 1.316 7.403 0.683 7.793 0.293 Z" fill="rgb(89, 89, 89)" height="10.987498474496249px" id="hh9wAbXh8" width="13.99978645374972px"/></svg>)
News Section
News Section
In the news section, viewers can browse the latest headlines related to space.
In the news section, viewers can browse the latest headlines related to space.
Tour Booking
Tour Booking
The "Book Tour" button will take viewers to the ticket purchase page to complete their transaction.
The "Book Tour" button will take viewers to the ticket purchase page to complete their transaction.
Article page
Article page
Once users click on an article thumbnail, they can read the full article. The options to share, like, and dislike articles help us understand user behavior better and deliver more relevant content.
Once users click on an article thumbnail, they can read the full article. The options to share, like, and dislike articles help us understand user behavior better and deliver more relevant content.
Production
Production
Building the MVP
Building the MVP
By creating this MVP within a short timeframe, from research and design to prototyping and development. The website was coded in HTML and CSS and is fully responsive.
By creating this MVP within a short timeframe, from research and design to prototyping and development. The website was coded in HTML and CSS and is fully responsive.
The client requested that the website be built on Squarespace, as she had already subscribed to their payment plan. Even after the website was launched, our work continues as we explore ways to optimize SEO settings and keyword searches to maximize her business’s online exposure.
Outcomes
Outcomes
Summary
Summary
Working on a space-related project is something I've always wanted to do. As a space enthusiast, I've watched many space movies and documentaries, so creating a website where you can see all the exciting news and sign up for space events was a perfect fit for me. I definitely need to expand my web development skills to add more features to the site.
Working on a space-related project is something I've always wanted to do. As a space enthusiast, I've watched many space movies and documentaries, so creating a website where you can see all the exciting news and sign up for space events was a perfect fit for me. I definitely need to expand my web development skills to add more features to the site.
Next Project
Next Project
Phantom Pneuma
A web mini-game where you play as a supernatural detective
Phantom Pneuma
A web mini-game where you play as a supernatural detective
Phantom Pneuma
A web mini-game where you play as a supernatural detective