ADVE3630 Web Strategy & Design: Project 1 Site Design

•

ADVE3630 WEB AND STRATEGY DESIGN: PROJECT 1 REDESIGN

For our first project, we collaborated with another student to redesign a website for a specified client and target goal. The prompt my partner, Ivy, and I chose was NASA's DART page for junior high school students. This age range is between 12 & 14. The purpose of the redesign was to make the information more digestible and fun to learn, whilst limited to the use of WordPress themes. For this design, we used Figma to create the site layouts to be applied to mockups. This entailed a bright and trendy design, and editing copy to be more comprehendible.

PROJECT BRIEFING ~

Before the design process began, we researched aspects of the project in order to fully comprehend the goals and attributes as designers and the client. Below is the complete brief, which includes the result of research; this contains the basic project guidelines, costs for the client, "What is WordPress?," and more.

VISUAL INSPIRATION ~

After doing some thorough research, we moved on to finding inspiration for our repurposed website design. We collected websites that had appealing user interfaces; we selected the items we liked and disliked. Below is the collection of websites & notes we gathered, as well as various screenshots to show their layouts on desktop and mobile devices.

PERSONA BUILDING ~

Once thorough design research has been completed, we moved on to creating a character that this redesign would apply to. Meet Aidan, a 13 year old boy who loves all things science.
His basic information and interests are listed below, as well as more specific traits that demonstrate his candidacy.

THEME ~

We chose the Bramble WordPress theme to base our redesign on. We chose this theme because of its use of the stationary side navigation menu, the clean organization, and the way it responds to different devices.

COPY PROCESS ~

In order to appeal to our target audience, we needed to rewrite the copy on the original NASA website. The edited copy pares down the bulky information, and exchanges vocabulary that our target audience would be able to understand. Below, on the left is a portion of the original copy, and on the right is a portion of our edited copy.

In the process of paring down the copy, we started with reading through the copy on NASA's site. We took out redundant and repeated information, and then replaced vocabulary to make the information presented appropriate for our audience. We did not simplify vocabulary and content too much, so as to be informative without being condescending. We then separated the copy into short paragraphs and added subheads to make the copy easier to digest for a young audience.

PROCESS ~

Once we chose our theme, it was time to apply our design. We started by sketching and getting our vision onto paper. After sketching, we identified brand colors and added in illustrated images. We also began to incorporate type, but keeping them as placeholders until the illustrations have been aligned with the theme.

We then continued to format text and images together, add a drop-down menu to the mobile layout, and translate the home page to the laptop and tablet formats.