Design Brief

Persona

A persona is a visualization of the demographic info of the end-user(s) of a software application. A persona blends demographic information about an example individual with qualitative information, such as a backstory, preferences, and motivations. A user-centered design approach leverages this information to develop specifications for the software prototype, such as the feature list, the “look and feel”, etc…

Age range: 17-23 (The typical age range of undergraduate college students is 18-22; for completeness, our range extends one year further in each direction. Outliers include graduate students, who may be any age but are typically in their late 20s-mid 30s.)
General educational level: College student at Stony Brook University
Computer/technology literacy: Varied, but all students know how to navigate websites and YouTube, with few to no exceptions
Technology access (own computer? network connection? broadband?): Varied, but for those who do not have technology access, SBU provides SINC sites and laptop loans
Occupation: Student
Environment (work, school, library…): School
Socioeconomic group: Varied
Gender, Race, or Ethnic group if applicable: N/A
Language (specific terminology as well): English speaker with a passion for, but not fluency in, Japanese language and culture (SBU students speak a variety of languages. The most common in my experience are English, Chinese, Indian, and Spanish; however, in order to prevent mistranslations in languages that I do not speak, English is the one that I would stick to.)
Special needs (disabilities): None
Cultural preferences: Fan of music (particularly rock or metal), Japan and its culture, anime, video games, and similar things

Palette

A color palette is a selection of complimentary colors associated with various elements of the UI program, such as background color, headlines, body copy, icons and buttons, etc. Clarity and legibility are the main objectives, but contributing to the “mood” of the application is also important…

Gorilla Destiny 9/30 Palette

Gorilla Destiny’s first performance in April 2024 was at Brook Con Live! The editor of the highlight video made a logo for them because they did not have a logo at the time, and this is where I retrieved the last 3 colors from.

Gorilla Destiny temporary logo

The first two colors were then picked to reflect the “springtime youth” element of the songs that they cover (blue) and they place where they began, Stony Brook University (red, but not the exact color that SBU employs).

The members considered various shades of pink, but pink ultimately did not harmonize with the rest of the palette as well as red. Together, this palette evokes a sense of sleekness, seriousness, and sharpness with a hint of bold youth.

Moodboard

A moodboard is a collage of images, patterns, colors, textures, design elements and typography that suggest the “feel” of your application. Attention should be paid to the anticipated preferences of your end user, and to the subject matter of your app. What fits visually with both? What emotions are you seeking to evoke?

At the start of the semester, the band gave me two images to work with: the original Gorilla Destiny logo and an album cover from the rock band Asian Kung-Fu Generation, whose song Solanin has been covered by Gorilla Destiny. These are both present in the moodboard.

I also included:

  • a pixel fading texture (top left);
  • a type sampler of the Best Ten CRT font that I’ve used for this class (middle left);
  • the palette (bottom left);
  • the logo and avatars of the chiptune band YMCK (center);
  • a color noise sample (to the right of YMCK; slightly desaturated to avoid hurting the eyes);
  • examples of pixel icons (middle right);
  • and an image of the rock band Radwimps (bottom right).

Radwimps is another band that has inspired Gorilla Destiny, and I included this image despite it not being pixel art because of its “sharp” feeling.

Wireframe

Wireframes determine the scale and placement of various elements, such as text, navigation, content, controls, etc. Typically several screens are drafted, such as the start screen, main menu, content pages, a shopping cart, etc…

This should link to a live prototype with working links between frames: https://www.figma.com/proto/K2FLhsIqVZCm8MjQ3dZZoC/ise-333-site?node-id=0-1&t=n28KkNjItSAaWYM0-1

A screenshot of the Figma screen is below. The PDF is in the Google Drive folder.