November 2022 – December 2022

Augmented Angler

We were challenged to use the principles of user-centered design to create a high-fidelity design for the Meta Quest 2 in Figma.

The Idea

I decided that I wanted to create an experience that mixed virtual reality and augmented reality seamlessly, beginning the brainstorming process. After a good amount of deliberation, the concept that was landed on was to create a mixed reality fishing experience that would let users fish wherever and whenever they like. Users would be able to create a fishing spot in real space using a VR headset and controller. After creating the spot, users would be able to select between different fishing poles and types of bait. They would then toss their line and bait into the water by pressing the button and swinging the controller. With their bait now in the water, the users must now wait for a fish to bite and, when one does, they need to rotate the other controller in order to reel it in. If they are successful, the fish will be caught and added to their fish index if it is a new catch. In the index, users will be able to see all of the fish they have previously caught and view facts about them like their average lifespan and whether they live in freshwater or saltwater.

The Audience

This mixed reality experience is designed for a few different groups of people. Firstly, it is for people who already enjoy fishing and wish for another way to partake in the passtime. They will find it to be a good way of practicing their patience and reaction time without physically needing to go out and fish. It will also be appealing to newcomers who are interested in going fishing, but simply lack the time or money to do so. They will find it to be a good way of learning the ropes and will hopefully get them interested in going out and fishing for real when they are able. The experience is being designed in a way that will make the experience enjoyable and relaxing for both pros and newcomers alike. It may also appeal to those who wish to learn more about fish in a fun way through the use of the fish index.

The Process

The Research

The process of creating this experience began with doing research on any similar applications to it. After a good amount of searching, it became clear that there were not any other experiences that came close to matching the one that was being planned, as most were very basic fishing applications made for the phone rather than headsets.

The User Interviews

The next course of action was to interview potential users of the application to gauge interest in the experience and its features. For the most part, the interviewees all had good experiences with AR and VR which shows that they would likely be comfortable with the mixed reality nature of this experience. All of them had gone fishing before and, with one exception, all of them expressed interest in going again, showing that they would likely be interested in this experience. This was confirmed, as when asked if they would be interested in the concept of the experience, the majority of them had said they were interested in it due to its convenience and novelty. The users expressed interest in additional features like haptic feedback when fishing, location based fishing, and the fish index.

The First Iteration

With the research and user interviews out of the way, it was time to create the first iteration of the Augmented Angler experience. Since the experience takes place in real space, the interface design for the application had to reflect that. All of the windows within the app are partially transparent so that you can see what is behind them and not have to worry about running into anything. The buttons were designed with the controller in mind, with them being very large to make them easy to click with pointer controls. The entire flow of the app had been completed for the first iteration, though it had to be greatly simplified to fit within Figma’s prototyping limitations. Still, the general concept remained the same.

The User Tests

Despite the limitations, the users who tested the experience found it to be enjoyable and found the visuals to be appealing. The users particularly enjoyed the part where they got to reel in the fish. Even still, the users still had feedback on how the experience could be improved. The first iteration lacked a means of accessing the index page outside of the ending screen after catching a fish, making the navigation of the index needlessly annoying. The color palette was also mentioned as being boring, with the black windows and white buttons not standing out much. Lastly, several users struggled to recognize when the fish bit onto their line, so they wished for more indication for when that occurred.

The Final Iteration

The criticisms of the first iteration were taken when moving onto the second and final iteration of the experience. The first change that was made was adding a button in the bottom left that takes users to the index page. This button was added to nearly every page of the experience to make it much easier to access the index than before. Colors were added to each of the buttons to make them more visually appealing, with green being used for all positive buttons and red being used for all negative buttons. To fix the issue with it being easy to miss when a fish is on the line, exclamation points were added above the fish to give an extra visual indication in addition to the text at the top changing. Lastly, animations were added to the prototype in order to add some additional visual flair to the experience.

The Results

In the end, the final iteration of the Augmented Angler application turned out quite well. It allows for users to get a taste of the experience that it could eventually become. User’s get to create a fishing spot in a real space, they get to cast their rod out into the water, they get to reel in a fish, and they get to learn more about the fish that they catch. The visuals are all designed to work well within the context of mixed reality, with the partially transparent panels and the big buttons suiting the platform well. While the prototype doesn’t give the full experience of fishing in your home, it serves as a good basis for further expansion by developers who can make the vision a reality. In that sense, this project was a great success as the goal was to create a high-fidelity design for a VR headset and this final iteration is just that. With proper development, this prototype could go on to be something even greater than originally envisioned, and that would not have been possible without this high-fidelity design and prototype.

