Pre-development – Digital Multimedia Design Studio Independent Project

This week, I focused on the design and layout of both my website and the product itself. Using Adobe Illustrator, I completed mockups of all planned pages, created a logo, and began designing the product itself. I ended up removing the green-blue from my color palette, as four colors turned out to be perfectly sufficient, and the purple is much more eye-catching as an accent color.

Chip and Logo Design

The product itself is a microchip, 10mm wide and 10mm tall, that is surgically implanted on the surface of the neocortex. Classic microchips have pins poking out from their sides, which I felt would be off-putting to many potential users. I decided to make the design closer to that of a modern memory chip, using Samsung’s new 1-terabyte memory chip as design inspiration.

I decided to have the product itself follow the same color scheme as the website. The pattern on my chip is triangular rather than rectangular, a simple change to make it stand out. I’ve started adding the circuit pattern to the design, but am not finished. The finished design will likely feature many thinner circuits running across its surface.

I designed the logo after the chip, wanting it to make the user think of a microchip in some way. As of right now, this is my finalized version of the logo, but I am open to changes if suggested.

Website Mockup

I’ve come up with three different pages for the website: the homepage, the user stories page, and the appointment scheduling page. I had originally planned on more pages, but I feel like this design has everything covered. A “contact us” page is replaced by contact information being present in the footer of every page, and more specific contact information being available to the user after they enter their location on the appointment scheduling page.

The homepage features introductory information: what is Memory Bank, and how does it work? It provides navigation to the other two pages; user stories and appointment scheduling. The user is given a single user story, and then the option to read more. The “schedule an appointment today” button is large, with header text and a purple background, making it stand out.

The user stories page provides firsthand user experiences with the product, and then prompts the website user to schedule an appointment after reading. The mockup has four user stories, although this may change in the final site. The page layout is flexible in terms of the number of stories, as every other story has the same layout.

The appointment scheduling page has two visual states depending on the site user’s interaction. The default state has a form for the user to submit; a single box where they enter their city, state, and zip code. JavaScript is used to check that the user entered information in the valid format.

After the user successfully enters their information, they are presented with a list of the clinics closest to them, along with contact information. The user would then schedule an appointment at their chosen clinic.

My next step is to jump into the basic code for this site. I plan to have some HTML and perhaps CSS done by the end of next week.

My project will be a website promoting a product, a small chip surgically attached to the brain that permanently stores memories. This way, memory loss can never occur – people with dementia, Alzheimer’s, head trauma, etc. will still remember their life and loved ones. Although my project will be focused more on the design of the site than the realism of the product, I did want to do some research on the science of human memory. In addition to this research, I found aesthetic inspiration and started working on the elements of my site design.

Memory Research

“Memories” are stored in the form of specific groups of neurons, which are reactivated when we recall that memory (Queensland Brain Institute). What I was most concerned with in my research was figuring out which part of the brain the chip would be attached to. However, these neurons are not only stored in one part of the brain. The parts of the brain that participate in memory storage are the prefrontal cortex, the neocortex, the amygdala, the hippocampus, the cerebellum, and the basal ganglia. Of these parts, the only ones that are located on the surface of the brain are the neocortex, the prefrontal cortex (technically part of the neocortex), and the cerebellum.

After my research, I decided that the chip would be attached to the neocortex. Because memories are stored in connections of neurons, the chip would be able to use these connections to access memories that are stored anywhere. My research showed that the neocortex is already capable of transferring memories from other parts of the brain, such as taking temporary knowledge from the hippocampus and transferring it to general knowledge in the neocortex (Queensland Brain Institute). The neocortex is powerful, central in memory storage, and easily accessed at the very top of the brain.

Design Research

For this project, I couldn’t help but be inspired by Ghost in the Shell. Set in a very near future where humans have essentially become cyborgs, trading their biological body parts for improved cybernetic versions, the aesthetics of this series have been sitting in the forefront of my mind. I considered its world of blues, greens, and endless wires as I began my research.

For the actual design of my site, however, while I still keep this aesthetic in mind, it is overall too dark and grungy for a product site. For color inspiration, I googled “cyberpunk gifs”. As I’d hoped, I found bright colors set against dark backgrounds. I pulled out the three that spoke to me the strongest, and derived a color palette from them.

I wanted a bright blue as the main color, with a very dark blue, almost black, as the page background so that the colors stand out more. While blue is definitely the focus color, I wanted an accent color that would stand out so that the design was not completely monochromatic. I pulled out the purples and pinks present in the rightmost image and placed all of them alongside the blues, then simply chose the one that paired best with them. At the moment I am planning on using Major Mono Display as my header font, and Inter as my paragraph font.

After coming up with my color palette and fonts, I made the wireframes for the front page. I want to have the layout be fairly simple for the consumer, but more interesting than plain symmetrical columns.