top of page
Tropical Leaves

"Hyperion Valley" Design Process

 

This is one of my first UX design endeavors, a website I created for a school project, in which we were prompted to world-build and create a future where climate change and global warming continue the way they are now.  

I decided to center my project around a boarding school existing in a future 100 years from now. Humans have neglected the earth and climate change has become so out of control that Earth is practically uninhabitable, so humans are being forced to move to space. To help build this world for the audience, I chose to create a school website for the very first Private Boarding High School in Space, Hyperion Valley Academy. This project aims to illuminate the dangers of ignoring climate change. I created most of the project visuals, mixing collages with digital art. I headed the Concept Design, Research, Website Architecture, and UI Design.

 

Research

Problem to Address: A school needs a website that clearly and effectively relays information to users, but also delivers a message and reveals a deeper meaning.

 
 

Research Steps:

  • Identify Problem and Create Possible Solution

    • Created website concept and thought of possible features to include

  • Research topics surrounding the aim

    • Conducted research and drew from examples of other school websites ​

 
 

Design

Design Steps:

  • Identify elements to include in website

    • Created a roadmap of features, pages, and information my website would include​

    • Decided that the website should give the "classic academic" look and convey a large amount of information in an organized manner.

    • Wanted to capture that timeless school feel but also add futuristic elements and wanted the site to give users a troubling, uncanny, "school spirit but with dark undertones" feeling.

  • Low-Fidelity Wireframes

    • Created sketches of how I wanted my website to look​

    • Experimented with different website layouts and sampled ideas from pre-existing school websites.

​

  • High-Fidelity Wireframes

    • Created high fidelity versions of wireframes using figma and drew inspiration from my mood boards and research.

    • Decided colors should be dark to give that dark undertone to the project.

Prototyping

Prototyping Steps:

  • Take wireframes and bring them to life

    • Used Figma to create a loop a user would take through my website​

Prototype Link: 

https://www.figma.com/proto/PlSxGHgpVgEMbZaWViFvsZ/Home?node-id=107%3A15&starting-point-node-id=0%3A3

bottom of page