Class project: UX/UI Desgign
This webpage was designed to display a lot of information while being highly interactive. This creates an enjoyable experience while retaining the user's attention.

generating new experiences through design

      Services:

      • UX Research
        UI Design
      • UX Research
        UI Design

      Tools:

      • Figma
        FigJam
        Microsoft Word
        Indesign
      There is a lot to learn about the history of space exploration. There is so much information that it sometimes feels overwhelming. Nesting loads of information on a single webpage will also feel overwhelming and chaotic, which can push users away from the page. My challenge was to create a page that organized loads of content within a webpage while creating an engaging and interactive experience.

      To solve this, I researched the space history and shortened the content by displaying only the essential dates. Doing this helped make the content more digestible and allowed me to build a solid foundation for the webpage. To do this, I created: 

      • User Personas
      • Wireframes
      • HiFi site design


      Click here to view full website

      Research Kickoff

            In the initial stage of the project, a brief was supplied with the needs of the webpage. Its priorities were to inform consumers about the history of space, retain user attention, and reach the target audience. The research phase aimed to make the information digestible and create user personas, wireframes, and HiFis.

            creating the blueprint

                  While researching the history of space, I took the critical moments and shortened the content to help it be more digestible while educating the audience. After that, I started the initial phase of medium-fidelity wireframes, where I experimented with different layouts. The goal was to create an interactive and unique design. 

                  Eventually, after creating multiple wireframes, I devised a layout that displayed the information as a timeline. The timeline separated each year's events, making it more accessible to follow. Then, I added basic shapes around the webpage representing planets, helping emulate the space environment. The illustrations would be the original plan.

                  Color/type exploration

                        When tackling the HiFi Screens task, I meticulously crafted a color scheme that embraced the space-themed concept and exuded a modern, engaging, and futuristic aura. The dark blue-purple background, the radial pink gradient, and the white dots symbolizing stars were carefully chosen to harmonize and elevate the space setting, inviting the audience to be part of this creative journey. 

                        For the body copy, I opted for the Graphie typeface. This san-serif font was not only chosen for its modern appeal but also for its accessibility and legibility, ensuring that users of all ages can comfortably navigate the site. As for the primary display typeface, I selected NTF-Grand for its futuristic, bold, and eye-catching qualities, aiming to captivate and engage the audience. 

                        High fidelity site

                              I began implementing the color scheme and typefaces to create the initial HiFi design. While the site looked great, the user still needed more engaging interactions. At first, the site was made to start from the top, and the user would scroll to the bottom. But by rethinking this concept, I created an opportunity to create a more unique viewing experience. Instead of scrolling top to bottom, I started the webpage from the bottom, where the user would scroll up to view the information. As they scroll, a small space shuttle follows the user throughout the learning journey. I also created unique hover animations for the menu to keep the experience more memorable. Utilizing the color scheme and bold type, the webpage feels more captivating and bold while retaining a clean and modern look.

                              Click here to view the full website
                              Next Project