Graphic design work and the intrigue of digital artistry is one of the first areas that propelled me into the world of programming and UX. I’ve worked on plenty of odds and ends for my own enjoyment and growth, as well as for events and groups.

One fun design where I pushed myself to leverage new techniques and approaches was my “Clock Town Mask” display for the 72 Hour Mask Challenge put on by Nintendo.

I had sketched a mask design on a piece of paper, and knew I did not have the time or resources to create it in real life. Instead, I tried to replicate the textures of a primarily wood mask in Photoshop, and to set the design in what looked like a museum display case.

While looking back the design is a bit flat, I’m still quite proud of some of the unique ways I was able to bring my sketch to life in this design.

As a member of the Blue Key Honor Society, one of my duties in undergraduate was to assist with our university’s Winter Carnival. I worked on the publicity committee, allowing me to utilize my graphic design interest.

While the logo is created by community members as part of a yearly contest, I wanted to ensure that I incorporated the feeling and color scheme of the logo in the work I was asked to do.

Two major pieces I created for the 2014 Winter Carnival were the ice arena banner and the event schedule poster. The banner is largely focused on the winner’s logo, but I wanted to ensure to draw focus to it in an interesting way. Given the theme, I opted for “papercut” style VHS tapes drawing the eye to the logo, with film reel running up and down the sides. I used the same snowflake pattern of the winning logo in the backdrop to aid in consistency.

I am especially proud of my work on the calendar of events. I used the same “papercut” style and the five colors used in the logo, and managed to create a visually interesting schedule of events that incorporated various film-associated shapes. The poster was a limited size and needed to incorporate all of these details – I was quite happy with the ways I fit everything in!

I also created many posters and logos for various groups. One of my most utilized designs was for our undergraduate student government. A friend in the group asked me for logo ideas. I utilized the stripes from the end of our “Piano Dog” logo to cut the ‘U’ in a visually interesting way, and then used the husky head to create the curve of the S. It was a simple rough draft, but worked! While I was never told whether the group liked my design, the next year I noticed USG branding themselves with a clean and finalized logo featuring…a cut U and a husky head in the S. I guess they must have liked it!

I also created the logo design for our 2014 BonzAI Brawl, an event where students create and battle AI. The theme was wizards for the year, and I used a 5-color palette to limit t-shirt printing costs. This logo was featured on t-shirts and posters. It was simple, but fun and effective!

I have also been extremely interested in data visualization, and especially in exploring interactive methods for it.

For a media course at my university, I chose to explore visualizing the data of Twitch Plays Pokemon, and wanted to do so by laying out events in various ways.

Ultimately, my goal was to have an interactive website with a traversable and filterable timeline. During a hackathon I had a functional “timeline” to click through, but it was not the engaging feature I wanted for my final project.

Instead, I chose to create a static visualization connecting types of events across days and time. This allows users to see active time periods, days, and types of events, as well as the “mode” of game during the events.

The background image was added to fill deadspace, but was created by another fan of the series (IrisChroma on DeviantArt). Given more time for this project (and not a change in trajectory of my approach!) I would have devleoped my own backdrop or put a bit more design such that I did not feel the visualization needed one.

I certainly think there are a lot of aspects of this I could have done better on. But, for my first major data visualization telling several data stories at once, I was quite happy with what I learned from the process. And certainly, I’d like to try my hand at visualization again – maybe without it being a class deadline though!

Drawing and creative pursuits have always been a major area of interest for me. The ability to express myself online is one of the reasons I became so interested in graphic design, web programming, and later programming proper and UX design!

While I can draw digitally, I’m much more confident with a pencil sketch as a picture on a base layer, then digitally inking and coloring that.

This image started as a joke sketch given how much my partner and I enjoyed the Nintendo game Splatoon. I liked how the sketch came out so much, I worked to digitally ink and color it. This was one of my first “full” pieces of digital art!

While I may prefer a pencil sketch prior to m digital inking and coloring, I’m not completely lost if I’m without the ability to get a pencil and paper sketch as my base layer!

While I was still working to learn shading techniques in digital art, I sketched a quick female face with wildly messy hair to practice shading using not just shades, but various hues.

When hanging out on tradition BB style forums, I really enjoyed having art in my signatures. I sketched up and colored this quick “chibi” cartoon figure of my site avatar to use in a forum signature.

Sketching has certainly been an up and down road for me, but I am happy that I never gave up on it, and am always surprised at sketches that turn out well even after months of time away.

I have a long way to go as an artist, but I’m getting much stronger at dynamic posing and creating a sense of presence with facial expressions and movement.

This image of myself as a magical girl inkling from the Nintendo game Splatoon is one such sketch where I’m proud of it breaking away from stiff posing. I hope to ink and color this one soon!

(and hopefully one day, I’ll be better at drawing hands)

Given a general overview of the controls and these desires, I set to work in planning an initial level design. While I had little experience in level design, I used my knowledge of games and of user experience design to create an initial map of a level.

This map sketch highlights potential collectible locations, barriers, set pieces, and spaces designed to teach players about a new mechanic. Collectibles were divided into two types. The first collectible type was “berries”, a common collectible designed to encourage basic exploration and aid in navigating to “new areas” of the level. The second was “acorns”, a rarer collectible that required deeper exploration and interaction, more in the “Easter egg” style.

