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:
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.
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:
Gotten more video and photo footage of the location.
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.
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.
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.
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.
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.
Over the break, I spent a pretty significant amount of time brainstorming my actual first draft of the visual design of the project. I found my main inspiration came from Vaporwave music and the accompanying visual aesthetic that normally accompanies it. I found myself using bright, desaturated baby blues and pinks and trying to loosely mimic the Windows 95 UI in a similar fashion as IACON did for the Nightwave Plaza app. I think overall combining that look with the more modern “flat” UI trend currently running the streets, I found something minimalistic enough to pass by most standards, but still seems unique enough that I know I’ll some day soon be fine with adding it to my portfolio. The one this I think I really need to nail down now is some sort of consistency between buttons in the actual viewer, as well as finding some good VR Sketch tools to make the mockup look more similar to how it really will appear in the phone.
Above you will find the 360º documentation of the area around the Shibo metro station. Constructed from video clips taken using the Ricoh Theta, edited in Adobe Premiere with the newly aquired 360º plugins from Mettle Skybox, and hosted on Youtube using video meta-data that enables 360º viewing functionality.
Our first step was to actually go out and shoot, and also happens to be the place where we had the most trouble. It was really a situation where if it wasn’t one thing it was another: first we couldn’t check out a cam, then the plugin stuff had to get updated, then the break hit… Once we got out there, the shoot actually went really well. Using audio captured through the Theta and on our iPhones, we were able to just find nice quiet spots that really showcased that abandoned feel. While on the scene we also made sure to look out for spaces that would be interesting to see in 360º (inside of the compound at 01:30, etc…).
In editing there were a few problems as well, but nothing that really compared to the challenge of initially getting out to shoot. It was pretty simple, we masked areas that we were in so that it would appear emptier in certain shots (00:45), but gradually as the film goes on, you’ll start to notice our presence as well (01:30). In editing, I also played around with colors. I think the results are… interesting, but I can’t quite put my finger on if I like it or not. My initial reaction is that it’s much too much, but as I sit on it longer, I kind of like how it gradually decreases in intensity and that it adds a pretty cool sepiawave kind of feel, like almost neo-noir esque. If I had used photos rather than videos for this project I definitely would have taken advantage of the superior quality of the shots to refine the look of the film for sure. I also love how discombobulating the last shot is as well.
Having a background in photography, I was quite aware of the rule of thirds in art in general after years of having it drilled into my head by teachers and professors, but I’d surprisingly never really thought of it in a design sense, though I can totally see it now that it was brought to our attention in class. That said, looking at modern movie posters, I was shocked to find a relative lack of using the rule. Especially looking at posters from the last two years or so, I found a definite trend towards super centered images, even when the posters didn’t take on traditional movie poster tropes. Thinking back to photography, my guess has something to do with the orientation of movie posters, though, I’m kind of just grasping at straws here.
Anyway, my example is this poster for the movie Akira, which I found extra interesting because by following the rule of thirds you get the text for the movie and the center point between the main character and his bike, which draws your attention to the two objects rather than just one.
Here is a base draft of my Wireframe prototype. I didn’t want to include a ton of features, because I’m still on the edge about one of my personas (I’m thinking about switching the casual gamer for an urban explorer), so I wanted to focus on the base-base-base level interactions required for my app. When I got to work in sketch, I realized that when thought of like this, my app is actually pretty simple! It’s essentially just a 360º video viewer with QR code functionality. I like this simplicity, and I think I’ll stick to something this simple in the mean time. https://invis.io/G9DNN2VM5
Watching, or experiencing, the documentary felt like it came off in a fairly gimmicky way. It felt as though either they would need to repeat information from the video in the “interactive” section, or that you could be missing important information by not viewing the interactive section, both of which feel like game-enders in their own right. It just didn’t feel as though the interactive section really added to the experience of watching a film, a qualification I would say needs to be met in order to justify the effort that went into creating it.
On the other hand, I felt that the interview was extremely insightful and acted as a good reminder about the actual ethics of creating docs. I had personally never heard of her co-participatory method before, but it definitely seems like an interesting way to expand potential docs. However, I do fear that it might take away some essential human elements from the doc.