CMU Design Census

Data Visualization of Industries x Values of CMU Design Alumni

Faith Kaufman
25 min readMar 30, 2017

With our research, we want to learn about how CMU Design alumni’s jobs and industries (both past and present) align or clash with their philosophy or vision of design. We will then visualize the results into a system of a few parts.

This project piggybacks off what we learned from our project that we also worked together on: The AIGA Design Census.

CMU Design Student Using the Census Data Visualization.

03.15.2017 | Conceptualizing the Purpose of Our Research

Spring Break Working

We have parted ways as a team, and have kept in contact from our current locations of Ohio, Iceland, New Orleans, California, and Florida.

We’re prepping for the next phase of the project, which reaches out to the CMU Design Alumni Network. We had to prep questions that Dan Boyarski will be sending out to the alumni. To do this, we also had to decide as a group what we wanted to pursue with our research.

We wanted it to relate to our previous project, but be different. So, we decided to focus on industries.

Our Research Concept

With our research, we want to learn about how CMU Design alumni’s jobs and industries (both past and present) align or clash with their philosophy or vision of design

The questions leading our research are:

“How does your industry fit your philosophy of design?”
“How does this reflect on your education and the industry itself?”

Value and expectation are abstract qualities that are hard to quantify. For this part of the project, we will be using a framework similar to what we used for Assignment 2.1 to visualize “the future of design.” Last time, we separated the words into the three buckets of Design, Method, and Product and then went into a second level of organization. This time, however, since we are the ones constructing the questions, we want to dive into how designers perform after they leave CMU. Through these questions, we can see the path of CMU Design Alumni and track their “satisfaction” with what design is really like in the different industries.

Below is a sample of the questions we will be asking alumni.

Questions for the Survey

Hello! Thank you for participating in our CMU Design Census.

We are third-year undergraduate Communication Design students from Carnegie Mellon University. With our research, we want to learn about how CMU Design alumni’s jobs and industries (both past and present) align or clash with their philosophy or vision of design. Your responses will remain anonymous. The survey should take approximately 10–15 minutes.

  1. When did you graduate from CMU School of Design?
  2. How many different jobs have you had since you graduated?
  3. Where do you work right now?
  4. What industry is it part of? (Please choose one)
    - Agency
    - Consulting
    - Tech
    - Business
    - Print/Publishing
    - Healthcare
    - Entertainment
    - Manufacturing
    - Nonprofit
    - Education
    - Finance
    - Government
    - Law
    - Retail
    - Consulting
    - Transportation
    - Other
  5. From 1–5 how aligned were the company’s values of design to your own?-1 — not aligned at all
    -2 — marginally aligned
    -3 — some aspects aligned
    -4 — mostly aligned
    -5 — fully aligned
  6. If your response was 3 or below, choose from the following list of the area(s) where your values diverged.
    - The role of ‘designer’ or team
    - Their process of design
    - Product of design

— new section redirected from answer to #6 —

7A. What aspects of your role diverges from your idea of a ‘designer’?
- Creative freedom
- Collaborative work style
- Execution
- Ideation
- Other

7B. What aspects of your industry’s values towards design thinking/ process diverge from yours? (Check all boxes that apply.)
- Intuition-based process
- Not enough empathy towards the users
- Function and usability guide the process
- Too iterative
- No systems thinking
- Imbalanced focus on aspects of the product
- Insufficient breadth of iteration
- Insufficient depth of experimentation
- Inadequate user research
- Poor quality of production
- Other

7C. How would you describe your industry’s values toward the products that you designed. (Check all boxes that apply. )
- To better humanity
- To advance technology/innovation
- To better the earth/sustainability
- To better the product/brand
- For delight and entertainment
- Other

Now, we would like to learn a little bit about your past work experience. Please choose two past positions that were particularly influential.

8. For the job that was more current, what company were you working for?