View Prototype

August 2022 – October 2022

Game CollectionARy

We were challenged to use the principles of user-centered design to create a high-fidelity design for an augmented reality display in Figma. This design is made for the phone.

The Idea

I decided that I wanted to create an experience that incorporated one of my biggest hobbies: video games. It is from this mindset that led to the idea of an app that would allow users to bring their physical game collection into the digital world through the use of AR technology. Users would be able to scan the case of any of their video games, and the app would be able to recognize the game and add it to their virtual collection. If the user does not have the case, they would have the option to scan the cartridge or the disc. Once added to their collection, users would be able to sort their games by a variety of criteria such as by console, by original release date, alphabetical order, etc. Each game would have a short information screen that contains information about the game’s release date, developer/publisher, genre, and a brief description. Once they assemble their collections, users would be able to show their collections to others.

The Audience

This application was made for anyone who owns physical video games who desire a way to organize their collection in a virtual space. These people could be hardcore gamers who own hundreds upon hundreds of games for a variety of different consoles, more casual gamers who only own a select few games for one console, and everyone in between. It also appeals to people who wish to share their collections with their friends or show it off to the world. Since people of all ages play video games, the age range for the app is quite wide.

The Process

The Persona

The process of creating this experience began with creating a persona and journey map of the users to help gain an understanding of their needs. I created a persona that was meant to represent the average user of the application: someone with a moderate amount of experience with AR who wished to experience the satisfaction when creating their virtual game collection. The journey map reflected this user’s feelings, describing the potential pain points that could be encountered in the process of adding a new game to their collection and viewing specific games. The scanning process had the potential to be janky or slow, so I had to make this process as simple and quick as possible. The process of finding a game had the potential to be difficult when the collection grows too large, which led to the idea of having a sorting system to ease the process. Creating these gave me insight on how to make the process as painless as possible to give the user the satisfying results they seek.

The User Interviews

The next course of action was to interview potential users of the application to gauge interest in the experience and its features. The users that were interviewed were all fans of video games, which helped ensure that their responses would be invaluable to the app’s development. I asked questions about what genres and consoles the users were most accustomed with as a means of gaining insight into what genres and consoles would be most important to add to the sorting options. All of the users stated that they would be interested in the app if it were to become a reality, showing that the idea was something that would likely be of interest to the target audience. They also confirmed that they would be interested in additional features like the sorting option and being able to share your collection with other people. This all went to confirm that this project could be a hit if it were properly fleshed out.

The Mockups

With the preparations completed, it was time to create the screen designs for Game CollectionARy. The color scheme for the app was kept minimalistic so that it would not be distracting to users, consisting of only a greenish-blue, an off-white, and an off-black. The scanning screen was designed to resemble the iPhone camera app, with the button resembling the camera button and the other scanning options being adjacent to the scan case option. When a scannable object is on screen, a border appears around it to indicate to the user that it is able to be scanned. This changes to a green highlight when the user begins to scan the object. On the collection screen, each game has its console, genre, and release year below its title which correlates to the different sorting options. The description screen includes additional information such as the publisher, series, and some screenshots. User testing was conducted on the initial iteration, but it went so well that very little had to be changed for the final iteration aside from some wording and color changes.

The Results

In the end, the final iteration of the Game CollectionARy application turned out quite well. It gives the users the ability to get a feel for what the full experience of the app would be like. It allows for users to go through the process of scanning a case, disc, and cartridge. It also lets users view a collection of games and make use of the sorting and search feature to make traversing it much easier. All of this is wrapped up in a simple interface with a clean color-scheme that makes the app user friendly and visually appealing at the same time. While the prototype doesn’t allow for users to scan in their own video game collections, it serves as a good basis for further expansion by developers who can make the vision a reality. In that sense, this project was a great success as the goal was to create a high-fidelity design for an AR display and this final iteration is just that. With proper development, this prototype could go on to be a great success among the gaming community, and that would not have been possible without this high-fidelity design and prototype.

View Prototype

