Misc. Graphic Design Work

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.

Designed graphic of a Clock Town Mask fan mask in the style of masks from the Legend of Zelda Majora's Mask. The image mimics a display case in a museum, describing the details on the mask and indicating it is on display for the 72 hour mask challenge. The mask itself features the Termina clock as the mask face, with eye holes cut from the center. Four spires extend from the 45 degree diagonals, each colored to represent the four areas of the game, with Hylian text and symbols matching the areas seeming carved in. The clock's hand pointing at 12 is holding a triforce, with the pedestal from the clock tower above showing an angry moon. The left and right sides of the mask feature cutouts of the fairies Tatl and T ael. Below, the mask appears to have a "beard" that extends, resembling the twisting blade of the Fierce Deity in teal and green. Nested between the twist is a heart container.

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!

Concept image for Michigan Tech's Undergraduate Student Govenerment. Using elements of the "piano dog" logo, the stripes are used to cut into and angle off the left side of the "U". The husky head extends out from between the U and into the lower curve of the S to cut the lower S curve into its shape.
Logo image featuring two wizards with red banded and blue banded hats wielding wands from either side. Their wands emit their colored clouds of smoke, billowing and mingling at the center of the image. The text "Bonzai Brawl 2014" is cut from the clouds in the middle

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!

One of my larger practice designs as a personal project was my “Colorado Sunrise” designs. Inspired by my family trips to Colorado, I wanted to create a dreamy image that evoked the “happy place” I saw in my mind. I wanted to practice with the pen tool, and worked to draw and shade the scene using only basic shapes and shape cutouts I had carved with the pen.

I then wanted to set the design as though it was being seen from a “portal”, and placed the central portion of the design inside a beautiful skull cutout, which I adorned with beads and floral accents. I didn’t realize until I was working on it and needed to put a background color behind it, but this would make a beautiful print for a shirt!

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!

Infographic exploring the Twitch Plays Pokemon play-through. The graphic has hours along the Y axis and days along the X axis, allowing for a visual of what time of day most activities happen horizontally, and what happened in a day vertically. The graph features pink dots for Pokemon captures, blue dots for leader or badge wins, and green dots to indicate the start and end of the game. All dots in a color are connected by lines. Dots are also outlined with red for if anarchy mode was on, green for democracy mode, and yellow for both occurring throughout the event.

Misc Sketches & Art

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!

Digital colored drawing that shows a male and female inkling driving a jeep along a highway, with a license plate that says "Bri (heart) Nate". The female inkling is driving, has pink hair and is wearing a school outfit with a heart hairpin while wielding a splat roller weapon out of the vehicle. The male inkling has teal hair and is wearing a visored cap and aviator sunglasses alongside a Hawaiian shirt while holding a deco gal weapon. The land around them is mostly sandy with some low lying shrubs, and mountains in the distance. A giant purple ink tornado is behind the vehicle, and text is added to the front of the image that says "We Can't Stop Here, This is Splat Country!"

I found a challenge on Instagram to create your “Villager Persona” from Nintendo’s Animal Crossing, and after discussing with my partner and friends regarding what animal and type I would be, I set to work on my sketch and enjoyed it so much, I wanted to see it in full color. Below, you can see the before of initial pencil sketch to the final, digitally inked and colored result.

A digitally colored and drawn sketch of a woman's face with messy hair surrounding her. Shading is done in various pastel warm tones and shadow is done using purple.
Colored digital drawing of a chibi stylized avatar with her hair pulled to one side, wearing a purple to orange gradiated kimono style outfit. She is holding a fan and has chopsticks in her hair that have flowers on them.

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)

Drawn sketch of an inkling from Splatoon 2, wearing a magical girl scout outfit and a crown. The inkling has their tentacles in a heart hair tie to form a ponytail, and is smiling with its hand to its forehead showing a peace sign. Its other arm is at its side, holding a splattershot weapon that is dripping ink.

Often when I’m in a meeting or sitting and waiting, I tend to doodle away. As I’ve gotten older, it takes commitment to sit down and really commit to a fully detailed and fleshed out sketch. Regardless, I’m happy that I can continue to grow in my drawing skills, and I’m happy that digital art has provided me even more opportunities and intrigue to continue honing my skills!

