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.

Research Diagrams

As an academic researcher, one of the most interesting spaces design has been valuable for me is in creating diagrams to help explain concepts in my work. Diagrams can tell the story or idea in ways that are more accessible or compelling than plain text or tables, and I find that when trying to synthesize major concepts I’ve been exploring, designing diagrams not only helps create a new artefact for my work, but also helps me organize my thoughts by activating my “designer brain” to see the concepts a different way.

One of my first diagrams illustrates how mental models are continuously being leveraged and adapting based on our environments. We engage in cycles of accessing our models, using them to draw conclusions, and refining or confirming those models based on the observed behaviors. I wanted to use a cyclic design to represent this as an ongoing process of actions and reactions.

Diagram showcasing the process by which fluid reasoning helps to crystallize and shape knowledge. Ones background forms crystallized knowledge, which shapes usage of fluid reasoning. New problem spaces are processed using this reasoning, and repeated use of it solidifies problem understanding. This causes the problem space to become crystallized knowledge.

I also used this same diagram layout to propose how what we coin as intuition in novel problem spaces may work cognitively given the above process. It takes the same general components and idea, and proposes that through specific fluid reasoning paths being repeatedly used, we naturally gravitate to specific conclusions in certain contexts, and near instinctively arrive at intuitive assumptions or answers through them. This diagram simply illustrates a potential idea for what intuition means cognitively, but I felt that in designing it in parallel to the prior diagram, it showcased why this concept may be viable given the previous diagram’s discussion.

Diagram showing the assimilation of knowledge process that informs our mental models. It shows how Background and Experiences form knowledge representations, which create perceptions and theory that are then tested by applications. Such tests reveal results and feedback that become new information, which is refiltered through the knowledge representations to create new perceptions and theory, expanding one's background and experiences.

I also wanted to illustrate relationships between fluid and crystallized intelligence and mental models, and how knowledge can transform from fluid to crystallized. This diagram’s design was inspired by the idea of water systems in caverns forming stalactites and stalagmites – the fluid elements transform to crystalized, solid elements through time and wear.

A diagram suggesting how intuition may function alongside fluid reasoning and crystallized knowledge. The diagram shows the problem space being examined using a shaped fluid reasoning path, which was carved by applicable crystallized knowledge. This shaped fluid reasoning path applies structurally mapped abstractions, and leads to an intuitive result.

A core aspect of my theoretical framework was Dedre Gentner’s work on structure mapping and career of metaphor, and I used diagrams to explain aspects of her work as well in order to ensure the theories I was drawing most from were understood.

I explained our abstracted schema as filters through which we compared and understood information, and showed the process of schema abstraction by using tiny “bug creatures” for the process of analogical reasoning. We compare two items to find the commonalities – in this case, two concrete bugs are compared and a fairly rigid understanding of “what a bug looks like” is abstracted out – bugs have a rounded body, three eyes of varying circular shapes, and three legs at the bottom.

Diagram showing the structure mapping filter that allows for abstraction. It showcases two circular bug like creatures with three legs and and three eyes, labeled "Compare". This moves to "Abstraction" which shows a more general bug that encompasses the common features of both. This leads to "classify new information" which shows a bug that has a square body, four legs, and four eyes. This leads to "further abstraction" which morphs the shape to be non-circular, and indicates that there must be "n" legs and eyes. The classification of new information is also pointed backward toward the Abstraction, indicating this is what the new information was compared against prior to Further Abstraction.

After the abstraction process, new bug information was added – this bug is different. The body is not circular, and it now has four eyes and four legs. In attempting to reason about this with regard to the previous schema, the model must be modified of “what a bug looks like” – this results in further abstraction. The body shape is now amorphous, as it is does not have to be a circle. The eyes and legs also share a new relationship – it is not specifically three, but rather, that the number of eyes and number of legs (“n”) will be the same. The abstraction that was created in mind for “what a bug looks like” is revised in our work to classify the new information as a bug. This abstracted schema for “bugs” is a filter we use to explore the world, built on mapping structures and relationships between entities and ideas.

