Oops! Not quite sure how you ended up here, but not all who wander are lost. Hopefully you can find what you're looking for somewhere else on the site. Or maybe what you were looking for was inside of you all along.
Graphic design work and the intrigue of digital artistry is one of the first areas that propelled me into the world of programming and UX. I’ve worked on plenty of odds and ends for my own enjoyment and growth, as well as for events and groups.
One fun design where I pushed myself to leverage new techniques and approaches was my “Clock Town Mask” display for the 72 Hour Mask Challenge put on by Nintendo.
I had sketched a mask design on a piece of paper, and knew I did not have the time or resources to create it in real life. Instead, I tried to replicate the textures of a primarily wood mask in Photoshop, and to set the design in what looked like a museum display case.
While looking back the design is a bit flat, I’m still quite proud of some of the unique ways I was able to bring my sketch to life in this design.
As a member of the Blue Key Honor Society, one of my duties in undergraduate was to assist with our university’s Winter Carnival. I worked on the publicity committee, allowing me to utilize my graphic design interest.
While the logo is created by community members as part of a yearly contest, I wanted to ensure that I incorporated the feeling and color scheme of the logo in the work I was asked to do.
Two major pieces I created for the 2014 Winter Carnival were the ice arena banner and the event schedule poster. The banner is largely focused on the winner’s logo, but I wanted to ensure to draw focus to it in an interesting way. Given the theme, I opted for “papercut” style VHS tapes drawing the eye to the logo, with film reel running up and down the sides. I used the same snowflake pattern of the winning logo in the backdrop to aid in consistency.
I am especially proud of my work on the calendar of events. I used the same “papercut” style and the five colors used in the logo, and managed to create a visually interesting schedule of events that incorporated various film-associated shapes. The poster was a limited size and needed to incorporate all of these details – I was quite happy with the ways I fit everything in!
I also created many posters and logos for various groups. One of my most utilized designs was for our undergraduate student government. A friend in the group asked me for logo ideas. I utilized the stripes from the end of our “Piano Dog” logo to cut the ‘U’ in a visually interesting way, and then used the husky head to create the curve of the S. It was a simple rough draft, but worked! While I was never told whether the group liked my design, the next year I noticed USG branding themselves with a clean and finalized logo featuring…a cut U and a husky head in the S. I guess they must have liked it!
I also created the logo design for our 2014 BonzAI Brawl, an event where students create and battle AI. The theme was wizards for the year, and I used a 5-color palette to limit t-shirt printing costs. This logo was featured on t-shirts and posters. It was simple, but fun and effective!
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!
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!
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.
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)
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!
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.
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.
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.
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!
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.
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.
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.
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 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.
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.
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.
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!
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.
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.
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!
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
