Mars Weather App
Project Prompt & Background Reasearch
Mars colonization is a topic many people are talking about and with the advancement of technology, the plan to send people to mars seems more and more realistic every day. I worked with a team of four students in BIMD 250 to design a piece of technology that would assist users in communicating something during their mission to Mars. While I worked on every part of the design process, I specialized in the graphic design and visual aspects of our technology.
My team was tasked to research information that would help us design the technology. I focused on understanding the current communication system and the challenges astronauts may face.
NASA uses the Deep Space Network (DSN), a collection of giant antennas that use radio waves to communicate with Earth from Mars and vice versa. However, the current communication services are barely managing to keep up with the multiple missions happening now.
On top of that, Mars has regular month-long dust storms that can interfere with the radio signals and cut off communication.
My design team wanted to design an interface, that serves as a weather app and can warn its users about upcoming dust storms and therefore give them enough time to send out important messages before they’re cut off.
Our Users
Our users are mostly astronauts, that have traveled to Mars, but have loved ones back on Earth. If a dust storm happens and astronauts had no prior knowledge about it and are cut off from communicating with their family and friends on Earth, that might cause them to worry.
Furthermore, if astronauts are required to send weekly updates to Earth Ground Control, and they are cut off all of a sudden, that might cause some disturbance and panic. We each created two personas individually, then combined them to create a primary and secondary persona. The primary persona is Amelia, who is a Data specialist and also a sister. She needs to communicate with Ground Control and give them updates on how they're doing, but also needs to communicate with her sister to let her know she's doing good.
Analysis of Existing Solutions
Next, each member analyzed a different weather website. I analyzed World Weather Online and was looking for certain criteria my team decided to focus on namely, where the location was
shown, how often the data was updated, the overall user experience, and extra features the
website provided. While trying to do so, I created the wireframe for the landing page to see the placement of buttons and features. I also created a flowchart to visualize the steps the user and the system take to check the weather in a certain city. I noticed what I liked and what I didn't and made notes of that to avoid when it comes to designing our interface.
Ideation
During the Ideation phase, I created a set of wireframes illustrating the screen for the set of actions a user will take to complete one task, namely checking the forecast and connectivity percentage, a style guide, and a mock-up for our app. For the style guide, I went for Mars’ colors (red and orange hues) against light and dark backgrounds, simulating light mode and dark mode. In my mock-up, I wanted to include a logo, and since our team’s name was “Tangerine” I decided to illustrate the planet Mars infused in a tangerine. For the background, I drew Mars’ landscape with the same colors from the style guide. The team ended up in love with the logo and background, and therefore we took my second mock-up of the landing page as the base for our final design.
Flowchart and Rapid Prototype
We assigned each member a different task to create a rapid prototype for. I choose to create a
rapid prototype for the task: changing the settings on the app. Most people like to personalize
their app’s appearance and therefore I thought an option to change the text size and display would be an important added feature to our app. Additionally, I added an option to turn the notifications on/off. I started by creating a user flow and then drew the corresponding wireframes, took a picture of them, and uploaded it to Marvel, a prototyping app, where you can link frames together.
Moderated User Testing
We ran our prototype through three user tests and recorded their feedback. We made an excel sheet and an additional table in google docs to take notes and write down observations while the user tests our rapid prototype. We saw where the user might have had any confusion or misunderstanding of some of the buttons or features. We also asked them a couple of questions at the end of the testing to get their feedback and any change recommendations.
We improved our design based on the tests and feedback before creating the high-fidelity
prototype in Figma (tinyurl.com/MarsAppPrototype). I created the frames for the landing page and settings.
Here are a few:
Personal Reflection
User testing was particularly valuable in pursuing this project. Getting an outsider's opinion is very important. They can look at the project from a different perspective that team members often don’t see. They can point out things that are confusing or distracting in a design or in the task flow, which can help better the design and overall user experience. Creating a script before user testing, made it easier to compare the results since all users had the same understanding and same directions on how to use the app and how to do each task.
I liked creating the visual design part of this whole project. I started by creating the style guide and using colors that matched both our theme of Mars but also our team’s name (tangerine). Thinking about the icons and fonts to use was also part of it. Then I created the logo and background for the landing page which was most fun and interesting. I started to see the vision I had come to life and flourish. Making sure the app as a whole has the same theme and aesthetic was also my field of interest. I look forward to creating more interfaces that are both easy to access, and also
aesthetically pleasing to use.
If I were to take this project further, I’d like to make sure the features on the settings app (changing the text size and display) carry on to the other screens (map and main weather page). Since I was only in charge of creating the settings page and we only got to do the high-fidelity prototype we didn’t manage to create that feature. I would also like to add other features that make the user experience better, like scrolling between the times on the hourly forecast and zooming in and out of the map by pinching the screen.