January 2023 – May 2023

Hooked on Fishing

A team consisting of myself and five others created a brand new website design and layout for Hooked on Fishing that better explains the benefits of the services they offer and the importance of community involvement.

The Client

The client that we worked with was Hooked on Fishing, a local, non-profit fishing park that provides fishing opportunities for the Peoria community. Since 2008, the park has been a great place for children, senior citizens, veterans, and special needs groups to experience the joys of fishing. They supply all of the fishing rods and bait so that anyone can give fishing a try. They also have staff members and volunteers on hand to offer assistance to any participants in need.

The Challenge

The main problem that the client was looking to be solved was the lack of user engagement with the current website. While booking was typically done through the site, other engagements had been low. Donations, volunteer applications, and sponsorship deals had typically been conducted through personal interactions and searches by the staff. This process, while more personal, had put a large strain on the small staff of Hooked on Fishing. The new website would need to be designed in a way that could circumvent this problem. We decided that these actions would need to be emphasized and simplified so that, in theory, more users would engage in them through their website. That posed a new challenge to us as a team: how do we appeal to each of the target users in a cohesive manner? Potential donors, volunteers, and sponsors each have different actions we wish for them to take, so we needed to find a way to appeal to them all.

The Solution

The Content

We started with working on creating new content for the website that would do a better job of hooking the target users than the current site. The homepage, under the Story Brand model, had its content updated to hone in on getting new donors, volunteers, and sponsors. The content is now focused on the importance that these things have to the client, in order to show that their actions do have effects. It specifically mentions how the target users can make a difference, each having their own dedicated sections. The new content also puts more emphasis on the people that Hooked on Fishing helps and how they help them. If one donates, volunteers, or sponsors, they, in turn, will also be helping these people out and getting the satisfaction that comes with it. The homepage now has many call to action buttons so any users who are influenced to act by the content can easily do so.

The Visuals

The next changes we made to the website were improving the visuals of the website to hopefully attract more users. We decided to keep the off-white and black of their current website in place while adding two new colors. These colors ended up being a dark blue as a secondary color and an orange as a tertiary color. These colors combine with the old colors to make the website pop much more than it did before. We chose simplistic fonts for the headers and body text so everything would be easily readable. The new colors and fonts came together in a new look for the website that is both stylish and functional.

The Structure

We then determined how we would restructure the website in a way that boosts user engagement. We discussed what the most important information for the users would be in order to determine what the main pages for the website should be. The main pages ended up being Home, Booking, Get Involved, Events, Community, Contact Us, and Donate. We decided upon this structure so that all of the target users are only a few clicks away from completing their goals. In particular, the get involved page gives access to the donation, volunteer, and sponsorship forms, making taking these actions much easier. The forms themselves have also been streamlined and standardized. The homepage received the greatest change in its layout, as we based it mostly off of the model in Donald Miller’s “Building a Story Brand”. This model made the homepage tell a story that will hopefully compel the users to take action.

The Results

All of the work that we put into this project culminated in a complete revitalization of the Hooked on Fishing website. The newly added colors, fonts, and images have brought a great amount of new life to the website. The restructuring of the website has made the process of taking action far easier than before. The new content is now pointed towards the target users to explain why they are needed, who they can help, and how it helps. The Story Brand model has laid the content out in a way that will be more convincing to the users. These things all lead to a website that is sure to be more attractive to and drive more action from potential donors, volunteers, and sponsors. The client has been consistently impressed with the work that the team has done and believes that our solution will be able to solve their issue. It should allow them to move forward with more people willing to help them out and less strain on their backs.

View Website

August 2023 – Present

Peoria Fresh

Working with a team of designers to create the design system, website layout, and branding for the Peoria Fresh project to make it as simple and inviting as possible. The design and layout will then be implemented by a team of Computer Science students.

The Challenge

Food insecurity is a major issue across America, with many people lacking the money and resources to be able to feed themselves and their families. The food insecurity rate in America as of 2021 is 10.9%, with the rate in Peoria County being slightly higher than that at 11.1%. Around 21,000 people, including 6,500 children, experienced food insecurity in the county in 2019 according to Feeding America. Fruits and vegetables in particular are difficult for disadvantaged families to afford and are greatly important for proper nutrition. There is a lack of communication with gardeners that has led to them growing produce with no knowledge of what families want or need, or what food banks need and don’t need. If this issue could be solved, it would allow for disadvantaged families to get the fruits and vegetables they need for little to no cost.

