SCROLLYTELLING
Layouts
Featured story
Utilizing astonishing photography to catch the viewer's attention, guiding them to the most relevent event
Essential news
Latest updates, news stories and live coverages easy available with aother search bar.
Interactive scrolling
Engagement beyond the news bulletin. Zooming out of our home planet to reveal...
..our galactic neighbourhood..
..and providing useful information about the celestial bodies and missions planned.
![](https://static.wixstatic.com/media/0703f7_3e90695e2dcf4e009b24ec4d6b879cb0~mv2.webp/v1/fill/w_147,h_667,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/wireframe.webp)
Wireframe
![](https://static.wixstatic.com/media/0703f7_ded46d73714f4ab599a0e8f735b00299~mv2.png/v1/fill/w_49,h_25,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/nasa-logo-web-rgb.png)
Want some space?
Reimagining NASA's website for more immersive user engagement
![](https://static.wixstatic.com/media/0703f7_e12bcd42d1874d019cdd492da7aa6ce7f000.jpg/v1/fill/w_160,h_82,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/0703f7_e12bcd42d1874d019cdd492da7aa6ce7f000.jpg)
OVERVIEW
Background
National Aeronautics and Space Administration's primary portal - nasa.gov's purpose is to share information and inspiration with the public. But the website's experience is unintuitive and overwhelming.
As the sole contributor in this school project, I redesigned the website's interface with the aim of creating a more immersive and engaging experience that could better achieve its purpose.
Duration
My Role
UI Design
5 weeks
WHY DOES IT NEED A REDESIGN?
The website's objective is to share information and inspiration with the public via an engaging news site.
Lack of hierarchy, cluttered and confusing navigation, inconsistant page layouts.
Form balanced with function, modern, focused, trustworthy and simplified with informational.
Results in difficulties in finding information and fully appreciate NASA's groundbreaking efforts.
Intended result is to encourage engagement in immersive experiences and deeper, focused learning.
Current
Redesign
![](https://static.wixstatic.com/media/0703f7_67ae9f3b9eeb4091b938b5ee00700427~mv2.png/v1/crop/x_0,y_0,w_4488,h_2663/fill/w_49,h_29,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Group%201.png)
![](https://static.wixstatic.com/media/0703f7_6594fb2f86e34fa2b14c984061569095~mv2.png/v1/crop/x_0,y_0,w_4536,h_2712/fill/w_49,h_29,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/1.png)
![](https://static.wixstatic.com/media/0703f7_67ae9f3b9eeb4091b938b5ee00700427~mv2.png/v1/fill/w_49,h_51,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Group%201.png)
![](https://static.wixstatic.com/media/0703f7_b3d0d3fc710144ee98d1577190789df7~mv2.png/v1/fill/w_49,h_57,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Group%202.png)
![](https://static.wixstatic.com/media/0703f7_76f75307ea394d0da800138303f62cde~mv2.png/v1/crop/x_0,y_86,w_1195,h_1932/fill/w_49,h_79,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Group%205.png)
Heuristic Evaluation
Crowded navigation
Comprises two navigation bars and submenu items- both of them very busy, leading to lack of clarity of purpose and hierarchy.
Monotonous
With a lack of visual hierarchy, the page follows a rectangular grid with little variation in shapes or grouping of information to guide the readers.
Disorganized
It is hard to find relevant search results due to the tight layout i.e. their proximity and lack of cues like dates and images.
Lack of hierarchy
The page lacks proper text hierarchy and breathing space, making it overwhelming and cumbersome to read.
Underutilized banner
The top banner is too wide but doesn’t include relevant content.
Inconsistent layout
The layout, specifically white space usage is uneven, and looks awkward.
For inspiration, I looked no further than NASA's own various websites. Many of them have some breathtaking features that could be brought to the primary portal. One could spend hours zooming in and out of the real time galactic simulations and awe in the endless possibilities of deep space.
PROCESS - KICKOFF
Inspiration
![](https://static.wixstatic.com/media/0703f7_31a3e54d86b54202bd7ad0e23e27e5f8~mv2.png/v1/fill/w_49,h_41,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/IMMERSE.png)
![](https://static.wixstatic.com/media/0703f7_1bb5c409c6c64b549a8c26f644ea4bb0~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/DIAGRAMS.png)
Artemis Mission
![](https://static.wixstatic.com/media/0703f7_bb06ea61f81f4b008676b7bbb5f02f8b~mv2.png/v1/crop/x_38,y_0,w_958,h_138/fill/w_47,h_7,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Frame%208.png)
![](https://static.wixstatic.com/media/0703f7_b1d141de2aeb459f9050969bf575b1e4~mv2.png/v1/crop/x_25,y_0,w_1811,h_246/fill/w_48,h_7,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Frame%209.png)
H1 Clarendon
H2 Archer
Body Charter
![](https://static.wixstatic.com/media/0703f7_1a9204982f8c4d929f121fac2c68eade~mv2.png/v1/fill/w_88,h_88,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/gradient.png)
Explorations
Which approach would be the best fit for the wide range of audiences who visit the website - American public ie taxpayers, educators, researchers, students, children and space enthusiasts worldwide?
Futuristic, exciting, modern
Trustworthy, accountable
Moodboards
![](https://static.wixstatic.com/media/0703f7_1136d14107af4f50b3ccb603d26132e7~mv2.png/v1/fill/w_49,h_29,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Typography2.png)
Typography & Colours
![](https://static.wixstatic.com/media/0703f7_6325daf588a3455282f48bc7fe65b480~mv2.png/v1/crop/x_0,y_0,w_2928,h_1636/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/laptop.png)
![](https://static.wixstatic.com/media/0703f7_28bed4a6f96349edaae4035517369386f000.jpg/v1/fill/w_152,h_90,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/0703f7_28bed4a6f96349edaae4035517369386f000.jpg)
![](https://static.wixstatic.com/media/0703f7_6325daf588a3455282f48bc7fe65b480~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/laptop.png)
![](https://static.wixstatic.com/media/0703f7_9bb715ca2f19433ea87ee9c03e6f297df000.jpg/v1/fill/w_160,h_90,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/0703f7_9bb715ca2f19433ea87ee9c03e6f297df000.jpg)
Life, forever dying to be born afresh, forever young and eager, will presently stand upon this Earth as upon a footstool, and stretch out its realm amidst the stars.
HG Wells
![](https://static.wixstatic.com/media/0703f7_e0a5a5039b444b49b08cd729af0c5931~mv2.webp/v1/fill/w_147,h_271,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/1.webp)
![](https://static.wixstatic.com/media/0703f7_859bb439405747709d0924d0304a5c81~mv2.webp/v1/fill/w_147,h_323,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/2.webp)
![](https://static.wixstatic.com/media/0703f7_1722f1b56f054fa1b3546daa7fe2a95df000.jpg/v1/fill/w_160,h_65,al_c,q_80,usm_0.66_1.00_0.01,blur_3,enc_auto/0703f7_1722f1b56f054fa1b3546daa7fe2a95df000.jpg)
![](https://static.wixstatic.com/media/0703f7_ad72182e7c5840e39b272d7e02b7e8ce~mv2.webp/v1/fill/w_147,h_286,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/5.webp)
![](https://static.wixstatic.com/media/0703f7_5e4599f5873e4aed9ef5fc4cd76066bd~mv2.png/v1/fill/w_49,h_185,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/6.png)
FINAL SCREENS
Ready to lift off?
I have deep admiration for all the scientists, researchers, and engineers who dedicate their time and effort towards space exploration and advancing human progress. It's one of my life goals to visit outer space sometime, but for now working on this project has been pretty rewarding. Here are some things I would keep in mind in a future revision.
REFLECTION & NEXT STEPS
Where to, next?
![](https://static.wixstatic.com/media/0703f7_dc1eea2b9ae74fb9b01ca87965fbeb57~mv2.png/v1/fill/w_49,h_22,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/solarsystem.png)
![](https://static.wixstatic.com/media/0703f7_20a3ff605e59491a8a171a47c35fe235~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/article.png)
The solar system section is not to scale. To improve this section on the homepage, it's important to ensure the diagram accurately represents real-life. Given that the portal focuses on science and technology, precision is key.
To-scale models
What happens when we can’t use a dark theme? What would the error, success, and warning colors look like? Usability testing should be conducted to explore various iterations, such as providing an option to toggle between different reading modes.
Usability testing and iterations