p5 generative vaporwave cover

For the art assignment, I knew from the beginning that I wanted to do something in the Vaporwave style. And though, at first, I though that would mean glitching images to make it more retro, I eventually settled on instead doing this tron-esque vaporwave album cover. My main motivation for the pivot was because we’re going to cover pixel sorting and images later in the semester.

The randomization here is relatively basic: I have mountains being generated in a similar style to my “Martian” poster and the grid lines also change color everytime. I think the hardest part of the sketch was probably figuring out the log() function, since I’d never used it before and we hadn’t discussed it in class. Unfortunately, after I got the below screen captures, I didn’t save my most recent changes (switching from random to noise), but you can still find my sketch here!

SUCKERS IDOCS Update 11.4

While it might not immediately appear that we’ve been extremely productive with the project from the outside, due to being behind our current interview schedule, this weekend actually ended up being very good for both planning and conceptualization of the project. Throughout the week, I’ve been steadily combing my WeChat contacts to see if I could find any people that would be interested in getting interviewed and found pretty moderate success; however, last night I was pleased to run into a number of friends from Shanghai–that don’t go to NYU–who all displayed a definite interest in the project. Be it because they themselves are artists, because they’re interested in learning more about VR, or just because they’re good friends willing to help some students complete a really interesting project, every single person I approached and pitched the idea to seemed interested. Add that to the plethora of contacts that Sara was able to make through various social networks (WeChat groups, Facebook groups, Tinder, and Bumble), our current planned interview count has hit 15. Unfortunately though, we currently don’t have a ton of native Chinese interviewees and that is now our number one goal in booking more interviews.

Continue reading

SUCKERS Generative Design

For the class midterm, I decided to create a somewhat minimal look at the inside of a Shanghai metro car that users can change the color scheme of based off of what line they select. There is both a static and a moving version of the sketch. Check out the static version here, the moving version here, and the Behance post here.


The idea behind this project was a somewhat simple one that I decided to gradually increase in complexity as the pieces fell into place. At first, I just wanted a generative design to represent Shanghai, something that people who live here would immediately recognize, but that wouldn’t be overly cliché, like using any of the easily recognizable skyscrapers or even necessarily the name. I also figured that using something minimal would allow me to utilize the design for a multitude of purposes: advertising, UI, etc.

After settling on the metro, I knew that I would have my work cut out for me. Even though the colors are programmatically decided, because there isn’t some sort of existing CSV document with all the HSL values of each of the lines (or at least that I know of), I had to manually input all the lines’ values into the sketch. In addition, I had to do the work of actually designing the subway! In order to do this, I figured out the size of an iPhone screen and created a grid system that I could use to assign different points to, be it the origin and destination of a line or the origin corner of a rectangle. From there, I created the design and included a variable for controlling the size or “zoom.”

After I had the code working, I decided to up the complexity by making a sketch that moves. Unfortunately, I wasn’t able to get a JS library working to create gifs, but I’m still grateful to have the moving version for later iterations. Once that was completed, I set to work on visualizing the project in the real world. I first implemented it in my existing UX documents by using Line 8 for a poster, but also by using a slightly altered Line 1 render for the onboarding screens. Next, I used a business card PSD mockup to create the mini-promotional materials that I would hope I could use in a guerilla marketing campaign. I want to print 100s in each color and leave them near metro stations so that people think they’ve found free metro cards when in reality, they’re getting a QR code for my VR project. These final versions featured in the Behance page were also put through photoshop in order to give them a more retro, glitchy feel.

In terms of next steps, I’d like to add a few more iterations within the code: namely the ability to toggle having the silhouetted characters visible inside of the metro as well as the text with the title and blurb & the metro line as featured on the posters.

UX “S U C K E R S” Final Documentation

For my UX design final, I decided to continue on with the project that I’d been doing for the entirety of the course that I plan on eventually applying to my capstone. However, despite the fact that it is the same project, it’s changed so much since the course began that I wouldn’t be surprised if someone thought it was a different one entirely! For starters, in the beginning, the project was originally called The Art of Peace (in pieces), and while this may seem like an artificial change, it ultimately came down to the same thing that a lot of my changes were motivated by: the user research that I did simply didn’t indicate that people were all that interested in playing a video game (i.e. the “in pieces” bit of the title).

In fact, despite my initial impulses to completely gamify the experience, when asked on a scale of 0-10 the importance of having a game component to the success of the project, the score averaged out to ~5.58, showing a degree of apathy considering the alternatives (needing a game component to consider the project a success and not having a game component to consider the project a success). In addition, when asked on a scale of 0-10, how much of a gamer one would consider themselves, responses averaged even lower at only ~4.08.