The Project

Peoria Fresh is a website project that will help connect gardeners, food banks, and families to create a healthier community within the Peoria area. The idea is that families will be able to go into their local food banks to make requests for specific fruits and vegetables at kiosks. These requests and where they were requested will be saved within the Peoria Fresh servers. Gardeners would then be able to view these requests on the Peoria Fresh website and accept ones that they wish to take on. They would then begin planting their request and could update the progress of their growth within the website to keep the food banks up to date. When their requests are ready to be brought in, the gardeners can schedule their deliveries. This system would make it much easier for disadvantaged families in the Peoria area to have access to fresh produce. This project was begun by the Computer Science department, with the User Experience Design students being brought in to help make the prototype more user friendly and visually appealing.

The Process

The Design System

The first order of business for my team was to come up with a design system for the website and branding. A FigJam file was created where each member of the team began to put down ideas for potential color schemes, typography, textures, and logos. After doing that, we would vote on which ones we liked the most, with the most liked ones being used moving forward. The most liked ideas were then synthesized into a mood board that we could use as a reference going forward. The color scheme we decided upon is meant to reflect an orchard with the orange of carrots, the red of tomatoes, and the green of leaves. We also included an off-white and a light cream color for pleasant background colors. We chose the reliable Poppins as our header text and the easily legible Rubik as our body text. We also found many great professional pictures of fruits and vegetables that could be used on the site. One of our team members even created cute characters that we would go on to use in much of our branding. Our logo combines the Peoria Fresh initials with a strawberry to show that it’s about fresh food, but also a heart to show that it’s also about caring for the people of Peoria.

The User Flow

The next order of business was to create the user flow for the gardener website portion of the project. Several people in the group made their own versions of how they imagined the flow to go. The different flows were all examined and synthesized into a singular flow based on what we believed would work best for the user. This process led to the idea of the gardener dashboard screen, a screen that combines many pages from the prototype into one page. It would allow users to toggle what plants they need to grow, what plants are growing, and which are ready for delivery all in one place. We also had the idea to add a food bank directory to the flow so that gardeners could easily locate the banks they wish to bring their produce into. Another idea we added to the flow was the user info screen which would keep track of the amount the gardener has donated and present community success stories to give them a sense of accomplishment.

The Mockups

With the user flow established, it was time to move onto the creation of the mockups for how the screens would be laid out and look. A major focus of the designs was separating different pieces of information using a card system, which can be seen across the screens. On the community suggestions screen, each of the requested fruits and vegetables are on different cards where gardeners can choose how much of each they would like to take on. Each card also has a photo of the produce to make it easier to find the correct one while skimming. The cards on the food pantries screen were designed to give gardeners the most pertinent information about each and they are in alphabetical order to make them simple to find. The gardener dashboard screen took the longest to design as it had to contain a large amount of information in a small space. It was designed in a way that follows the common human viewing habit of looking from left to right, top to bottom. In the top left there is the “To Plant” list where accepted requests appear initially after being taken on and before being grown. After users mark a request as grown, it will be moved to the “Growing” list immediately to the right. Then when the produce is marked as harvested, it will be moved downward to the “Harvested Produce” list. The card system on this screen allows for requests to easily and seamlessly move from one section to another.

The Branding

After submitting the screen designs to the CS students for them to implement, we moved on to create branding material for the project. The project is going to be shown off at Bradley University’s 2024 Fuse Showcase, so we have created a multitude of branding materials using our design system. We’ve designed posters, banners, flyers, and social media posts to promote the showcase as well as the food drive we are hosting at the event. We’ve even designed seed packets with information about what the project is about that we are going to hand out at the showcase. The design for our booth at the showcase is based on fruit vendor carts since Peoria Fresh is all about providing fresh produce for the people of Peoria.

The Results

The results have yet to be seen as the project is still a work in progress, but we will see how the people of Peoria respond to it soon at Fuse. The event is on April 20th, 2024 at the Peoria Riverfront Museum. We hope for the showcase and the food drive to be a resounding success and for the project to be fully implemented soon.

August 2022 – November 2022

CAT UX Design Challenge