The bug diagram complimented the mental model usage and revision diagram by showcasing how analogical reasoning theories play a role in this process. My second diagram explained career of metaphor using the concept of a floppy disk, and how its image has come to mean “save” as a dead metaphor, where originally the floppy disk image was used to draw the analogically reasoned conclusion of “what saving does” – saves to the item inserted in the computer that looks like this. This image allowed me to illustrate the career process, showcase an example of it within the computing domain, and then lead into discussion of how the metaphorical nature of concepts in a digital environment is shaped by the concept of career of metaphor.

A diagram showing the behavior of career of metaphor using a floppy disk. In the "Novel" area the floppy disk is shown as a physical item next to a computer tower, and a menu shows a representation of the floppy disk next to the text "Save As". This moves to the Conventional area, where several icons are shown by themselves including the Floppy Disk icon. Hovering over it shows the text "Save". This leads to the "Frozen" area, which shows a writeable compact disk, but that the floppy disk icon remains the same. Finally this moves to the "Dead" section, which shows a person labelled "Gen Z" thinking about the floppy disk icon, and suggesting it equals the word "Save".

I also developed entity-relationship diagrams (based in structure mapping) to explain the analogical relationships found in memes. One of the studies I conducted for my research explored how students reason about memes and come to understand programming memes and “what they mean”.

These diagrams show the clearly analogical nature of the meme templates used in the study by highlighting the entities and drawing the direction of their relationships. Ideas reflecting the relationships here became a dead metaphoric schema for many participants, allowing them to instantly reason about “what the meme meant” through a near intuitive understanding of these mappings.

In the interest of showcasing how these templates were drawn on the memes, I also created diagrams of a “fake meme” I created for illustrative purposes. I show examples like the participants in the study were given – they saw the meme templates, a nonprogramming example, and a programming one. I used a photo I had taken of a curious squirrel in my yard to create two fake memes fitting the same themes participants saw, and then drew the entity relationships of “using the meme correctly” on the image to showcase the mapping process in making memes. This allowed those who may be unfamiliar with memes to see examples using an image I owned and a memetic mapping I had created to see how these entities and relationships map in actual usage, and how an image from a show or real life can come to take on memetic meaning.

Photograph of a squirrel with its hind legs on a chair arm and its front legs on a patio table, looking eagerly at a lantern set on the table. This image was used as an example template for a meme to explain the structural diagrams.
Photograph of a squirrel, labelled "me" with its hind legs on a chair arm as the chair is labelled "my three other unfinished projects" and its front legs on a patio table, looking eagerly at a lantern that says "new project idea" set on the table. This image was used as an example template for a meme to explain the structural diagrams.
Photograph of a squirrel, labelled "me" with its hind legs on a chair arm as the chair is labelled "leaving it alone because I have no idea what it does" and its front legs on a patio table, looking eagerly at a lantern that says "refactoring decade old legacy code" set on the table. This image was used as an example template for a meme to explain the structural diagrams.
Photograph of a squirrel used as an example template for a meme to explain the structural diagrams. The photo is faded out and colored over with entities and relations to explain what the faux meme's structure is intended to communicate.

Swear Web Banner Art

One of my biggest wishes with Swear Studios was to have each page’s design be able to tell a story. There is some gorgeous and evocative stock photography out there, but the heart of Swear always ran deep with fantasy story themes I had conjured. I knew illustration was what would best evoke the fantasy I wanted for the website, but I felt stuck in being able to have my artistry deliver the ideas I envisioned.

In October of 2019 I took part in the challenge of drawing a picture every day, using a list of themes I had created that seemed intriguing. I started off only certain of what the first four images should really “be” – the story line of a young woman on an adventure who finds a crystal that helps realize and unlock her magical potential.