But yet, those two responses drastically changed the direction of the project… Not only did it change the name from Art of Peace to S U C K E R S, it helped me reduce the number of personas I had to focus on to two in particular, it allowed me to simplify the number of interactions that I would have–which ultimately also impacted my user flow and “app map,” and it helped me focus my wireframes (both pen + paper and digital) and visual prototype to just interactions that had to do with playing video and the location-based components of the project.

Ultimately this is all just to say that I found the User Research phase of the design process quite helpful, potentially even the most helpful of the stages that I went through. And now, since I’m going to continue on with this project for my capstone, I’m pleased to have some more skills in my toolset. In fact, since giving my presentation, I’ve started another survey and started to circulate it through different social media channels. Though, I will say, that this time around I’m going to try harder to get respondents that I don’t necessarily know as I didn’t quite get as much feedback as I would’ve liked from the last survey. I also plan on definitely getting more one-on-one user testing now that I have a higher fidelity prototype, since the last time I did user interviews they weren’t quite the level of professionality that I would normally strive for: they weren’t recorded and the basic wireframing of the app made the responses much more abstract since the app’s direction was still in limbo considering that I still wasn’t that sure about if I was going to include the game aspects or not yet.

On another note, I was also quite pleased with the course because it enabled me to really get in the trenches when it came to defining the visual/artistic direction of the project. I’m extremely proud of how thoroughly I was able to design the aesthetic of the project, especially considering how early I am in to this capstone process! I loved searching through the depths of the internet to try to find the coolest retro UIs and pixelated icons, and even though I wasn’t able to include some cool finds and extra work that I did to make elements that worked with my overall artistic vision, again, I look forward to adding them as the year goes on!

Any how, here’s the link to the current Behance of the project and I hope you contribute to the new survey!

UX Updates

After a few weeks of feedback, I think it’s become increasingly clear to me that as I’m pitching Suckers as a UX design project, I need to do a much better job of explaining the much larger context behind it. Ultimately, it is important to note that I plan on continuing with Suckers as my capstone project, and as such have found a way to incorporate the project into many of my classes (from Interactive Docs, to Programmatic Design Systems, and even UX design). However, I think that because I can see the project so vividly, it has been hard for me to grasp what exactly it is that people don’t understand about my project from a UX perspective.

Because I think I’ve got a pretty solid visual aesthetic, and I’m pretty happy with the visual direction of the project, I’ve decided that in this final week I really need to focus on honing my original user story, but making a much higher fidelity version that can be adapted for further promotional material (think, game-play trailer). I’ve begun to write out an updated user story that attempts to really hammer home the essential details about this project, that it is:

  • Location Based
  • Low-Fidelity VR
  • About Vampires

As a side note, though also relevant when it comes to our impending poster deadline, because I’ve also focused on this project for Programmatic Design Systems, I think it’s important to note the crossover that this while have within my UX design! Essentially, I’m in the midst of creating an adaptive load screen that changes depending on what level the user has selected; however, in addition to that nifty feature, I’ve begun to devise a guerilla marketing plan that will incorporate the location-specific loading screens into mini, metro card sized “posters.” Here’s a rough, rough, rough draft that begins to show the early stages of the idea.

Interview with Katy Roseland

https://youtu.be/jKKpd8XwMTk

Above you’ll find my rough cut for the interview. I’d recommend watching it on a phone in MagicWindow mode or on a computer, as I believe watching this–with it’s rough jumps–in VR may cause nausea. Further, I’d recommend pausing when you encounter snippets from within the space, as they’re kept short and meant to be viewed as photos as a way to keep video length down for the assignment.

As I look back on this, there are immediately a few things that I wish I had done:

  1. Gotten more video and photo footage of the location.
  2. Cut the video so that the audio fades into just the music and the visuals fade to the photo between the shots, or the very least there are black video buffers between the shots.
  3. Used HD photographs for the transitions.

These things aside, I think I did a pretty good job of condensing 20 mins into ~3. I really enjoyed this assignment, as it made me feel like I was taking things to the next level, and I definitely plan on continuing with this particular video. I’m pretty good friends with Katy, so I think I’m going to go back and get more footage from the Basement–with lights and everything–and interview other Basement members and visitors.

Here’s the blurb from the video’s description.

“This is a rough cut of a mini-documentary about the space and artist collaboration, Basement6, and the people that make it up. Featured in this video is Katy Roseland, one of the Co-Founders of the organization, talking about her own art, origins of the space, and where the project is now.

