NASA is a non-profit organization that provides information about the latest missions to space. NASA is a government-funded organization with and history of taking the first man to the moon!
The primary function of their website is to inform and educate the public about space and technology. They have many resources that are used for educational purposes by the public. This 3-week project was to redesign the website to improve the usability of these resources.
Our research journey initiated with a comprehensive analysis of the NASA website, identifying analogous competitors, and conducting user interviews to evaluate website usability. Below, we present the findings of our research process.
Disclaimer for reader: This project was a bootcamp project. Prior to its commencement, we made attempts to contact NASA in hopes of gaining access to insider knowledge about their website. Regrettably, these attempts were unsuccessful.
We examined competitors across three different categories to gather insights for enhancing NASA's website redesign. SpaceX and Blue Origin impressed with their interactive features, creating enjoyable user experiences. Additionally, all three competitors displayed effective navigation systems. It's worth noting that their content primarily targeted a more intellectually inclined demographic. We identified this as a chance to set NASA's website apart from its competitors.
In formulating our problem statement for the NASA redesign project, we aimed to generate innovative solutions. During our research, we observed a notable gap among other agencies in catering to younger audiences. Given NASA's reputation as a prominent resource in Space and Technology education, we considered:
How might we improve the structure of NASA’s content to provide users a learning environment about space science and technology?
During our user interviews, a consistent theme emerged regarding user dissatisfaction with the disorganized arrangement of large image squares on the homepage. Additionally, users encountered challenges locating articles and other resources due to two navigation bars on the homepage.
After consolidating our user research findings, we embarked on defining our primary user persona. Meet Lucas, a middle school science teacher seeking engaging additions to his lesson plans. Lucas is passionate about nurturing his students' interest in STEM, particularly in the fields of space and technology.
As a team, we created a user journey map to evaluate its potential influence on Lucas's daily teaching of STEM topics to middle school students, with a special emphasis on fostering their enthusiasm for space exploration and technological advancements.
In our effort to improve the NASA website's user-friendliness, we conducted a detailed content review. We prioritized the information users value most, making it more accessible by relocating less important content to separate pages. From our research, users preferred content primarily around NASA's space missions, articles, and the latest discoveries.
Our early drafts of ideas, which we believed could enhance the visual hierarchy of both the homepage and article pages.
During the initial design phase, our primary focus was on the Home and Article pages. The original pages contained valuable information for users but lacked a consistent hierarchy to highlight what was most important. On the Mid-Fi Home page, we introduced a prominent search bar in the hero section, offering topic suggestions. This approach was meant to help users find what they needed without feeling overwhelmed by too much information.
We conducted usability testing with five users who were given three tasks to assess the efficiency of the redesigned website. The overall task completion rate was 60%, with an overall error rate of 40%. This revealed that accessing articles and mission data had improved in terms of user-friendliness. However, users encountered challenges when trying to save articles to their user accounts for later viewing.
We also gathered feedback on our design decisions, including:
Returning to our designs, we ensured the implementation of consistent buttons across all pages. We also made updates to certain images to align them better with our page designs and content. Additionally, we enhanced contrast on pages with black backgrounds to improve user orientation. With these improvements in place, we transitioned to the development phase.
In our development process, we utilized GitHub to store HTML and CSS files for all pages. However, we encountered challenges as a team when dealing with clashes in classes and identifications while coding individual pages. Each of us, including myself and two others, was assigned specific pages to code and develop. This marked our first collaborative development experience, and we soon realized the importance of frequent code merging to prevent errors across the entire project. This experience taught us the significance of maintaining consistent code integration.
As a first-time developer, I had a mixed experience. I cherished the opportunity to bring our designs to life but found challenges in coding features like glassmorphism and other special user interactions we had envisioned. To overcome issues related to color, sizing, and spacing, we turned to Zeplin, which provided detailed information to guide our page creation. Despite the challenges, this journey allowed me to grow as a developer and learn valuable insights during the process.
Next Steps for NASA prototype: In the future, we had intended to create a live quiz connecting astronauts with students to enhance their knowledge of space and technology. While this idea was part of our design, it remained underdeveloped. Additionally, we aimed to implement an email feature for our articles to provide users with more personalized access to information in the coming stages.
Lessons Learned: The development of the live site presented a significant learning opportunity. It became evident that a solid grasp of the original design was crucial for effective implementation into a fully functional website. Furthermore, clear communication within the team played a pivotal role in bridging the gap between the design and development phases. Ensuring everyone's alignment with both the design and development aspects proved challenging at times, as interpretations could vary, leading to divergent ideas and approaches.
In summary, this project highlighted the value of having a comprehensive grasp of design principles and emphasized the crucial role of transparent team communication in ensuring seamless transitions from design to development.