I had made several attempts prior to this challenge to draw the first image, “Discover”, and none were even remotely close to captivating in the way the “picture in my head” was. Something about this challenge though flipped the switch – while the picture wasn’t the original composition I had in mind, it turned out better than I could have hoped, and was one of my more dynamic drawings in terms of movement. This was surprising, given how little time I had been able to devote to drawing because of graduate school!

Drawn sketch of a girl in a snowy weather outfit Discovering a levitating Crystal in a Cavern

The surprises continued to emerge for me as I carried on with consistent drawings each day. What had originally started as a small routine to get me back into practice became one of my largest endeavors and some of my most fantastic drawings yet. I was stunned at the progress I made through the month and the ways I pushed myself. I used reference more judiciously and consistently, and explored poses and compositions I would have been terrified to try prior.

While by no means are these drawings perfect, I was astounded at my growth and ability to step outside of my usual bounds with some degree of success. I completed a drawing for each of the 31 days, and even did a few “mascot style” doodles after.

Of course, sketches were only half of the battle – website banner art requires digital composition to work well!

While I am still working through digitally inking each of these drawings, I am also proud of the growth I’ve had in my inking capabilities from this project. I grew up using Photoshop, and was more comfortable with it as a result. However, I wanted crisp vector lines to be able to scale and work with my sketches better. As a result, while I had inked prior in Illustrator, I was also invested in growing that skill.

My art isn’t perfect, but I certainly feel that my inking skills have grown as well. I used to feel that whenever I inked a drawing, some of it’s “soul” was lost – the fine detail in some of my lines or the light shading a pencil gave fell away, and the result was flat and lackluster. I truly wanted better for these drawings so that I would feel happy seeing them around my site – and that care and dedication I feel showed through in a growth in my digital line art.

I grappled with “to color or not to color” the art for quite some time. While I think it would be interesting to explore color at some point, I also felt that the line art nature kept the focus on the art and the page design consistent, rather than fearing color composition would take away from the banner narratives.

I hope you’ve enjoyed seeing these designs on each page. They tell the story of a girl realizing her magic and using it to help others while growing herself. It’s a story that resonates with me – and with the desire I have for this studio.

Streaming Channel Branding

In addition to working on designs for my personal website, I’ve also worked on designs for my video game streaming channel as well. This gave me a relevant space to work with some of my “dark modern fantasy” motifs that appeared in a style sticker sheet I created before adopting the light “magical girl” theme for the website. Given that gaming themes and imagery often take on a bit more “edgy” design, it fit very well to incorporate those styles into the branding.

The channel design leans a bit more modern and of course in “dark mode”, but clearly incorporates themes from Swear Studios branding such as font family, accent colors, crystals, and the “winged heart” concept (though a bit differently imagined). The channel is a personal project not directly affiliated with Swear Studios, but given the Swear branding is so personally tied, it was great to find a fit for some ideas and assets in a personal branding effort.

Working on the channel required me to design for not only a different type of space, but also to consider design in new mediums and learn new skills.

The channel is part of a video live streaming platform, and so designs included various screen layouts for video content such as intro and finale screens, as well as overlay elements that were persistent across various scenes. In addition to elements in the video production, I designed other channel page elements such as the banner and static info boxes.

I put a lot of effort into learning the OBS Studio tool and the capabilities I had with scene layout. Just like my progression with the Studio branding, it took several iterations for me to arrive at something that felt comfortable and clean but still showcasing personality.

I went from a very box based layout that had lots of text and segmented components on my main scene to primary branding being a simple bar along the bottom and a social box underneath my web cam. I’m happy that despite downsizing the amount of graphical branding in order to keep focus on the video, the personality still comes through.

Streamers are also allowed to upload emotes, which their viewers can unlock and utilize in chat and across the site. In addition to designing my stream video and channel page elements, I also drew my own emotes. Emote designs were often based on stream jokes and our gameplay library.