The audio is from Audio Library : [https://www.youtube.com/watch?v=qtEMz…]”

You should be able to view the video if you’re logged into a nyu.edu account.

Midterm Assignment

After last class, I walked away quite pleased that we’d taken the time to begin thinking of ideas. After ruling out the possibility of doing a design for our own personal brand, I was pretty confident that I wanted to do something related to my capstone. Lately, I’ve been trying to do projects in all my classes that are somewhat linked to it. In addition to that, after the meeting with Michael, I knew that I needed to figure out how I can really sell this idea in a single sentence, an elevator pitch of sorts… So I figured, maybe I could use this assignment to do a similar thing for the visual aesthetic of the project.

So as I talked to people about what exactly I’m working on for capstone, I started to pay extra attention to the words and key ideas I tended to rely on more to explain the core idea. The big three that kept coming up were: Location-Based. VR. Vampires. 

Which brings me to my idea: a minimalist image made in p5 of the inside of a subway car with a single mysterious rider. The color of the inside of the car is determined by an array of metro car colors, which correspond to their real-life equivalents. They can be used as loading screens in the game depending on the loading video’s closest metro line, but can also be used in promotional material (it just so happens that iPhone screens and metro tickets are about the same shape, albeit a bit differently sized). Thinking a bit ahead of myself here, but it could be a cool guerilla campaign to leave a bunch of metro card sized flyers at metro stops with QR codes leading them to download the app. Different flyers for different lines. These ideas are all a bit out there, and would totally need workshopping, but the important point I’m trying to get across is that this p5 sketch could essentially become an indispensable tool in designing stuff for this project… programmatic design has a ton of potential and power!

Anyway, I drew up a quick grid sketch on paper then got to work in p5. You can check out my progress here, I’ll probably keep working on that exact sketch. I think it’ll be easier to see my logic in code and in person than I think it will be for me to explain it here.

https://alpha.editor.p5js.org/kadallah/sketches/ryiigW46-

Interview Phase 1

For my interview, I decided to talk to the amazing Katy Roseland of Basement 6, one of my favorite spaces in all of Shanghai. Basement 6 is part space, part artist collective, all awesome. It essentially boils down to really cool, creative people from all different artistic mediums to form a really amazing alternative space in a city that’s nightlife consists primarily of over the top fu’er dai nightclubs and bougiee expat bars. In addition to being a hub of artistic, creative crazy cool shows of all kind (from DJ sets to visual, interactive exhibitions), of all the spots in Shanghai that I frequent, I would say B6 also happens to achieve the highest degree of cohesion between local Shanghainese/Chinese people and Waiguoren.

Basically, I love this spot, and I consider Katy (one of the founders) a good friend, so I decided to turn the 360º lens on her and the space. The interview I got ended up being ~20 minutes, so the hard part really is going to be cutting that down. I also fear that I don’t have enough footage from within the location to really do it justice! So I might need to swing through again before Wednesday rolls around.

Generative Type

For this particular assignment, I decided to hit the ground running with the Font that I thought of during our Monday class’s brainstorm, which ultimately boils down to letters created from a number of triangles.

After Wednesday’s class, I was definitely inspired by the lecture on pixel fonts, not necessarily in terms of generating “pixels,” but instead because I knew I would be able to use what we learned to instead program vertices for shapes. At first, I attempted to create triangles using the triangle function, but reverted to what we learned in previous classes in the name of simplicity. I then redrafted my letters in a way that all of the shapes were overlayed on top of a 5×5 grid, so that all of the vertices would fit properly on this grid, with the knowledge that an “external” variable would control the size of the letters (i.e. multiplying the initial tiny letter grid by the size variable).

Once I began coding, it quickly became a game of nested arrays. At first, I was pretty terrified, haunted by memories of freshmen year coding woes where arrays kept me up at night in confusion. But this time around, I found it much more intuitive! I think that may be because I did it kind of piecemeal. Rather than saying, “I need three letters made up of maximum tree triangles made up of three vectors” and coding the structure of the nested arrays, I wrote the code first for triangles, then the for loops for spawning letters, then the structure that holds the letters. Honestly, pretty proud of my self here.

After getting the letters done, I decided to jazz it up a bit by having the color scheme be some what randomly generated, but from a subset of colors that reminded me of jam. Jams of all kind, blueberry, grape, strawberry, etc.

Anyway here’s the sketch and some pics of early drafting! If I have time over the weekend, I’ll try to add a letter with 4 triangles (R) and play around with having multiple lines of text.