Myself and a team of 2 other designers redesigned the internal work order tracking system for Caterpillar Inc. as a part of a competition against other teams of designers. We designed the website to be used on desktop computers. Our design solutions were shown and judged at CAT on World Usability Day.

The Client

The client that we worked with was Caterpillar Inc., the world’s leading manufacturer of construction and mining equipment, off-highway diesel and natural gas engines, industrial gas turbines and diesel-electric locomotives. Each year, they host a design challenge for User Experience Design students at Bradley University to create a design solution for a given issue within their company.

The Challenge

Each team was challenged to redesign CAT’s internal work order tracking system to make it more efficient and user-friendly. This alone came with its own litany of difficulties for us. For one, the system that they currently had in place already seemed to be visually clean, efficient, and easy to use, at least from our perspective. We would have to get particularly creative if we wanted to improve what was in place. Secondly, we were unable to actually have access to the website, having to rely solely on a demonstration video that they sent to us. This demonstration only showed the major actions that users would be taking, so we were unsure what certain elements would do. These two things caused us some difficulty, but we were able to come out of it with an idea.

The Process

The Idea

The process of creating the design solution began with generating ideas for how the current work order tracking system could be improved from its current state. We decided that since their current system was already well made, we would build off of the ideas present within it. In particular, we liked the dashboard with all of the currently accepted work orders in one place in sequential order. This would help to remind the user’s of all of the work orders that they had accepted and keep them in order. We had the idea to create a visual representation of the order progress to give users a more concrete understanding of how far along the work orders are. We also had the idea to create a priority flagging system that would allow users to flag particular work orders as more important. The major point of deviation with our idea was turning each work order tab into a dropdown menu that gave more information and  allowed for additional actions to be taken directly from the dashboard. The particular pieces of information and actions were all available in the current version, but they were scattered across multiple screens. We wanted to localize it all into the main dashboard to make it as easy as possible to find.

The Research

Next the team moved onto researching the users of the work order tracking system in order to get a better understanding of their needs. Through this research, it was discovered that the main users that would need to be focused on were the CAT dealerships and their customers. This led to the creation of two different journey maps for each of these users in order to find particular pain points within the current process of work order tracking. One major takeaway was that the longer the cycle of an asset being fixed takes, the more irritable both the dealership and the customer become. Another takeaway is that communication between the dealership and the customer can also become a point of frustration. These would be kept in mind as the team went forward.

The Wireframes and User Tests

The next course of action was to create the wireframes for our design solution. We were debating on whether to make the additional information and actions come in the form of a dropdown or a sidebar. This led us to create two versions of the wireframes, one with the dropdown and the other with the sidebar. We turned each version into a simplistic prototype that would allow users to get the feel for them. We then conducted an AB user test in order to find out which version of the dashboard would test better and which the users liked more. The results showed that the dropdown version tested better of the two and the users stated that it made more sense to them since it better separated the information. This made it clear that it would be best to use the dropdown menu moving forward.

The High Fidelities

With everything in order, it was time to create the high fidelity mockups and prototype for our design solution. For the color scheme, we had to stick to the CAT design system and use their signature yellow along with various blacks and whites. The work orders in the list were made to only list the most pertinent information in them before expanding with the dropdown as a means of not overwhelming the user.  We were ultimately able to fit many different features into this singular dropdown. We added the ability to view the asset information, customer information, asset history, and contact history in the dropdown. We also allowed the user to add coworkers to a notification list, change the work order description, assign portions to coworkers, communicate internally and with the client, and change the general information all from one page. Each of these functions are separated from one another via the usage of cards for each section. Other options like creating estimates, creating inspection reports, adding media, and printing could not all fit within the dropdown. To remedy this, we added buttons that would create pop-ups that would allow users to take on these actions without leaving the screen.

The Results

With the completion of our high fidelity mockups and prototype, we had successfully contained what used to be many pages worth of information and actions into a single page. Users would no longer have to go searching far and wide for any of the system’s features which would hopefully lead to a lower level of frustration. The condensed nature of it all would allow for the dealerships to more easily make changes to the work order and communicate with the customer, which would help to ease the pain of the work order process. The prototype allows for users to test most of the system’s features to help ease them into the new experience. While our team’s design solution did not end up winning the challenge, it was still a great way to build my skills in design, critical-thinking, and teamwork.

View Prototype