IRIS Lunar Rover Website Prototype
UX/UI Designer, Researcher, Information Architect
Background
Astrobotic Technology, partnered with Carnegie Mellon University, was selected by NASA's Small Business Innovation Research program in 2017 to develop a lunar rover architecture for small-scale science and exploration on the Moon and other planetary surfaces. In March 2018, they received funding to move to Phase II, aiming to produce a flight-ready rover to fly on the Peregrine lunar lander in 2021. This rover, IRIS, is a derivative of a CubeRover and is being developed by Carnegie Mellon University students.
In 2020, the team began working on a new brand identity and an informational marketing website for the IRIS rover but abandoned the project due to bandwidth constraints. Impressed by the recent Launch America Space-X mission on-air jackets created by Oxcart Assembly, they reached out for a similar creation for their project. This led to Oxcart taking over the entire logo, brand identity, and web presence.
brand design
Oxcart began work on the new IRIS branding through a series of client interviews, surveys, and working sessions. While I participated as a member of the Oxcart team, the brilliant final logo and patch design was the work of Chris Logsdon. The client feedback from this branding exercise was crucial for the direction of the website as well. The goals of the IRIS team were to inspire other students and "space geeks" by telling their story of a tiny rover with huge ambitions. The brand should be memorable, simple, and sleek, with a sense of movement. Red Whittaker, Chairman and CSO of Astrobotic, stressed that anything put out would also need to be approved by the CMU brand team.
The final logo concept included subtle nods to the rover's bottlecap-style wheels, and the inverted R and S hinted at the origin of the IRIS name being Siri backward. The patch design included stars representing the camera flashes from the photos that IRIS will take.
The final logo concept included subtle nods to the rover's bottlecap-style wheels, and the inverted R and S hinted at the origin of the IRIS name being Siri backward. The patch design included stars representing the camera flashes from the photos that IRIS will take.
Research, Goals, and roadmap
Market research was conducted by analyzing features and designs of related sites, including NASA's Perseverance Mars Rover Mission and other rover groups like Spacebit, Dymon Co Ltd, and Puli Space Tech. Additionally, sites from CMU, such as the Field Robotics Center, and other organizations like the University of Minnesota Robotics Group, were reviewed.
A Project Goals Venn diagram was created to align stakeholder needs:
A Project Goals Venn diagram was created to align stakeholder needs:
A living Feature Roadmap document was initiated to outline site requirements and potential features based on client interviews and market research:
Provisional personas
Three primary archetypes were created:
The Stargazer: A self-proclaimed "space nerd" who enjoys Apollo documentaries, astronomy, visits to the National Air & Space Museum, and reading Stephen Hawking. They vary widely in hobbies, interests, occupations, and demographics, united by their love of space. They could be a teenager into sci-fi or an older person who watched the moon landing on TV.
The Student: Aspiring CMU engineers, current CMU students, or engineering students from other schools. They share demographic overlap with traditional students and interest overlap with The Stargazer. With IRIS being a female-led team, there's an opportunity to attract female STEM students.
The Science Blogger: Media members writing stories on IRIS. They seek hard facts and a media kit but benefit from engaging and aesthetically appealing content, which enhances their enthusiasm and accuracy in writing.
Other potential users include:
The Student: Aspiring CMU engineers, current CMU students, or engineering students from other schools. They share demographic overlap with traditional students and interest overlap with The Stargazer. With IRIS being a female-led team, there's an opportunity to attract female STEM students.
The Science Blogger: Media members writing stories on IRIS. They seek hard facts and a media kit but benefit from engaging and aesthetically appealing content, which enhances their enthusiasm and accuracy in writing.
Other potential users include:
- Friends and Family
- CMU faculty
- Aerospace recruiters
- Other lunar rover teams
design
Before design began, UI requirements were formalized, and a basic site map was created. Due to the straightforward IA, no formal user or task flows were needed. The site was designed specifically for Webflow, given the client's familiarity with the platform. Based on client interviews and existing collateral, a bold, artsy design aesthetic was chosen. Quick concept sketches were created with basic layout ideas:
The site aimed to take users on a narrative journey down the home page, with off-ramps to explore other sections. The final design included subtle animations as items scrolled into view, with white line "tracks" of the rover moving down the page. A sticky nav with social links and an automatic scroll button was placed on the right.
Given the graphical flow of elements on the home page and the speed of designing with Figma, creating wireframes was deemed unnecessary. Instead, a high-fidelity prototype with placeholder images and text was developed.
The final interactive prototype (desktop viewing recommended):
Given the graphical flow of elements on the home page and the speed of designing with Figma, creating wireframes was deemed unnecessary. Instead, a high-fidelity prototype with placeholder images and text was developed.
The final interactive prototype (desktop viewing recommended):
testing and iterations
The design underwent minor aesthetic changes based on internal feedback, group crits, and rounds of prototype user testing. The overall flow and usability remained intact due to the simple, straightforward design.
Key Changes:
Key Changes:
Contact Form: Redesigned to better fit the UI look and feel.
Team Member Cards: Updated to match the thin white line theme, avoiding a large wall of white tiles.
Overlay Menu: Enhanced with a softer radial gradient and a wireframe mesh moon landscape surface.
Contact Page: Iterated to clarify logo meanings, remove redundant IRIS logo, match the form design, add a media kit icon, and include a partner heading.
responsive design
Once the desktop designs were finalized, mobile versions were created.
The home page was scaled down with a tighter stack, maintaining the narrative journey feel. The About the Rover and About the Mission pages were also scaled down with a linear stacking approach.
The Team page's module cards were stacked, and the blog page cards were redesigned for vertical formatting.
Finally, the Footer and overlay Menu received standard responsive designs. Social media links, always present in the sticky nav on desktop, were moved to the footer on mobile.
next steps
The concept will be presented to the client for feedback and to obtain the final copy and any updated graphic assets. Following this, user testing of a mobile prototype will be conducted to identify any necessary final iterations before proceeding to build the final site.