Emotes have also gone through frequent iterations and revisions – I finally feel I have some comfort in designing them, though I’m certainly not a pro by any means! One of the largest challenges of emotes is the smallest necessary size for users to include them alongside chat messages. I frequently have ideas I feel will translate well in a tiny 24x24px space, only for the image to be muddy and indecipherable once downscaling to that final smallest size is finished.

A graphic for use as a channel's about panel, which describes what various tiers and durations of support to the channel provide the user, including emotes and badges.

In addition to emotes, plenty of other site elements are able to be customized on your channel in order for users to have a personalized experience there. I have also created loyalty badges and cheer badges that appear next to users in chat who have supported the channel through the platform’s built-in support methods.

The page also features several sections detailing what the channel is about, our schedule, rules, and so on. In order for the page details to match the branding, all segments are designed into text images, such as details about supporting the channel. For me, this is one of the limitations of the platform – I would like to be able to design this with basic HTML and CSS so that the content is accessible. Without the image version though, you are limited to essentially plaintext and a single header image with no alt text for each section. As much as I dislike the lack of accessibility in an image-based solution, weighing the options this was the best approach to keep the page from being inaccessible due to information overload from a lack of design features as well! I worked to incorporate necessary information like schedule and rules in text based forms elsewhere such as user-accessible chat commands or other built-in widgets on the platform.

I had no experience working with video design prior to working on this channel, which made it an interesting space of blending new and old skills. Many things I had done before were useful, but I had to use those skills in new ways, and think about design for a new medium. I also ended up learning a lot about video production and tools, skills which had not even been on my radar prior. I went from simply being happy I could get the game, a camera, and audio to coexist to having multiple scenes and creating multitrack recordings for potential future use. I even began attempting to learn Premiere in order to make my own video-based design elements, such as a custom stinger transition to move between scenes.

I’m quite proud of how far I’ve come applying my design skills in a different way and continuing to grow and expand my skills as part of working on my video game streaming channel. I look forward to seeing how these skills continue to grow!

Mile of Music Capstone

For my master’s in Human-Computer Interaction capstone project, I chose to explore proposing a redesign of my employer’s mobile app for the “Mile of Music” music festival. Mile of Music occurred every summer in the local area, and featured downtown venues hosting indie bands and artists for a weekend of live shows.

I began the project by considering my personas. Who was using this application, and what goals might they have? I ended up with 4 personas capturing: a music fan, an area business networker, a friend within a group, and a traveler visiting the local area.

After developing the user personas, I also wanted to ensure I considered the stakeholder personas and their goals. While the app should of course benefit visitors to the event, stakeholders had desires in building the application, especially given it was a pro-bono project. The stakeholder personas I envisioned were a performing band, a downtown bar owner, a developer at my employer, and an event organizer for the festival.

With several users and stakeholders in mind, I began working to understand the application through various interviews. I spoke to an event organizer, developers at my employer, and spoke to developers who were also avid festival goers about their experience as users of the application and attendees of the event. I also looked to my husband for advice as an avid music fan who had yet to attend the festival – a fresh perspective from someone who was not pre-disposed to any existing format.

Based on these interviews, I considered existing path flows for the application, and how these may be revised for accessibility and interest. I also worked to consider how new and valuable features for both users and stakeholders could be incorporated into this redesign. This resulted in a low-fi prototype of a proposed re-design.

The proposed redesign not only had modified paths, but incorporated the following features based in persona and interview research:

  • A search filter that provided various features from days of the event and subgenre to help users find relevant information faster.
  • Artist favoriting, in order to manage not just shows attended, but artists enjoyed.
  • Similarity search, in order to find artists “like this”
  • A “heat map” of hot spots and artists, to be able to locate the action based on the app’s GPS
  • Social media sharing features
  • Ecommerce links embedded in artist pages if they have a merchandise shop
  • Phone notifications for festival updates and show start times. This would include not just a notification but a “card” like feature to show maps and distance to shows.
  • Tentative scheduling for favorite artists to see festival schedule layout for artist combinations.
  • A “near me” GPS feature
  • Increased backlinking and paths for user flow
  • Better labelled and clarified interactions and behaviors.