A digitally colored drawing of a heart shaped perfume bottle with a silver crown cap. The bottle contains a dawn-gradient colored liquid that is bubbling up, and the bottle has wings on either side. A purple vintage air puffer extends from the cap. A ribbon across the bottle is purple with skull and cross bones on it, and a seal on the ribbon is a masterball from Pokemon. The image is meant to represent a poison gym leader badge.

Squirrel VR

Squirrel VR is a virtual reality personal project of a peer in my graduate virtual reality class. As part of the course, we were required to develop and present a VR project of our choosing. I chose to help my peer further develop his project from a sandbox to a full demonstration and tutorial level, and to conduct user testing in order to gain general feedback on controls and level design. I had no experience working with or developing user testing for VR, and had done little work in user testing for games more broadly. This project allowed me an experience to dabble in these areas!

As my partner had already developed a sandbox, mechanisms and a vision existed on his end. I worked to understand his goals for the semester, and how I could best help. He was most interested in coming up with a tutorial level. His desires were that it be open and allow for various engagement mechanisms, but still encourage players down a distinct path that would engage them with each of the game’s controls and allow them to reach a finish line. Collectibles as incentives to explore were also desired.

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.

Paper sketch of a tutorial level design for the Squirrel VR game. It showcases various landmarks for collectibles and receiving tutorials or various guidance on mechanics, as well as showing the physical boundaries and environment surrounding these.

After discussion of this first level design draft, a new requirement was revealed. It was also important to my partner that the tutorial elements in the world not pause the game in any way. My partner wanted the player to never be stopped from interacting with the world in any way. Cinematic cutscenes that guided the player to engage with the mechanic and demonstrated it were now out of the question, and a new UX problem presented itself: how do we teach the player the mechanics without stopping the game, and without walls of text?

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.

Once the tutorial level had been built (largely fitting the original design sketch), I began designing a user testing plan and recruiting participants to test the level and provide feedback.

My user testing largely focused on enjoyment, desire, and mechanics. Did users have fun, and what aspects frustrated them? What would they like to see as development continued or refined in this design? Which mechanics were intuitive or enjoyable, and which were difficult to execute?

In addition to gaining this feedback from the users after they played for some time, I also observed them while they played to note concerns, time taken on tasks, and visible markers such as difficulty finding buttons, getting “spun around”, and so on. Taking outsider observation of them at time of play alongside the user reflections presented a broader picture of the testing scenario.

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.

Overall, working on design and user experience testing for the Squirrel VR game was exciting and different from anything I had done. It used enough skills to be familiar, but the world of VR was a very distinct space to work in. This was a fun project to work on, and had me excited for potential future work on this project!


Prometheusaurus was one of my first major software projects as an undergraduate student. As part of our team software project course, we were tasked with working together to create a software item that met some requirement by the end of the semester. My team chose to create a networked application that was able to communicate information between client and server components, and we chose to design a game to fulfill this goal.

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.

Screenshot of the title screen for the Prometheusaurus game. A group shot of all the dinosaur player characters sits on a purple space backdrop that has faded images of the resource planets behind it. Three technological looking buttons indicated "New Game", "Tutorial", and "Exit" as options

For this project, I took on the role of scrum master and designer. I planned our directives in biweekly sprints, worked to mitigate obstacles, and managed team communications and meeting scheduling. As I had an internship the summer prior, I was familiar with Agile methodologies through my internship team’s use of them. I applied what I had learned during that summer to help our team navigate planning, managing, and executing a major project.

I also developed all the artwork for the game over the semester, wanting us to have a truly unique and original project to showcase. Working as an artist for this project, I also challenged myself: I had never drawn using Adobe Illustrator before, using it for the first time to create vector illustrations for all of our assets.

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.

One of the final art areas was also one of our most expressive: the development cards (Evolution Events) and thief events (Disaster Rolls). These images appeared when players purchased an evolution event card, or when a 7 was rolled by any player, triggering a disaster. The art on these cards often pushed my super beginner Illustrator drawing skills to the next level, incorporating new poses and background scenery to achieve the team’s vision.

