client
Carnegie Mellon University
category
Digital Experiences
date
2020
IRIS Lunar Rover Website Concept
UX/UI Designer, Researcher, Information Architect
Background
Astrobotic Technology, in partnership with Carnegie Mellon University, was selected by NASA's Small Business Innovation Research in 2017 to develop a small lunar rover architecture capable of performing small-scale science and exploration on the Moon and other planetary surfaces. In March 2018, the team was awarded funds to move on to Phase II, and under this agreement, Astrobotic will produce a flight-ready rover that will fly on the Peregrine lunar lander to the Moon in 2021. This rover will be the first derivative of a CubeRover, a spinoff called IRIS, being developed completely by Carnegie Mellon University students
In 2020 the team started work internally on a new brand identity and an informational marketing website for the IRIS rover but quickly abandoned the project due to bandwidth constraints. After being impressed with the recent Launch America Space-X mission on-air jackets created by Oxcart Assembly, they reached out to see if they could have something similar created for their own project. As these jackets would require IRIS patches, the conversation then 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 Astrobiotic, 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 bottlecap style wheels of the rover and inverted R and S hinted at the the origin of the IRIS name being Siri backwards. The patch design included stars that also represent the camera flashes from the photos that IRIS will take.
The final logo concept included subtle nods to the bottlecap style wheels of the rover and inverted R and S hinted at the the origin of the IRIS name being Siri backwards. The patch design included stars that also represent the camera flashes from the photos that IRIS will take.
Research, Goals, and roadmap
Market research was done by analyzing and cataloging features and the design of other related sites. These included similar space programs such as NASA's Perseverance Mars Rover Mission and other "competitor" rover groups Spacebit, Dymon Co Ltd, and Puli Space Tech, other CMU sites such as the CMU Field Robotics Center, and sites from other organizations like the University of Minnesota Robotics Group.
A Project Goals Venn diagram document was completed to help keep all the stakeholder needs aligned:
A Project Goals Venn diagram document was completed to help keep all the stakeholder needs aligned:
A living Feature Roadmap document was started to map out the site requirements and potential features based on the client interviews and market research:
Provisional personas
Three primary archetypes were created:
The Stargazer is a self-proclaimed "space nerd" and enthusiast. They watch Apollo documentaries, know astronomy facts, enjoy visits to the National Air & Space Museum, and have read Stephen Hawking. The group has an enormous amount of variability though in terms of other hobbies and interests, occupations, geographical location, and marital status. The Stargazer could be a teenager that loves sci-fi and video games or a grandpa that actually watched the first moon landing on TV. What unites this archetype is their love of space.
The Student may be an aspiring CMU engineer, an existing CMU student, or an engineering student in another school. They have a lot of demographic overlap with traditional students and a lot of interest overlap with The Stargazer. Note, that while STEM generally skews male, IRIS is a female-led team and there could be an opportunity there to specifically attract female STEM students to become fans of the project.
The science blogger is a member of the media who is writing a story on IRIS. They think they just want the hard cold facts and a quick download of the media kit, but giving them aesthetically appealing and engaging content it will subconsciously make them more enthusiastic, and accurate, in their writing.
Other potential users, whose goals will be similar to the above archetypes include:
The Student may be an aspiring CMU engineer, an existing CMU student, or an engineering student in another school. They have a lot of demographic overlap with traditional students and a lot of interest overlap with The Stargazer. Note, that while STEM generally skews male, IRIS is a female-led team and there could be an opportunity there to specifically attract female STEM students to become fans of the project.
The science blogger is a member of the media who is writing a story on IRIS. They think they just want the hard cold facts and a quick download of the media kit, but giving them aesthetically appealing and engaging content it will subconsciously make them more enthusiastic, and accurate, in their writing.
Other potential users, whose goals will be similar to the above archetypes 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. Because the IA was relatively straightforward, no formal user or task flows were needed. As the client was already familiar with the Webflow, the site was designed specifically to work well for that platform. Based on client interviews and existing collateral, a punchy and bold artsy design aesthetic was chosen. Quick concept sketches were created with basic layout ideas:
The general concept of the site was to take users on a narrative journey down the home page, with off-ramps as needed to explore other sections in detail. The final version of the page would involve a lot of subtle animation as items were scrolled into view, including the two white line "tracks" of the rover making their way down the page. A sticky nav with social links and an automatic scroll button would be ever-present on the right.
Due to the home page layout being so heavily informed by the graphical flow of elements, and the speed of designing with Figma, creating wireframes was seen as an extra step with no actionable data, so I moved directly to a high fidelity prototype consisting of all the major pages with placeholder images and text.
The final interactive prototype (desktop viewing recommended):
Due to the home page layout being so heavily informed by the graphical flow of elements, and the speed of designing with Figma, creating wireframes was seen as an extra step with no actionable data, so I moved directly to a high fidelity prototype consisting of all the major pages with placeholder images and text.
The final interactive prototype (desktop viewing recommended):
testing and iterations
The design went through a few minor changes, mostly aesthetic, based on internal feedback and tinkering, group crits, and a few rounds of prototype user testing. There were no issues with the general flow and usability of the site, which was expected as it was designed to be simple, straightforward, and bold.
The contact form, visible on most pages, went through a drastic redesign to better fit the UI look and feel of the page.
The team member cards also went through a visual change to better match the thin white line theme one the rest of the site and to visually stray away from a large wall of white tiles.
The overlay menu was given a visual upgrade through a softer radial gradient and the addition of a wireframe mesh moon landscape surface that again tied back into the thin white line aesthetic.
The Contact page went through an iteration as users were somewhat confused with what the different logos meant on the page. The final design got rid of the redundant IRIS logo, matched the form to the contact form on other pages, gave the media kit an icon, and added a partner heading.
responsive design
Once the desktop designs were finalized, mobile versions were created.
The home page was simply scaled-down with a tighter stack, but still containing the feel of a narrative journey. The About the Rover and About the Mission (not pictured) pages were scaled-down with a more traditional linear stacking.
The Team page, with its module cards, was a simple stack. Similarly, the blog page was stacked but the cards were redesigned for vertical formatting.
Finally, the Footer and overlay Menu received fairly standard responsive designs. Social media links, always present on the sticky nav in desktop were moved to the footer on mobile.
next steps
The concept will be presented to the client for feedback and to get final copy and any updated graphic assets. User testing of a mobile prototype will then be conducted for any final iterations before moving onto building the final site.