[then it repeats #4–7]

9. What company did you work at before that?

[then it repeats #4–7]

We then put it into a Google Form and emailed it to our professor, Q, so that it can be distributed.

Google Form Survey

03.25.2016 | Sending Survey to Dan for Distribution

We finished up our survey, reviewed it several times, and sent it to Dan Boyarski so that it could be distributed!

03.26.2016 | Group Meeting

Goals

  • make changes to the cards and send to Q
  • start making guesses for how to interpret survey responses and move forward on 2.2… brand identity stuff

Cards

We’re splitting up the work — working remotely — Let’s send to Q by the morning.

Group Meeting

CMU Design Survey (Assignment 2.2)

How We Expect They Will Respond

Methods:

  • Adding in fake responses to a duplicated version of the survey — duplicating survey form and adding in data
  • Making generalizations about the data (What We Did Today)

Discoveries:

We began by plotting out what data we will be collecting. We made a few sample visualizations on the whiteboard.

Output Predictions

We thought about what we want to communicate and things we predict to see in the data responses. We also considered that we want our main audience to be current CMU students. But other people like alumni may be an audience that is interested in the data but not who we are directly seeking out.

Communication, Audience, Responses

We definitely feel like we’re not sure yet how to visualize the data so we will be exploring this further.

We’re also still discussing how this will be combined with the AIGA census.

03.30.2017 | Group Meeting

Today, I met with Q to discuss my Individual process and goals. He indicated to me that we should keep this project separate from my team’s AIGA Design Census project. So we are! I passed along the message to my teammates. We’re opening up our eyes and brains to imagine a new visual direction completely different from our patterns: https://medium.com/@fkaufman/the-aiga-design-census-f3ca135a6265.

He also suggested that for an easier time with splitting up work to have a few people focus on one media, and a few on another, etc.

We’ve decided we will individually hash out ideas and come together on Sunday with ideas to share.

04.02.2018 | Group Meeting

Concepts

Deb’s Idea

  • x/y graph of satisfaction
  • forest of designers -> “thinking of it literally”
  • one designer = a plant
  • passports -> stamps of the industry they were at
  • amount of leaves = level of satisfaction

Steven’s Idea

  • graph with timeline at bottom so can see full path
  • new york elements
  • city grid
  • subway map

Albert’s Idea

  • “how does your vision align with industries?”
  • vision -> eye test
  • vr glasses -> how close to industry

Faith’s Idea

  • Cubeville -> reference to CMU Design curriculum
  • deb said could have iceberg layer
  • 3d might be ambitious
  • moving through the subway to dif nyc skyscrapers

Jessie’s Idea

  • explored more of dif media
  • looked at layers of the survey
  • interactive report — motion piece
  • depth of the distribution
  • hard to compare between them
  • Oblivion Title Sequence Inspiration
  • Role-playing game -> decision trees -> branches?

Discussion

  • Making a platform that shows the data but is interactive. Giving the data a concept.
  • The game, “Spent.” -> Making decisions
  • people mostly dissatisfied by method, and within that the lack of depth in experimentation
  • look for more things like this ^ by Tuesday
  • has to have elements of NYC in it
  • Cubeville + map of individual people’s experiences
  • filters to show dif pathways -> interactive 3 part thing
  • boxes all on 3d space
  • generative?
  • AR + Map
  • google map
  • every part of the system should illuminate something different
  • to call it cubeville or not?

By Tuesday

  • Steven wants to explore digital media
  • Deb wants to explore motion and visual design
  • Jessie wants to break down what the data says and what the story is. Anyone send insights to Jessie.
  • Albert is interested in the AR and digital
  • I’m interested in systems and visual design
  • Everyone: mind mapping on system, take samples of the data and do prototypes of what you imagine, and figure out how things are possible and what the deliverables should be. Take 10 samples of the data and imagine what they could look like.

04.04.2017 | Group Meeting

Discussion Minutes

Deborah

  • Visuals
  • cylinders + blocks
  • Animated motions

Faith

  • thinking through the system
  • “Welcome to Cubeville” website w motion graphic tour or find housing game
  • entry point = entering NYC/Cubeville
  • because 3D, I explored how different angles can be used to show different types of information.
  • Storyboarded the video
Faith Notes

Jessie

  • going through data
  • interactive piece
  • prototype of the scenario
  • taking on the mindset of the people who answered the survey
  • tracking your choices
  • “satisfaction is relevant”
  • will lead into the concepts that we want to pursue

Steven

  • Mission statement = helping cmu design students view the job search from a new perspective. drawing conclusions about how alumni’s views are aligned with their industires.
  • Showing how people move around industries? How 04.04aligned or misaligned are their interests
  • combining CMU Design aesthetics + NYC Subway aesthetic —but we worry it might feel a little forced
  • subway signage
  • wants to look next into what people from each industry feel
  • directional for infographics on site maybe?
  • Might be saying more “train” than “city”

Albert

  • made a gif
  • how to show misalignment without numbers
  • lenses/circles
  • windows idea
  • we need a vessel
  • viewing a poster through different lens colors

Assigning Roles and Deciding on the Concept

Concept

  • Mission Statement = For current CMU design students to understand alumni’s past job experiences and how their design values align with the corresponding industries.
  • We are operating under the assumption that their values are shaped by their time at CMU.
  • Audience = Current CMU Design Students

What We Want to Highlight in the Data

  • How aligned people’s values are per industry.
  • Change in Industry over time.
  • Younger people job hop more. (You need to make a system in order to be able to quantify it)
  • How long people stay at jobs.
  • Staying in the same industry vs. changing.
  • Satisfaction x alignment of role in previous positions.
  • Product, Method, and Designer (the why)
  • Go in with an approach of what you’re looking for, for how to read it.

Mediums

  • Website Vessel (encompassing everything else)
  • Animation/Video
  • Data Visualization of Alignment and Industry
  • Interactive Game

Assigning Roles

Discussing With Q

  • Start with simple bar graph.
  • Narration + text in motion graphics
  • Create sketches and storyboards for Thurs
  • focus mostly on the story
  • video is intro to style and visual story
  • Go with the city idea

By Thursday

  • go into the excel and draw conclusions and ask questions
  • Faith + Deb work on storyboard
  • Figure out visual direction

04.05.2017 | Jessie Data + Deb + Faith Visual Direction + Storyboard

Data

Steven and Jessie have been working on the data and will be filling us in on the meeting on Thursday in class.

Visual Direction

Given the “go” for the city idea, we still need to clarify what we wanted the pieces to look like.

As a group, we created a Pinterest board pulling different ideas together: https://www.pinterest.com/stevenjidesign/cmu-design-census-22/

Deb and I printed out a few that stood out to us as fitting the data/concept. We put them on the board to note what we thought was valuable about the inspiration.

All ideas together

From this process, a few stood out to us. We thought it would also be most clear if one building represented one person rather than one industry. We wanted to build the city out of these individual people.

Chosen inspiration

We ran the idea by Steven, who seemed interested in the idea, and he drew it out on the board as he listened.

Storyboard

From there, Deb and I created a storyboard. We decided that the video should be used as a way to introduce our visual language and mission statement.

04.06.2017 | Deb + Faith Mockup

Quick mockup of how we could combine physical with digital. This is kinda a proof of concept so that we can get feedback from Q.

04.07.2017 | Group Meeting

Talking to Q

  • legos — create physical model
  • consider years of experience
  • look at when tech industries like google appeared … look at the correlation
  • look at grads vs. undergrads
  • if go into value, say its our hypothesis

Group Discussion

Notes on Board to Make Sure All on Same Page
Taking Notes On What We Are Doing Next
  • Is height years or # of positions? -> if position, might lose amount of experience from the data
  • some people take longer to find the right job
  • Discussing whether coding or physical photos will be best — not sure but we need to figure out asap. Meeting tomorrow with Kaleb to discuss this further.

By Tomorrow

  • everyone work on compositions — how to use faces of the cubes
  • meet w kaleb tomorrow if possible

04.08.2017 | Independently Exploring How To Use the Faces of the Cube

Albert

Albert’s Ideas
  • uses top to show # of positions
  • sides show alignment using a number

Deb

  • callouts with what the person says//or maybe showing the identity
  • using 5 sides instead of 6 because bottom will never be seen
Deb’s Ideas

Faith

  • alignment on sides: show percentage of face filled in
  • showing jobs beneath with ghosted outline
  • different views
  • rotation of faces
  • color = industry

Steven

  • showing the nth position
  • ghost cubes

04.08.2017 | Meeting With Kaleb

We met with Kaleb to go over possibilities for the code. This was mostly for Jessie who is working on the data viz, but we all attended so that we can be on the same page for what is going on.

Code Whiteboarding

We also spent time defining what the different sides of the box will be, based off the ideas that all of us brought to the meeting.

Deciding on Boxes and axis

04.10.2017 | Group Meeting

This was a touch-base to divide into various roles. I wasn’t here! So I was filled in on what I missed.

Visuals

Deb made some iterations of the cubes.

Color + Grunge
Red

They decided in the meeting to go with Deb’s red one as a jumping off point.

I made some iterations independently using images of NYC landmarks represented abstractly.

Landscape

Steven started to create prototyping material for all of us to work with.

04.11.2017 | Group Meeting in Class

Responsibilities

Deb + Faith: Storyboarding, Visual Design
Albert: UI- using the site map that we created together
Steven: Interactions for Keynote and site (work together with albert on this)
Jessie: Coding of Boxes

Everyone:
- Help Jessie with plugging in data

04.12.2017 | Touching Base

Faith/Deb

  • work on textures not patterns
  • color combinations not monochromatic
  • feels very 2d, consider how to use background -> translating to 3d
  • finish sides of cubes and start storyboard
  • overlaying on stevens isometric grid
  • deb will clean spreadsheet

Albert

  • got started on the website
  • anchoring
  • start adding in insights and text styles

Steven

  • subcategories
  • work w jessie on what we wants users to do
  • isometric grid
  • working on keynote
  • working toward finding way to import data from excel by 10/11 tonight

Jessie

  • adding in the filters — need to work w steven on this
  • keeping on going on keynote

Everyone

  • collab on keynote using apple id’s
  • helping jessie add in data:( ON YEAR GO A->Z BEFORE STARTING ) file: industry survey (organized), keep in mind zeros and strings

How to help org data:

(if steven cant find algorithm by 10)

  • first make sure column is clean: if blank and supposed to be string do “”. if supposed to be number but blank, add a zero
  • copy column, then put in google search, then put into text edit
  • quotes then after that, add a comma AFTER quotation mark
  • then put back into google search to get rid of all return/enters
  • send to jessie with name of column
  • and then highlight in excel spreadsheet as being done

04.13.2017 | Soft Deadline Crit

Discussion

  • need to do better at explaining our concept to people

Where to Go Next

  • Saturday: typographic decisions (come in with mockups) 5:30pm
  • meeting on monday (let’s decide on Saturday)
  • deb and faith meet on sunday

04.16.2017 | Meeting With Deborah

Sides of Box

We were accomplishing tying in the “windows” idea.

Alignment + Industry on one side. Identity code on top. XP on back.

This is the sketchy version:

Here are more legitimate versions of the sides:

Alignment + Industry on one side. Identity code on top. XP on back.

Typography

A few iterations:

Type Iterations

04.17.2017 | Group Check-In

Feedback on Visuals

Got the ok on the grid idea. Need to work on ways to have the sides look with and without text.

Of the type iterations, this was best received.

I got caught up with the weekend process of my teammates.

Steven:

Jessie:

Albert:

What to do by tomorrow

Faith + Deb: Storyboard + Sides of Squares, send .jpg images to jessie to mesh onto cubes

Faith: finish documenting

Albert: Takeaways, meeting w me and deb at 8

Steven: Last page of interaction, when examining each tower

Jessie: Figuring out priorities of coding

Discussion

  • having more intent with interactions
  • helping steven with building the illustrator blocks -> will be a file we can all work off of

04.17.2017 | Group Check-In

Individual

I continued working on the sides of the boxes.

I found that an 11 x 11 grid worked best. Also three letters for each industry worked best.

The one on the left worked best. This is “consulting.”

I also created a quick pale color palette for Jessie to try with the metallic shine in the code.

Colors

04.18.2017 | Studio Meeting

Faith : Help Deb with storytelling of video, UI with Albert (takeaways)
Steven: Navigation
Albert: mockup, content in, takeaways
Deb: motion
Jessie: coding the visuals

Takeaways

Will be screenshots + typography.

Three different perspectives of boxes.

Paragraphs of text — how to make interesting? (Jessie’s findings can go in)

What to include:

  • most popular industries (for current, past, and previous) — Albert has spreadsheet, Jessie has doc with this
  • industry movement — in doc, +/- info from Steven
  • alignment (% aligned) — in Jessie’s doc

Albert’s Website

Steven, Albert, and I will be working together now on this so that we have better coordination between the parts in our system. I will be also meeting consistently with Deb to make sure visual design stays consistent.

To Do

  • type system
  • adding color to site (even light tone differences)
  • add in a mockup asap (q says sketch + 3.js)
  • about/questions on two different pages
  • side panels

How to Get Done

Cloud 9 for working together on the file.

  • Faith: will play with type before we meet on Saturday, adding color
  • Albert: mockup on Sketch of takeaways (Jessie send screenshots), use GT America
  • Steven: implementing side bar, type system
  • Saturday: meeting

Meeting With Q

  • getting interface to work with Jessie’s code
  • too slow — 3fps (!)
  • limit how much info is on the sides
  • gave steven crit on his piece

04.23.2017 | Steven, Albert, Faith Meeting

Steven, Albert, and I met to determine how everything is fitting together. Q’s crit on the sides of the boxes presented a challenge because some other parts of the system were dependent on this — our video, especially. We reworked the system but keeping in mind that we want to be building on everything that we have been doing until now.

What has to be done

Steven showed us his working prototypeof the filtering system ! Which he had made really big strides on. It will be combined with the viz tool Jessie has been coding.

Filtering sidebar
Prototype

We did discover that the side option has inconsistent functioning compared to the other screen in the website. On the first part of our side, this causes a sliding of all the content off the screen. But here it was a sidebar. We’re still not sure if we were overthinking it, but we thought it might be breaking Nielsen’s heuristic of consistency. So our solution is a “…” button that makes the side bar come out.

04.23.2017 | Independent Work

As discussed in our meeting earlier, I need to work on:

  • copy (with albert)
  • incorporating the takeaways into the storyboard (first priority)
  • finalizing sides of cubes

This is quick work since I only have about an hour and a half of time to work.

04.23.2017 | Full Group Meeting

We discussed how to split up work so that we could make our Tuesday deadline…

Code

Albert, Steven, and Jessie are all working together on bringing their different code together.

Unfortunately, we’ve switched to a new form of coding since our old way was wrong. So we don’t think we can entirely make the deadline. But, we’re going to do our best to get as much working as possible by Tuesday. This hold-up does affect the progress of all parts of the system. :( But we are still pushing!

Storyboard

Deb and I are starting the motion graphics. We had to do a lot of quick thinking on the narrative of the storyboard, and how it brings the whole system together, adding information about the visual system.

These are the takeaways we are going to use:

  1. 21% (18/87) overall were in the same industry for the past 3 jobs
  2. 43% (37/87) overall had increasingly aligned design values in each of their past 3 jobs 17%
  3. (15/87) overall were in 3 different industry for the past 3 jobs

We came up with these 3 from Steven and Jessie’s research. It also helped that Albert had started visualizing which ones were important.

Albert’s vis

Since the data viz tool won’t be done, we will implement screenshots from Jessie’s for now.

Storyboard

04.24.2017 | Push

Color Iterations

Deborah and I talked about using our original 5 colors as a form of categorization. We started doing this, but Jessie advised against it.

So we came up with 16-color palettes. They were a little rainbowy.

Pallette 1

We separated them by tone because we weren’t sure what colors we needed.

Separated by Tone

This is what we landed on.

Final Color Palette

Video

Deb and I worked together on this.

Rough Draft of Video

Website

These screenshots don’t do the work justice ! But the data viz is currently down. Will upload screengrab vid at a later time.

Website embedded. Hover state visible.
Interactive Cubeville.

04.25.2017 | Crit

We got an extension till next Tuesday !

But, we still wanted to present our work for feedback.

Crit from Kaleb + Q

  • Huge progress since last week !
  • The filter bar — the placement should be close to the edge, & there is not a strong reason for it to be hidden
  • The visual hierarchy and placement of the hover information window could be improved (1.line up with the filter bar to create stronger grid system 2.maybe consider making the type larger and make it more prominent. Consider its relationship with the viztool)
  • The visualization’s anchor point (rotational origin) should be within the visualization area instead of outside of it. That way, when the user rotates the visualization tool, it always maintains in the screen (cont)
  • Add a floor to the visualization system to ground it
  • Incorporate the visual system in the video to the website. For example, the color bars of the Cubeville city (in image below) could be used for our side bar or even background for the about page since our about and question page are rather empty right now. Steven also suggested animating color bar could be used for transition animation when we click on the side bar
City that rises up at end of animation.
  • In the video, theres a fisheye effect. Is this intentional?

04.27.2017 | Independent Work

Things I’m thinking about

  • takeaways
  • background of about page
  • sides of boxes
  • anything on website
  • typography in video — maybe lowercase and thicker? (can do over weekend maybe)

To Do Before Class

  • Know how to implement the takeaways
  • background of about page (and see where that leads)
  • Vid: take out extra spin, and maybe keyframe the beginning to hide the sides we don’t want visible… progressive disclosure. Add light so it feels 3d.

Video Editing

With changes !!

Website

Playing with Typography and Layout:

About Page

We’re still iterating. But I feel it makes sense to have the whole data viz visible on this page since we are giving an executive summary — meaning looking at the data as a whole — as opposed to zooming in to certain part of the data. Maybe zooming in would be good for takeaways!

I didn’t actively set out to consider what the plane beneath the city would look like. But I do think there is potential in a muted orange like this working. I just added it for this because I thought it helped the composition.

12 column grid structure

I added a 12 column grid for now (960 px wide) but am still playing around with this.

We’re hoping to finalize our visual language soon. I think crit from Q will help with this.

04.27.2017 | Crit from Q

Got crit on the parts I worked on.

We learned about two designers with a type activity: Karl Gerstner and Julliaan

Video

  • up saturation of orange (might be render issue)
  • 1 weight for type is good
  • grey or black color for type would be good
  • spacing before 60% is weird
  • “this is” = black, “one year” -> orange
  • not sure if orange is best idea for spot color -> maybe it should just be black-> maybe underlining?
  • pixelation of cube
  • take out “tch” but keep bars for now
  • text should be on screen longer if possible so more time to read
  • keep it so text is only one weight !! q says this is working well

Website

  • add navigation key on side to look at current, past, previous
  • line height is a little tight
  • spacing is a little weird in some places
  • can try tracking out “about”
  • hover is a lil strong

Plan/To-Do

  • strokes
  • Steven: type on UI of data viz and other screens of site
  • Deb: guidelines, pixelation,
  • Faith: video, website
  • Jessie: code
  • Albert: work w F?

04.29.2017 | Group Meetings

Deb made some updates to the video.

Vid Updates

Deb’s Iteration

Crit on the Video From Q

Q sent us the following over email:

“Comments:

  • At the beginning, what do you think about the position of ‘class of 1960–2016’ in relation to your main title?
  • Also, I think you can hold two or three sec after your main title, because.. it is intro? It is usually nice to give some time for viewers.
  • I think it’s getting there! I still think that some texts disappear little fast. What do you think? Especially where you explain the alignment (27:00), it would need more time (maybe more texts too?).
  • For the cubes, you used lighter background color (close to white), so around 31:00 and 44:00, it does not get along with another background color which is light grey.

Instead of saying, it works for me! Ask your classmates without any explanation.

  • What do you think about the bars? Are they intuitive enough for viewers who are not familiar with the context to catch?
  • Also, when there are more than a cube within the same industry, we are seeing the signs for the alignment multiple times. Are they okay?”

Filter on Data Viz Updates

Steven made huge strides on the interface that the user would interact with- figuring out that the Filter shouldn’t be a side bar but more of a key for the industries that can be interacted with. The level of satisfaction thing would come down once you highlight it. The icons look really good! He got inspiration from Google Maps.

Steven’s iteration on the filter

We noticed that the greys were the wrong shade. Also, the earlier positions part isn’t necessary. Also, we decided that we didn’t need the previous position part for now.

So then, he updated it to be the following.

Filter is always visable on layer above.
Level of Satisfaction pops up below when industry is selected.

Typesetting

I iterated on typography again, figuring out how to define terms. I need to make it better fit Steven’s styling of the filter box though.

Text Styles

I’ve shared it with Albert.

Discussion

We had a second meeting of a few of us, where we discussed how everything comes together, and Jessie shared her progress on coding the Data Viz.

A few things that we discussed are:

  • adding numbers instead of bars
  • typography and consistency
  • the hover definitions

Work Distribution

What we’re doing before Monday.

Jessie: Continuing on the code, getting numbers to show up, functionality of data viz
Deb: Video Editing -> Cube adjustments and reformatting new files into the final aftereffects comp, wireframe change, get rid of pixelation
Faith: End of video, excel spreadsheets (make sure data is transferring correctly, about, takeaways, questions with Albert
Albert: Website! about, takeaways, questions with Faith
Steven: Filter page, text formatting, excel spreadsheet, functionality of everything on data viz page other than data viz

04.30.2017 | Working

Website

I met with Albert today to work on the website. I finished up the Questions page’s typesetting and copy.

Questions Screen
Questions Screen + Hover

The stuff on the right wouldn’t actually be there. Was just writing up that part of the copy.

I thought it would be appropriate to show the toggled 2d view of the data on this page because it would be looking at each person individually.

Albert is going to finish up coding the About and Questions pages tonight for our meeting with Q tomorrow.

Video

I also worked on the last part of the video, which took a really really really long time. I made all the buildings pixel perfect. The city is constructed of 155 layers of squares of colors. I reanimated them so they appear one by one, and by current position, previous, and 2nd previous.

Deb’s working on the video now.

What I Still Have to Do Tonight

I’m going take a break to do other work for a bit, and get back going again maybe tonight or tomorrow.

What I have to still do:

  • finish takeaway screens
  • figure out if data is actually transferring correctly on the excel spreadsheet (going through 1 by 1)
  • figure out how the numbers will look on the cubes (just checked in with Jessie about what the plan is about this)

04.31.2017 | Working

Numbers

Unfortunately with the code, Jessie says we can only do the pixel font on the sides of the cubes, instead of image meshes. This makes my job easier but makes me kind of sad because we spent a long time figuring out what the grid on the sides of the cubes are.

Takeaways

Excel Spreadsheet

Still need to do this. Can get to it after the meeting with Q.

05.01.2017 | Meeting With Q

We discussed the following:

Website Typesetting

  • leading
  • bullets
  • hover box -> wrong color

Vid

  • get rid of punctuation
  • make underline closer to text
  • positions at the end is good

Filter bar UI

  • cube things at bottom
  • alignment of buttons
  • putting buttons on the filter side! looks good

05.01.2017 | Group Meeting

Deb fixed pixelation, added wireframing, and adjusted timing of the video.

I got crit on the text on “Takeaways” and showed the other things that I had worked on.

Jessie improved functionality of the data viz, with numbers and hover.

Steven needs to format the text on the right bar. I need to mine the data to make sure that it is displaying correctly.

Albert has been coding the website.

For type, we need to either find find a .json file or find something that can convert a font into .json, so that the numbers will be 3d-compatible.

Work Distribution

Deb: Finishing Video
Albert: Website Formatting
Faith: copy for hover states, takeaways copy, mine the excel spreadsheet data, helping with video
Jessie: send screenshots of the takeaways, helping with other parts of the site
Steven: implement design to code

05.02.2017 | Presenting to Class

Video Process

almost finished video

Website

Showing the highlighting feature.
Highlighting feature with color
Opacity change
Blurring effect
Blurring
Showing all togethter

Walkthrough of Site

Screengrab

Crit

We showed our video and website and got the following crit:

  • make hover of data viz a blinking instead of making it lighter.
  • a lot of the crit was about things that are still glitchy.
  • We still need to make the text in the video grey other than the black underlined text.
  • need filter and side bars to stand out more from the page.
  • still lots of glitches to fix in the code

05.10.2017 | Group Meeting

To do

  • images for text: data viz graphics
  • site map
  • video not being cut off

Dividing Up the Work

  • Jessie: data viz
  • Steven: code
  • Faith + Deb: tabloids

05.11.2017 | Final Website

Access the live website: HERE.

Screenshots of final website.

--

--