In order to actually assess the utility of this redesign, I conducted user tests comparing the new low-fi prototype to the existing application flow, also set up as a low-fi prototype. I wanted to ensure that the control and intervention were not muddied by aesthetic factors, so both were brought to the same fidelity so that features and flow were the focus of the testing.

Based on the user testing activities, the proposed redesign was favored unanimously over the existing design. User testing was conducted with 11 users, and involved a think aloud protocol, pre and post interview/discussion, and various tasks one might expect to complete during the festival.

More statistics and information about the testing can be found in my Mile of Music Capstone Presentation Slide Deck (PDF)

In order to better drive the value of these features, after completing the redesign and testing, I worked to develop realistic user journeys with various features of the application for distinct personas as well. This helped with selling not only that real users enjoyed and could navigate the new design, but that in context, it appeared valuable to real needs and scenarios.

I was very proud of my work on this project, and my capstone presentation was well received by the masters committee. This project was one of my first chances to really “carve” a UX process pathway from start to finish and create my own testing protocols. I’m so happy with what I learned in doing this project, and pleased with the results!

Swear Studios Branding

The design of this website – and my branding in general – is one of my most consistent projects to keep coming back to. I often find myself using my website and its branding to reflect my design inspiration and development.

My logo icon concept has always been a crowned heart with wings and a bead trail – I sketched them constantly growing up, and always identified with the icon as a symbol of hope and expressiveness. I was drawn to the idea of representing this concept in a more tattoo style for two reasons: it felt more grounded and balanced its cuteness with some edge; and also that it made it easier to imagine one-color designs that weren’t simply a logo outline.

The “Swear” Studios name came about through several layers of thought, but stuck because of the way the letters were able to be transformed to situate the logo icon within them. The first time I realized the ‘W’ could curl toward the ‘S’ and both could form the heart, there was no other possible name. I still have the original notebook sketch clipping from the first time I created the text logo. That clipping was used to create the outline for the original logo design.

The logo has gone through a bit of modification, but overall, it has kept its theme. I felt that the original iteration of the logo was a bit too “thick” and stamplike – this was a holdover of me trying to copy lines from my sketching, but missing their tonal range in as I created a one-color version. There is some charm in the thick letters, but they’re significantly harder to read as they smudge together – not what I wanted. The slight perspective in the heart also looked better in a sketched version, but comes across as uneven and lopsided in a one-color version, and the beads don’t feel dynamic relative to the apparent motion from the perspective.

The current iteration flattens and centers the heart as well as adding crisper edges to remove the thick stampy feeling. The lettering also receives this treatment, making it easier to distinguish each character. I think it’s particularly noticeable on the ‘W’ how the more even heart makes the lettering feel more consistent overall.

Image comparing the original Swear studios text logo and heart logo on the right to the more crisp revamped versions on the left.

Currently, Swear Studios is run through WordPress CMS, but things weren’t always that way. For many years I managed each page of my website individually, even blogging through use of a template HTML file and structured uploads and updates straight through an FTP. The process was not optimized in the slightest – I found using includes to incorporate a single navigation bar and footer bar across all pages to be a luxury!

My “wild west” days of Swear Studio were certainly fun – I felt like I was playing in the dirt and building something ground up, but those days were also difficult for layered reasons. I was a web designer after all, I knew there were more efficient ways I should be doing things. I felt as though using a different system was “admitting defeat”, but I didn’t have time to invest in revamping and optimizing the way I was doing things, as my updates were often already sporadic around other work. Uploading content or making design changes often stagnated, as everything felt so caged in by my prior choices.

