• Black Instagram Icon

©2018 by Ruotong Melody Xu

Seattle, WA | Portland, OR

 

TEAM MEMBERS

ROLE

Visual/Interaction Designer

Alaa Amed and Melody Xu

DURATION

SKILLS AND TOOLS

13 weeks (Apr - Jul 2018)

Adobe Illustrator | Photoshop | Website Design | Branding  

The Making Core Memory (MCM) project introduces underrepresented students to stories of innovation that feature women and particularly women of color by teaching the story of the core memory weavers and their contribution to the Apollo Space Mission. The goal of my directed research group focuses on groups left out of stories about innovation by creating a toolkit intended to encourage students to think about their own stories and ones that aren’t always told.

 

The process - Kit Instruction Design

Using Illustrator, I designed the core rope memory instructions and re-designed the instructions for the core memory planes. The instructions would

1. Provide clear visuals and texts on how to assemble the kits and how they work 

2. Educate the history of Core Memory and the people who worked on it

3. Create meaningful discussions for users and encourage users to reflect on their own experience

Final Instructions

Click below for the full kit documents: 

 

Core Rope Memory                               Core Memory Planes

 

The Process - Logo design

Phase 1: Brainstorming

 

As Visual Interaction Designers, my partner Alaa Amed and I designed the branding of MCM and instructions for the kits.

At first, we each brainstormed for the MCM Logo. The below are my initial ideas sketched on paper.

We focused designing the logo based on the material of the kits. Since the kits were made of yarns and beads, many of our designs focused on having lines and dots.

In our initial sketches we tried including the phrase "Making Core Memory" as part of the logo design but then we realized that it might a little too overwhelming visually. So, instead we decided to go with an abstract shape. 

Phase 2: Logo Selection

We chose a few of the logos we sketched on paper and then started making some of them on Illustrator. Below are some of our initial drafts for the logo.

Phase 3: Finalizing Logo

We picked this logo because it is an interesting way of depicting the kit. The overall shape of the logo is similar to the shape of the kit, and the beads in the logo are similar to the beads we use in our kits. In addition, the logo is simple, bold, and distinctive. We decided to change the typography of "Making Core Memory" to be bold with all caps. The words are also repositioned to the right side of the logo instead of below the logo. We feel that this current font and position of the words are more consistent with the logo design.

 

In addition to having a clean and impressionable look, we want the logo to convey the goals of the Making Core Memory project. The main goals that we hoped to communicate to our audience are InclusivenessEmpowerment, and Storytelling.

Representation of Inclusiveness

Connecting and bringing together the tiles

 

Representation of Empowerment

Incorporation of strong, bold, prominent shapes to represent our goal of empowering individuals

 

Representation of Storytelling

Piecing together the tiles symbolizes piecing together the history behind Making Core Memory

 

The Process - Web Elements design

After Finalizing our logo, we began brainstorming icons and interactions for the website. 

 

Navigation Bar

We used beads as a re-occurring theme on our website. For the navigation bar, we decided to have different beads on a horizontal line. Each bead would indicate one page on the website. The following are my initial ideas for the design depicted using illustrator.

 

Final Version

We used this design above as our final navigation bar because it is consistent with the logo in both shape and color. We showed only four clickable tabs to focus on the main ideas of the MCM project.

Website Icons

To brainstorm icons, first we had to decide on which functions/features may be the most helpful to have icons of their own. The icons can help direct users to quickly find and get to the information they need through visual recognition. 

For this website, we decided to at least make an icon for the Kit and the LOL (History of Little Old Ladies). Below are some of the initial ideas I came up with.

History of LOL

The Kits

History of Core Memory

History of Core Memory

Home

History of Core Memory

History of LOL

Final Version

Home

History of LOL

Core Memory Planes

Instruction

Core Rope Memory Instruction

Finally, we decided that icons should be all inside square borders for emphasis and unity. The designs are consistent with the logo, as the shapes are mostly composed of hard/straight edges with white spaces in between the boarder and content. All icons would be limited to colors of black and white.

This icon represent the History of Little Old Ladies, clicking it would show the story of the minority groups who worked on making core memory in the 1940s. 

This icon represents the Core Memory Planes Instruction

This icon represents the Core Rope Memory Instruction

Little Old Ladies Illustrations by me

Screen Shot 2018-12-20 at 12.45.14 AM.pn

Website Preview

final melody logo.png
This site was designed with the
.com
website builder. Create your website today.
Start Now
Screen Shot 2018-09-07 at 11.43.06 AM