At spaces for learning or exploring new mechanics such as climbing or flight, a cutscene icon was used to indicate breaking into a tutorial of that mechanic.

My solution was also timeboxed: we only had a semester (alongside other courses) to complete our project goals, and thus, approaches had to be scoped accordingly.

While we did not have time for 3D modelled persistent videos that the player could move around to get a sense of button presses and motion, we did have time for me to create small graphical animations.

I referenced squirrel movements and sketched these alongside a moving Oculus controller with the button presses highlighted. The movements shown on the squirrel indicated the expected outcome of moving and pressing the controller in the indicated way. This also helped to “make sense” of some of the button controls, as methods of movement such as “gripping” the ground to pull forward may have felt unintuitive but were not in talks for modification.

These images then displayed in the overworld at areas of interaction. This allowed the player to enjoy the world without the tutorial images ever-present, but readily available through the press of a button in the relevant areas.

In addition to the tutorial images, level design, and user testing, I also created some simple storefront and application graphics.

In game, I also created quick resources for a gold, silver, and bronze medal symbol when players cross the tutorial level finish line.

These quick graphic elements were small requests, but added a lot of impact for our final project outcome in class and any potential future iterations that could result in an app store release.

The general design and gameplay of Prometheusaurus was based on the board game “Settlers of Catan”, but centered on dinosaurs in space. The game allowed players to choose a dinosaur to play as, which determined their settlement (rockets and space stations) and road (star paths) colors. The board featured square land (planet) tiles around which players would develop their paths and space settlements while attempting to achieve victory.

Adding a cast of colorful characters created a more vibrant and fun world that we were excited to continue adding to.

In addition to our title screen player characters, art was also needed for the various game elements. The planet tiles represented the game board, which dynamically changed each game.

The planet art for each tile, determining the resource on that tile, is populated alongside a double dice roll value (2-12, but not including 7 as this is a special roll) at random when the game begins. Server and clients communicated in order to ensure all players saw the same randomized game board, and that changes were populated to each client’s view.

The planets were designed to represent their resources in unique and fun ways. The “Steel” planet for instance features an homage to Superman (the Man of Steel). Our colorful worlds match our colorful cast!

Having a space settlement adjacent to a planet tile and the die value on that tile being rolled awards the player the resources of that planet. The Farm Planet awards Space Cows, Food Planet awards a “Food Cube”, Rocky Planet awards Asteroids, Electrified Planet awards Electricity, and the Steel Planet awards Metal Beams. Black holes award nothing – they are the voids of space after all! Players collect resources in order to develop further space settlements, star paths, and to activate events. Players are also able to trade resources at the shop, which randomizes trade values to add another element to each game.

The first comics I created for academic research helped explain observations we had from the pair programming behaviors our students had in their lab sections. The initial four panel comic explains a situation students often find themselves in when they do not establish collaborative pairing habits – the lack of shared context and flow on one’s own work separates them, and they do not gain any of the learning benefits and support that collaborative pairing provides.

The next four panels of comic featuring the same characters were designed not as a progression four panel comic , but are showing four variants of pairing behavior we observed – hence their individual creation rather than immediate combination as a whole. A single panel can then be isolated and used when describing one pairing behavior, or all can be combined into a four panel image to show the subset of interesting behaviors we observed. These panels show both partners showing their computers, which can be seen to have different information on the screens in accordance with the “roles” we observed each taking on. This helped to identify that not all students pair program in the exact way pair programming is described, and to better illustrate these behaviors.

The pairing behavior comics were used in poster presentations as well as conference proceeding presentations.

I have not only used comics in research settings, though I do use them much more frequently in academia. During an internship in my undergrad, I took a Coursera Human-Computer Interaction course in the evenings which incorporated the use of several UX “toolbox” elements into the course deliverables. I created two scenario comics for WatchDog, an application I was proposing to help make walks home safer.

My first comic illustrated a “photo save” feature which prompted for a photo to be tagged as the most current appearance of a user. If the user of the app triggered an alert or close family and friends reported them as missing, this photo would then be distributed in the hopes of helping them be spotted more quickly.

The second comic illustrates a noise deterrent feature that is able to be operated from a user’s pocket without looking at their screen, in order not to draw suspicion. Triggering the deterrent could also be set to alert selected friends and family that this person had activated an alert, ensuring that loved ones were aware to check in that they were okay.

These comics were the first record I have of creating a persona-based use case storyboard for UX design. I actually still use them as examples frequently when presenting on UX tools and communicating ideas and software design to stakeholders!

As an academic, my research on analogy in computing education has also opened the door for even deeper use and analysis of comics and storyboards. Comics as a visual representation can be used to communicate ideas analogically, and communication of understanding is necessary in educational contexts.

A researcher team I am part of at my institution is currently exploring the potential values for educators and learners of comic-based work as an assigned exercise. I have also previously discussed the intersection of comics and my research on analogy with computing education researcher Sangho Suh, whose PhD research has focused on comics for programming learners. Together, we collaborated in taking concepts from my analogical design framework to design a comic that reflected a programming scenario for the study-design of comics alongside code snippets he was exploring.

The sketch here shows a (very) quick draft of a comic explaining aliasing of reference types modifying memory location as an analogy to a dog’s collar showing a new location as it is adopted by a new owner. This sketch was then passed over to Sangho’s team, who developed a finalized version of the comic that fit the artistic style of the team’s overall comic work.