I ultimately made the decision to convert Swear Studios to a CMS, but I wasn’t sure I would use WordPress at first. Hipster as it seems it felt too “mainstream”, and I felt as though being a professional, I should opt for something different. My prior web work also hadn’t used WordPress, which brought in a splash of fear at learning curve. I weighed pros and cons and looked over many options – and ultimately, WordPress won out. The features were there, support was there for me to learn on my own, and if I needed to help others with their websites, knowing a more common tool seemed like the right move to make.

A mockup of this site created in Photoshop, featuring cut crystals and the logo nested on top of a pink navigation banner, a dark blue hero image with text and CTA to the left and a magical image to the right, and space for content below. The content area sits on a backdrop with hearts and stars that resembles a tufted piece of fabric.
A screenshot of the actual site during initial development in WordPress, featuring cut crystals and space for the logo nested on top of a pink navigation banner, a dark blue hero image with text and CTA to the left and a magical image to the right, and space for content below. The content area sits on a backdrop with hearts and stars that resembles a tufted piece of fabric.

What most surprised me in jumping back into the fray with WordPress was how quickly and closely I was able to realize my site design vision. I had developed the first design as a mockup in Photoshop for a “light” look, and was convinced I would struggle to implement that vision. In my web design work I felt like I could never get my CSS to do justice to my Photoshop visions – technically the components were present, but it always felt like something was lacking in their heart and realization when they were implemented.

The screenshot here was taken to prove to myself side by side that no, I wasn’t dreaming – I the design didn’t feel weakened in implementation! Obviously a few font fixes needed to be done, and the art changed up to my Swear Web Art, but the design still felt like it had “spirit” to it. Having gone back for my PhD at this point and thus, not doing much professional web design work, I was astounded and pleased with myself. My skills weren’t overly rusty, and my design felt cohesive and still lively! I’m sure the inspiration the light theme mockup gave me and the passion to realize it didn’t hurt either.

The light swear studios theme is a motif surrounding the “magical girl” concept. I have always had magic and fantasy themes in mind for the vibe of Swear Studios – one reason the heading font used across the site and for the word “Studios” is reminiscent of old fable book lettering. To fit with this motif, it also features a warm grey “tufted” background, incorporating magical symbols while evoking a playful yet plush, luxurious tufting style that one may find on the fabrics in a fantasy castle. The crystals add to the magical theme while also creating visual interest.

I was so excited by this theme design that I created a slide deck theme using the motif and assets. This theme has been used in spaces where I wanted to add personal flair to my slide deck. I also created a large mousepad for my home office featuring the studio web artwork and design assets.

Digital image of a mousepad's design that is Swear Studios themed. It has several crystal clusters along the bottom, and a digital drawing of a magical girl sitting in a stained glass window in the center. The backdrop is the Swear tufted design, and various images of the magical girl are in highlight boxes along the left and right sides. The Swear studios logo is visible in the upper right.

Before I found excitement for the light “magical girl” concept, the studio’s theme had always been envisioned as more “dark/gothic fantasy”. Elements were intended to feel edgier, with some mystery to them. When I worked in web design, one of my practice spaces for thinking about modular component design was considering how Swear Studios elements might be represented with a dark fantasy-meets-modern theme. While I never built these components out as I settled on the light direction before that point, I was always very proud of this styled element “sticker sheet”, where I explored how widgets and elements could be approached.

Taking on this approach to thinking through site design really opened my eyes to possibilities in my design. I don’t think I would have landed on the light design I was happy with if I hadn’t done this exploration. I still love components in this sticker sheet, but the branding moved to match my current theme and style more appropriately.

The sticker sheet is also an example of how I often approached projects in my web design professional work. I would consider the design elements that were likely to commonly appear on the site, and place them together on a “sticker sheet” to check cohesion, how color swaps or font swaps affected elements, and so on. I would then use sticker elements alongside concepts for the overall site theme to generate examples of page layouts, like the below concept for a blog post.

Image showcasing a website page mockup featuring content elements from the themed sticker sheet. All of these feature deep charcoal for main body content, white text, and pink headers and call outs. The page showcases a blog post with a header hero and breadcrumb above it.

