AIGA Project Log
Caitlyn, Neely, Elena, and Catherine
Jan 18
- Created Figma board to dissect data
- Broke down data into chunks
Challenge #1: How do we start looking through such a large group of data?
- Solution part 1: split up columns between different people, we take a general look at all our data points and the questions asked in the census
(Night of) Jan 18
- Discussed what we found in our assigned data
- We decided to focus on gender + race to narrow down our scope
- At this point, we are also starting to define our audience: maybe female high school students who are considering design as a career?
Jan 20
Challenge #2: coming up with a visual metaphor that an audience can immediately engage with + relates to our target audience
- Developed a Wizard of Oz concept
Pros:
- Aligned well with our intended audience
- Provided a clear story arc
- Story had many metaphors like the use of color, yellow brick road etc.
Cons:
- Established stories come with existing expectations
- Maybe we should go with a metaphor that is more inclusive of other genders and experiences
In response to pros and cons, we pivoted to board game concept
Pros:
- Games are visually playful and engaging
- A board setup allows us to play with grid layouts
- Can imagine ourselves building something similar to the Game of Life
Jan 25
- Presented board game concept to the class, found that the other team’s idea was rather similar
Jan 26
- Considered directions for the board game concept
- Discussed the concept of the Hero’s Journey, and how that could be built into a board game
- Also discussed a garden-themed concept
- Developed visual ideas for different concepts
Jan 27
- Discussed visual ideas for different concepts and decided on inspiration
- Overheard Elena’s dad yelling very loudly while he recorded a sports podcast…
Jan 30
- Decided on colors, type
- Sketched out still frames for board game concept
Jan 31
(first Monday after return to campus)
- Met to discuss sketches, found a lot of overlap between concepts
- Decided to break down question-writing, each group member wrote questions for next class
- Decided that questions would respond to information found in the data
Feb 1
- Went over questions in class, edited for clarity
Feb 3
- Creation of google doc to track progress
Feb 6
5:00pm Meeting
- Catherine voiced some concerns about project direction
Emerging Cons:
- Logistically difficult to create a fun game: figure out tokens, do our audience get bored etc.
- Game mechanics can be hard to program → we were starting to lose complexity in our visual style and in our concept
- Elena came up with the idea of a yearbook: an item that is synonymous with high school memories
PIVOT MADE!!!! + yearbook concept chosen
Challenge #3: How to use the yearbook concept to our advantage
- The majority of the experience follows a quiz structure
- We are able to repurpose our board game idea, which was pretty much a quiz that we tried to sell as a game
- Practically a quiz would be easier to code and throughout this whole process we definitely were thinking hard about whether our ideas could be executed or not
- How we incorporate census data: When someone answers a quiz question, they will be show data that correlates to the question they just answered
Brainstorming ideas for the conclusion of our game:
- Our old conclusion was to show a completed board with different visuals
- Started to think about the idea of a Madlib → maybe we can show a summary at the end of our experience that is personalized to the answer choices given by our user?
- Use the idea of high school and high school aesthetics to our advantage
- The storyline of our experience: follow a high school student on their journey to graduation
- We also planned to change the visual direction to be more in line with the ‘yearbook’ concept
- Neely went to the store to buy a donut — alas, she dropped it on the ground.
In the meetings following the concept pivot, our team started to define our initial ideas more concretely. First, we decided for our quiz to be a tool that college counselors or art teachers can provide to their students if they want to learn about the design industry.
We then started to think more carefully about the conclusion of our experience. We broke it down into a yearbook and an epilogue, including superlatives, club photos, and a prediction of the future design career of that particular student.
Caitlyn and Neely were responsible for the visual guide while Elena and Catherine were responsible for writing the quiz’s questions and answer choices.
Meeting Notes
Come up with a name
Wireframes!
Changes to concept?
Basic ideating for new style
Context of our game:
Guidance counselor meetings
Art class
Commit to either some sort of extreme?
Real-life answers… what you did in high school
Fictionalized storyline
Work towards end goal of yearbook — superlatives, club photos, epilogue — 10 year reunion, brief story and printable, gives deets on future life of designs
Black n white, pops of color, some subtle gradients, paper texture
For next time:
Split into 2 pairs:
Caitlyn & Neely work on viz MEET SUNDAY NITE (new style guide, examples of data screens showing up after you answer question, example of conclusion page yearbook)
Catherine & Elena work on questions MEET AT 4:30 (keep some of the same, write out final madlib, transitional setups)
All think about new name
Feb 7
7:00pm Meeting
We met together before class to talk about each group’s progress. We used Caitlyn and Neely’s style guide to create some initial wireframes that included: Title Screen, Instructions Screen, Section Title Screens, Question Screens, Yearbook, and Epilogue.
Meeting Notes
Discuss new visual style & question changes
Sophomore Year Q3 is a bit hard to connect to data. Because the data is kinda bland and idk what we can interpret from it? (Elena seemed to have fixed it though lol)
Create two high-fidelity wireframes/prototype of home screen and intro screen
Feb 8
Worked on wireframes…
Meeting Notes
finish up wireframe — grid system?
have something html css to show for next time
Feb 10
At this point, the yearbook team was split up into two groups: Elena and Catherine were to focus on visuals, and Caitlyn and Neely were to focus on coding.
Meeting Notes
Worktime!
Coding team:
- Animation
- Questions
- Side scrolling page
Data Viz team:
- 1–2 viz??? Try to find consistency
What we need for Tues Presentation:
- Length: 10 min presentation, 10 min QnA
- data analysis, conclusions from census data
- website features, metaphors, user personalization/customization
- Audience + how experience can impact/be beneficial for them
- Show some sort of html website (intro, instructions, a few questions)
Feb 13
- Worked on putting together the presentation for the 15th
Meeting Notes
- Make slides!
- For next time: write bullet points for your assigned slides!
Feb 14
- Met to finalize the presentation
Meeting Notes
Next Meeting:
- How can we make it more story-like? Speech bubbles, table of contents, audio, play more with the body text to highlight the text we wrote ourselves (the way we are presenting right now doesn’t do the text itself enough justice except for the final side-scrolling page.)
- Do we want a print element where people can sign their names and turn this into a group activity?
Feb 15
- Presentation in class
- Received Feedback
Feb 17
- Watched other groups present
- Didn’t get much done, Caitlyn and Catherine focused on confluence
Feb 18
We were excited to use data visualization as a way for the user to connect with the information collected by AIGA. In order to make that information even more visually stimulating, we decided to animate our graphics to then export as .gifs to be embedded within the site.
- Elena tested out animating and exporting as a .gif
Feb 22
- Caitlyn & Neely met with Andrew Twigg, troubleshooting issues
- Concerned about how to proceed with coding
- Catherine & Elena went over data viz designs, revised some, onto animating
- First met CS student Shiva! He helped with major coding concerns — very very helpful with getting plans back on track
Meeting Notes
- Need to rethink “yearbookyness” of the end visual
- Animate data viz
- Collect & organize photos to appear with Q’s
- Speak with Q about concerns regarding time frame, coding, coding resources
Feb 23
- Neely sick with norovirus, reached out to Q, took time off from project
Feb 24
- In-class individual work time
Meeting Notes
Elena & Catherine Weekend to-do
Finish animations & export as transparent gifs
Select photos to be used in question pages (should they be static or change?) — static atm
Figure out final title screens/transition screens
Select photos to be used with corresponding answers in yearbook & epilogue
Solidify design of yearbook and epilogue
Replace dem speckles at some point (low priority)
Caitlyn & Neely Weekend to-do:
Research Svelte animations
Page animations
Page to page animations
Loading page animation (text fades in)
Interaction design
Hover on answer images
Data visualization slide in
Navigation on conclusion page
Print/share function on conclusion/epilogue page
Compile CSS stylesheet
Feb 26
- Elena finishes the first round of GIF animation
March 1
- In-class individual work time
- Collecting images for site
- Coding
March 3
- In-class individual work time
- Received coding help from Neely’s co-worker Al
Meeting Notes
Finalize Yearbook & Epilogue Design
Square images
Discuss presentation plan
copy existing prez and add in prez content
Send Q website link over weekend with visuals
SPRING BREAK
- Meetings to talk about revisions to gifs
- .gif revisions completed, Elena exported her and Catherine's revised gifs to be used on site
March 13
- Late night meeting to discuss .gif styling
March 14
- Neely & Caitlyn working to finalize coding
- Elena working on final presentation, compiling Medium post
DUE DATE March 15
FINAL PROJECT LINK
