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