While this particular iteration of “dark fantasy” design theme ultimately was never seen on site, it was an integral part of the site’s branding journey. Themes that led to this iteration did appear on physical contact cards I used at the time. These cards show my initial beginnings of experimenting with both “light and dark” concepts for branding design.

Designed image of a business card which is a deep charcoal shade and has crystals faded along the bottom. A pink ribbon with a Swear heart themed baroque style pattern extends from the right, with Briana's name in it. Her university and position are below, and below this are fields for email and website. To the left, her initial logo is visible.
Designed image of a business card which is a very light white grey shade and has crystals faded along the bottom. A pink ribbon with a Swear heart themed baroque style pattern extends from the right, with Briana's name in it. Her university and position are below, and below this are fields for email and website. To the left, her initial logo is visible.

These business cards also feature my personal monogram logo, which mirrors the site motif. My initials “BCB” are seen cut into the logo, which is created using two B’s mirrored to form a butterfly-wing styled heart. The line for both B’s extends between to form a staff, which the “C” appears on as a small moon. The beaded chain flows from the staff, and the wings and crown extend from the heart as they do in the Swear logo.

Image showcasing several theme elements that could be utilized in a website design. All of these feature deep charcoal for main body content, white text, and pink headers and call outs. The entire image is a "sticker sheet" of various content elements with this theme one might use to build a site.

In talking about the site’s journey, I think it’s also valuable to reflect on how far it has come, even when I think of how far there is yet to go, and how much more my skills can still improve. I managed to find a screenshot of the site when I first gained the domain and uploaded a first iteration in undergraduate. I had never designed a “full” website before – the closest I had done was single page concepts like Neopets user lookups, or iframe’d content sitting in a single “layout image”.

The first ever iteration of the Swear Studios site shows the beginnings of its general theme motif, but also shows how much has changed. I was scared to use a bright pink accent when I first designed the site, even though I loved pink. The logo had not yet transformed to a one color variant, it was just a digital version of my sketch, with the logo components called out using awkward color shift through the letters.

I felt powerless in my design skills – CSS was something I was only beginning to grasp and feel I could wield to place elements as I wanted, and fluid layouts (pre-grid system thinking!) were entirely a new way of thinking. It’s easy to see how I relied on simple color blocks and as little layout variation as possible. It’s basically….just a flat page. I didn’t yet know how to use CSS to articulate my vision and to use assets effectively, so the traces of “dark fantasy” only come through in the storybook font, the pinstriped baroque header backdrop, and the filigree plate behind the logo. It feels like an arts and crafts project more than dark fantasy.

Screenshot of the first version of the Swear Studios website. The site features a much more "crafty" aesthetic with a raspberry burgundy accent versus true pink. The logo is outlined and contained within an embellished tag-style box, and the top of the site has a grey and black striped baroque filigree pattern with the text "Build Your Dreams or Someone Else Will Hire You to Build Theirs" above it.

Swear Studios has long been my “creative baby”, and of course, this has made it difficult to innovate and reflect on it at times. There’s fear of not realizing the vision in your head, and not acting on designing because of it. Sometimes you feel stuck, and because it’s so personal, it’s hard to see past the walls and just do something.

I know there is still plenty of work to do, and plenty I have to learn in terms of branding and design. I feel a bit shy even sharing aspects of this project, because it always feels like there is more to do, and looking back at “the past” it feels painful to realize how unbaked my skills were. But as I look at this site’s journey and my use of tools and design skills I’ve learned, I’m also proud of the progress I’ve made. Even if being my “creative baby” has made the journey difficult, that passion has helped me persist. I’m excited to see where my design and skills journey continues to take me.

Personal Insignia of the initials "BCB" that portrays artistic B's mirrored across to resemble butterfly wings, forming a heart at the top that connects to the stem in the shape of a magical staff. A crown sits atop the right hand B, and both have wings from the top loop with a pearl chain trailing off the bottom. The graphic is colored in all black.