Our team did a great deal of bonding over planning the jokes and ideas for these cards. We included nods to the Oregon Trail, to puns, and even to another team in the class and to one of our team members! These jokes and being able to realize them in our game helped our team grow closer – and as a scrum master for the project, keeping morale high and the team motivated was surely a reason to keep at it!

I also took on the primary role in compiling one of the major final deliverables to accompany our code, the Prometheusaurus User Guide (PDF). This guide serves as the user handbook for our software product, describing its features and how to begin using and navigate it.

In working to keep our fun theme and in the true spirit of video games, I designed this user guide as a full color game booklet versus a simple white paper. The document describes the cast of characters, explains the rules and the software interface, and has labeled screenshots to help users understand the components of the interface both in-game and as referenced throughout the game guide.

Creating this document was quite the adventure, mostly due to the campus printer. All the pages have deep blue backgrounds, and we were required to print the document for our deliverable in class. I vividly recall rushing back to my team as we worked to compile all of our documents, covered in navy ink on my face and hands after struggling to get a page unstuck from the industrial-grade machine. Eventually I managed to triumph over the machine, and we were able to present our honestly, rather beautiful, deliverable portfolio to our instructor.

Working on Prometheusaurus was an adventure, but certainly a fun one. Our final production code was lost after we completed the course, but the memories remain.

I look at this art now and while I certainly feel I’ve grown as an artist, I am intensely proud of stepping outside of my comfort zone to learn Illustrator back then, and of how much I did accomplish. The art is still endearing and fun to me to this day, even if it could be polished. Further, the amount of art I completed in the semester, while managing our team as scrum leader and still taking other courses, still floors me.

My team’s appreciation and excitement for our idea and this art propelled me to be the best team leader and artist I could be for them, and I’m still quite proud of the results.

Icon for the Prometheusaurus game which features the cast of dinosaurs on a space backdrop and a "P" in a technological font in the corner.

Storyboards and Comics

As a UX designer, one of my favorite ways to introduce or explain scenarios is using comic storyboards. These storyboards utilize persona-based characters in order to illustrate a need for or interactions with the product or key idea. As I’ve transitioned from an industry designer to an academic researcher, I’ve continued using comics to showcase problem spaces that invite research questions, or hypotheses and observations from the research.

One such comic that appeared quite frequently throughout my time obtaining a PhD was a comic of a student and teacher discussing code dependencies. My PhD research explored analogy, and I wanted to better pitch the hypothesized benefit of the ability to follow and better remember information presented in this form while one is learning.

This comic appeared on posters presenting my proposed PhD research, which gave two major benefits. The first: explaining my work using an easy-to-follow visual analogy (thus, using principles of the work itself!) made the work more inviting for poster viewers. The second was that the comics are fun and novel for a poster session, which got folks interested in coming to see my work and hear more!

A colored digitally drawn comic showing a student at her computer. She says "teacher, I'm having trouble with my code!". The teacher walks over and says "What seems to be happening?" to which the student says "Well, I wrote all the methods, but my code has an error!". The teacher then says "it looks like you're having issues with dependency. Think of it this way...." The next panel shows images of a bowl of pasta, a can of sauce, and a monetary bill. It says "Imagine you got asked to bring a pasta dish to a party....so you ask a friend to pick up the sauce. But that friend needs to ask another friend for $5 for the sauce. If any of them fail their job..." tow hich the student interjects "I can't finish the pasta for the party!" The teacher says "exactly! Method calls rely on each other to do their jobs too." The next panel says "Later:" and shows the student taking a written exam. They think "Ugh, this question about method calls...so hard! Why am I thinking of pasta sauce?? Oh yeah! This is related to method call dependency!"

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.

Rough sketch of a comic which is meant to describe the behavior of aliasing arrays in the Java programming language. The comic shows two dogs with different collars, and that one of the dogs has gone up for adoption. The owner of the other dog adopts the adoptable dog, and now that dog's collar changes to be at the same address as the first dog. When both dogs get off leash and are found by a passerby, both their collars indicate the same house to return them to.