MR UX Design: Seattle AR/VR Hackathon

First Magic Leap Award at Seattle AR/VR Hackathon

Designing an Interactive Immersive Application for the Magic Leap One

Overview

This project was completed during the Seattle AR/VR Hackathon that I was invited to participate in September of 2018. During this project, I acted as both the Lead UX Designer and 3D Artist for the application. Because this was a Magic Leap-based project, I worked five different developers and a 3D artist to create a seamless MR experience that utilized some of the most advanced features the Magic Leap One Headset (ML1) utilized at the time. Our entire project was created over the course of a couple days and utilized eye tracking and hand gesture technology.

fire2

Execution

As the Lead UX Designer, I wanted to work with the developers to create something we all would enjoy. Not only that, but I wanted to create something that also utilized the advanced technology the ML1 had to offer. We assembled Friday evening, and ideated on many different project types and styles before settling on a game pupetteering system that utilized the hand gesture software appropriately, while also emphasizing the game development background of a lot of our team members. We determined this would be beneficial to everyone in the group, and also something we could reasonably create within the time span of the hackathon.

DargonRender01

Saturday morning rolled around and after a good nights sleep the main developer and I collaborated together to figure out what would make the most logical sense for a puppeteering game. Looking at a lot of the hand gestures, I found that they operated very similarly and decided on action-based properties that one main character could do. We settled on a medieval theme, with our main character being a dragon. This dragon would have three main actions the the user could control according to the hand gesture and eye tracking system native to the ML1.

Screen Shot 2018-09-16 at 4.57.56 PM

 

Seen below are some of the environmental models that I created. Prior to this project, I had done a little bit with environmental modeling but not nearly as much with Unity scripting for onCollision effects. This was a really fun learning experiment for me about learning and playing with Rigidbody effects in Unity. I welcomed the opportunity to create new models for the interaction system.

DnNgeAXU8AAQjPY.jpg-large

 

Final Result

This project was amazingly fun to play with, and we won first place in the Magic Leap project category for our integration of hand gestures and eye tracking. This project really showed me the extent of this hardware and how integral it is to design with hardware in mind.

DnQ8uMZVYAAf3iT.jpg-large

Below you see a video demo of the project and all of the individuals that made this project possible (it was no small feat). I had a wonderful time learning about the ML1 and working with these developers. I hope to do it again soon!

Web UX Design: High Fidelity Prototype

Sandbox Application for Health Insurance Company

Creating a seamless User Experience and User Interface for Data Entry

Overview

During the duration of this project I was tasked with the creation of both low and high fidelity wireframes within Axure RP 8, and implementing a brand-approved style guide. These screens had the intent purpose of allowing new and grandfathered internal users to easily navigate contracts in a sandbox environment without having to memorize a specific workflow.

Screen Shot 2018-07-18 at 1.21.42 PM

The Axure live site can be seen here: Prototype Link

Evaluation

A heuristic evaluation was done on the previous experience, and a new responsive high-fidelity mockup was created, which presented important information on usability and design consistency to ease cognitive load. These documents demonstrated a new ease of use within a very complex and highly concentrated workflow.

Screen Shot 2018-07-18 at 1.28.32 PM

The Heuristic Evaluation can be seen here: Document Link

Validation and Development

Working client-side, daily meetings were set up to engage in product backlog discussion and prioritize UI wireframe work. I formed personas and an information architecture by discussing and understanding requirements based upon input from business and IT stakeholders. This product cycle was highly iterative, and user validation and testing were happening on a daily basis with multiple business stakeholders and potential users. ¬†I also worked directly with the framework team to start development on the “Cost Shares” section of the application. Because this was an Agile-based process with offshore resources, I had to be very particular in outlining the necessary dimensions and spacing on the screens. I implemented a toggle system that allowed the developers to turn on and off content spacing for ease of use in documentation.

Screen Shot 2018-07-18 at 1.21.58 PM

 

*All files have been scrubbed of any client association and data

Web UX Design: Internal KPI and Search System

Employee Portal for Manufacturing Company

Designing a User Experience Architecture mixed with Metric Analyzation

Overview

For this project, I was tasked with being the UX Architect on an important internal dashboard. Our client had an outdated system of inputing and searching for key performance indicators and metrics that were collected at manufacturing sites around the world. Our design team was tasked with the creation of this dashboard system, and I specifically was tasked with drilling down through these graphs in a logical search pattern to find metrics that were valuable to users.

These mockups and PDF were made in Adobe Illustrator, which were eventually made into a clickable prototype in Adobe XD. Because this was internal client work I have stripped all visual stylings and client information, and input mock data/graphs/names where it is necessary. The dashboard can be broken up into six logical areas: Personal Dashboard, Search Patterns, Metric Drill Downs, Threaded Alerts, Report Views, and Module Definition.

Execution

The full PDF of the mockup can be found here. Below are key examples from the mockups that provide a good enough outline to understand the context of the document.

Personal Dashboard

This personal dashboard can be created and accessed by four different persona types: Executive, Reviewer, System Admin, and Data Entry. Through out our discovery process we interviewed multiple people in the company with these positions. Judging by their level within the company, they are privy to certain types of information collection and input. The dashboard seen below is the Executive level dashboard, and this persona has the ability to review all data at a global level.

1 Artboard

Search Pattern

This is an example of the search results page with multiple key words and indicators searched. The results return both bundled dashboards and individual metrics that a person may be able to find, including the type of graphs available in the search which can limit results further.

2 Artboard

Metrics Drill Down

This drill down system was one of the biggest undertakings of the project for myself, and I worked closely with the data science team in order to organize it accordingly. Below you can see an example of the drill down at a site level for percent change within a year.

3 Artboard

This structure was created from the hard work that I and the data science team found in our discovery of the system in current use by the company. We gathered all the potential metrics that were measured at the manufacturing level and how data reviewers could manipulate that data to present a graph system in a certain way. If you click on the images below you can see a rough mockup of our final ‘drill down formula’.

Threaded Alerts

There are certain times problems arise in a global industry that affect manufacturing output and progress. Because of this, it is important to have a solid line of communication within the web application to show how that gets resolved. This threaded alert system can be sent out to multiple users, and can provide a valuable system of contact.

4 Artboard

Report Views

For each global site, there is an individual dashboard page that can be seen from a high-level perspective. This global map can show at a glance where problems can occur and track how the company is doing from a geographical standpoint.

5 Artboard

Module Definition

Lastly, there is module definition within the main page of the dashboard. This allows a user to customize what they see when they enter the platform, and also updates with real-time data entered into the backend system. This provides a valuable decrease in time and effort, especially for those who only enter the system once a month to check in on data.

6 Artboard

Final Result

Postmortem

The project was received well by the client with huge success and is in stages of development. From a design perspective, I think this system is both visually appealing and works appropriately with their analytics demands. This will help the company in future review processes and track their goals of measuring the highs and lows of their product output. However, there were definitely struggles on the design and discovery phase of this project. It was not easy working with the data scientists and data discovery team, and I had to expand my role into understanding corporate manufacturing processes I wasn’t aware of previously. In the future I hope to dive deeper into designing for the major differences between persona roles and their abilities.

The full PDF of the mockup can be found here: Internal KPI and Search System

 

 

 

AR UX Design: Sparkle Kitty

HVRE Studio’s AR Mobile Application

Augmenting Reality with your Pet Needs in Mind

Overview

Sparkle Kitty AR is an ongoing year-long project in which I am the Lead UX Designer. As lead designer, I am in charge of creating the design of user interactions, narrative storyboard, and level plan.

Sparkle Kitty AR (tentative name) can be described as a combination of Neko Atsume and PokemonGo, in which you have the ability to interact with your cat via Augmented Reality and collect items for it around your community. It was started January 7th, 2018 with the goal of finishing January of 2019. It is in the beginning stages of development, with the testable Alpha completed in the beginning of March 2018.

Execution

Ideation and Background:

Document detailing the background of the project including personas, pillars of the game, and a storyboard ideation process in which the design will be built around.

Through this document, the design team worked with the stakeholders and decided that these most important pillars within the game:

1. Engagement with Real World Рusers have to physically appear and go to locations
2. Problem-solving skills Рusers have to use logic and understanding in order to succeed in the game, be able to construct towers according to instructions, treats according to recipes
3. Sense of responsibility – users have to lure and take care of cats or elsethey will run away

This document can be found in its entirety here.

Level Plan:

Document detailing the ways a user can progress through the game. This level construction is a combination of Cat introductions, toy creation, treat creation, tower creation, daily logins, and completing a level objective. Once the user completes all items within the level they will progress to the next level and be introduced to new cats, items, and other incentives in order for them to build a lasting relationship with their cat.

Screen Shot 2018-07-24 at 10.33.08 AM

This document can be found in its entirety here.

Cat Combinations:

Document detailing the requirements for each cat to be lured to the home base. This includes the cats names themselves (and short description), their level, the player level that the user must be in order to attract the cat, any toys they need, any treats they need, and the material that the tower needs to be constructed in (as well as any add-ons that need to be created). This document was essentially the “cat key” for both the Development team and the Art team to use so that they might have a better understanding of gameplay.

Screen Shot 2018-07-24 at 10.35.47 AM

This document can be found in its entirety here.

Narrative Storyboard:

Document detailing the logical universe of the story within the game and how the user ends up with the Sparkle Kitty in their AR household. This role-playing type of document is important from the perspective of the designer but also the end-user. We wanted to think about the app in its entirety as a finished product. What will the user have to do when they log in? What is a logical on boarding process? What is the flow of introductions or navigation? These were all important questions to ask that we needed to answer.

Screen Shot 2018-07-24 at 10.39.50 AM

This document can be found in its entirety here.

Art Asset Design:

Document detailing how each of the assets (treats, toys, and towers) will be collected and constructed within the game.

Through this document, the design team decided that the items would escalate in complexity and fun so as to challenge the user to collect items and create a sense of pride when building their new creations.

 

This document can be found in its entirety here.

Menu Screen Mockups:

These mockups were the first ever visualization of the game. These dictated how a user will be interacting with the AR creation system in the game in relation to a basic menu. The drag and drop system is important for the creation process of toys, treats, and towers. It also integrates well with the cat interaction system itself where the user is rewarded for paying attention to the cat.

This slideshow requires JavaScript.

 

Map Mockups:

These map mockups dictate how the user will be interacting with the map collection process in the game. This interaction system is integral to the user collection of items that allow them to progress further within the game. I focused specifically on the micro interaction of bringing the stars to the center of the location spike, which allows the user to achieve a small sense of accomplishment after getting to that area.

This slideshow requires JavaScript.

Creation System Mockups:

These map mockups dictate how the user will be interacting with the map collection process in the game. This interaction system is integral to the user creation of items that allow them to progress further within the game. I focused specifically on the micro interaction of how the user actually operates within each specific area, and what interactions are appropriate for this area.

This slideshow requires JavaScript.

Development Stages:

Currently the majority of the application is in the development stages of work, and I have only made slight tweaks here and there to the design for ease of development team and art team. Video example –

 

Games UX Design: Train Jam Finding Planet Earth

Indie Train Jam On the Way to GDC 2018

Training and Designing for a better Odyssey

Overview

Indie Train Jam is a¬†52 hour (2 and a half day) excursion on a train that departs from Chicago and ends in San Francisco. During this time, you have the ability create a small game before reaching the Game Developer‚Äôs Conference in San Francisco, California where it can be demo’d.

Challenging myself, I decided to hop onto a team that was working in a 2D medium as I wanted to stretch my legs as a game designer and artist. I paired up with four other people: two developers, a composer, and another artist/designer. Our assignment was to create under the theme ‘odyssey’ and the pitch for the game came from the other artist on our team. He had the idea of creating a space voyager where you play as an alien exploring space in an attempt to find earth.¬†I was tasked completing all of the 2D assets for the game, as well as helping out with the structure of the game design.

Execution

Planetary Art

Being a 3D Modeler, I realized quickly it was very difficult thinking about how these objects should be shaped to represent a 3D shape while also existing as simplistic and colorful structures. I started out with an iconosphere in blender and warped it to the general shape I wanted. I took screenshots of it from different locations, and then took the general shape and the details I wanted from it to create these small structures.

Artboard 1@2x

 

I then created a color scheme for the game, and added color to each of the planets in a way that made the most sense from a geographical perspective.

Artboard 5@2x

Icon Art

After talking to the team leader and other programmers, I gathered that we would need about 5 different icons represented in the game. The first three were to represent in-game interactions: military action, cultural knowledge, and fuel consumption. The fourth icon would represent the ship that the user would control. The final icon was to be Earth, represented in the style of the game – this being the final reward for the player.

1

Lanscape Art

The landscape art was integral to the game to provide a sense of realism to the planets. I decided to create this art on the final day, and it would be used when the player visited each planet and chose an interaction. Fortunately, I was able to finish three before the final arrival in Emeryville, California so it could be placed into the game.

2

The project leader and I both met up a couple different times to talk about the game design itself. Because it was his vision I decided to take a secondary position within the design (and also I tend to take a leadership role in most projects, which lends itself to a lot of less fun) – we decided to make it a simple planetary explorer.

Game Structure

Screen Shot 2018-03-18 at 11.12.12 PM

Screen Shot 2018-03-18 at 11.12.27 PM

 

Final Result

Postmortem

I think the game was developed and executed very well. From a programming standpoint it works perfectly. I also was very impressed by the composer’s work with the sound design. If we had more time however, I would have liked to work further on the art and design to bring it to what I would consider a satisfactory level. I would do three things:

  1. Finish the Landscapes and the Artifacts. Because of the time constraints, one of the programmers had to quickly import some artifacts as placeholders – and those placeholders made it into the final version. They don’t fit in well with the art of the game and stick out quite heavily. I also only got to create 3 landscapes for the first couple planets, and the other 4 planets had the same landscapes mapped onto them.
  2. Adjust the design of the artifacts and the story of the game to make more logical sense. Although I think finding an orange and Chicago hotdog in space are quite funny, it doesn’t make make too much sense with the sci-fi narrative that we have.
  3. User test the game itself with other people. We only had a couple people playtest the   game during construction, and even after it was finished there are still a couple parts of the story that you can skip in an illogical fashion.

 

You can play a demo of our game here: https://kidtsunami.itch.io/finding-planet-earth

Screen Shot 2018-03-16 at 8.22.58 PM

Web UX Design: Bloomington Tutors

UX Architecture Reconstruction of Web and Mobile

How to Keep a Customer though UX Design and Development

Overview

For this project I assisted in the redesign and development of a new blog template using different open-sourced softwares such as Grav and Twig. I enhanced the usability and user experience design for their entire website, including trust markers for web checkout, affordances and constraints for navigating the website, and forming a logical information architecture. My daily responsibilities included the daily creation of different CSS and Javascript transitions, a keen sense for modern design and user experience, and understanding usability and problem solving techniques. My redesign of Bloomington Tutor’s blog was important, as their blog brought in a lot of potential customers to their tutoring service.

Execution

Before jumping into editing Bloomington Tutor’s blog, I first had to assess what key components they had and what they needed to utilize better. I came across many UX flaws that had a significant detriment on keeping users on their website. Firstly, their design was not responsive from desktop to mobile in a logical way. Their pagination was also dull and unhelpful, and the article results themselves had the problem of having few keywords related to an obvious course or subject. Another major problem was that their sidebar was too long to sift through in order to find important information. All of these errors prevented traffic getting to and staying on their blog.¬†

ext-3

Once I surveyed the website and analyzed potential users of the program through their backend analytics, I began a high fidelity mockup in Adobe Illustrator of what the website could look like. I included a link in the header on each page that would lead the user to the main blog landing page. I also implemented a search bar at the top of the screen that would be available in both cellular and mobile, with dropdown menu included. This search bar would be very important in finding information, so I decided to implement selections that would be visible at the top of the page. Within the page itself, each article type (there were multiple classes) would have a distinct icon and label that would be placed at the beginning of each article preview. Finally, I moved pagination to the bottom of the screen to form a more logical flow of information.

ext-2

Once my design was approved, I worked with the owners of the website to create as close as possible to their desired outcome using their open source software (Grav). As you can see, the icon and title info appear automatically at each post’s publishing. The design is also consistent throughout platforms, and articles fade in on soft scroll. Most importantly, the search system is organized for easy comprehension.

ext

Final Result

I learned a lot from this project, and I especially realized how iterative the process of both design and development are in web environments. Because of this I am better prepared for a future project that may need proper UX architecture and design implementation.

Screen Shot 2018-04-18 at 1.21.17 PM

 

VR UX Design: MIT Virtual Reality Symphony Orchestra

Reality, Virtually Hackathon at MIT Media Lab

Creating an Educational Experience through the Power of VR

Overview

This project was completed during the Reality, Virtually Hackathon that I was invited to participate in at the MIT Media Lab in October of 2017. During this project, I acted as both the Lead UX Designer and Lead 3D Modeler for the application. I (middle) worked directly with the sound designer (seen far left) and developer (far right) to create a seamless VR experience that taught the user about the role of conducting an orchestra. We did this through the interaction of the Leapmotion headset.

IMG_5815

Execution

I mapped out the environment (seen below) as well as all of the models within that environment. We determined that there would be a significant amount of instruments to interact with in order to retain the realness of a symphony hall.

_MG_5847

Seen below are some of the models that I created. Prior to this project, I had no idea how complex and intricate instruments were (having never played one myself) and I welcomed the opportunity to create new models for the interaction system.

Screen Shot 2017-10-08 at 5.35.20 PM

I also had the pleasure of designing the environment that the instruments existed in, which was difficult as the instruments had to be visible and understandable from a new user perspective.

screen_shot_2017-10-08_at_2.48.31_pm_720

Once we had the environment and the conducting motions mapped out, we started to place our objects into our environments.

20171008_153803_0__720

Our developer was able to play-test each instrument interaction in it’s entirety, as well as have it paired with an instrumental accompaniment – created by our sound designer.

_MG_5810

 

Final Result

This project was an incredible success, and we place in the top 10 teams at the hackathon for both originality in VR and VR Education. I am so proud of my team and the work that we had completed during this short time. It was truly an amazing experience.

Below you can learn more about my ideation and our process as a whole through out this hackathon.

 

 

VR UX Design: MNPUL8R

Senior Year Capstone Project

Diving into Virtual Reality and Leapmotion Orion Hardware

Overview

Capstone is the name of Indiana University’s Senior project program. Within a group of 4-5 people you are to design, develop, prototype, and showcase your final project over the course of two semesters. I created a group with fellow seniors at IU, because of my previous experience with Maya and background with Unity software I was the main 3D modeler and UX Designer for the project

For the beginning stages of our project we decided to do background research, and chose two different games that gave us aesthetic and gameplay inspiration.¬†Panoramical has an amazing art and music schema, and we’ve decided to implement music into our environment gameplay because of it.¬†Proteus promotes different actions a user could take in order to trigger different forms of music and environmental change. Both games heavily influenced the look and feel of our project in different ways.

A picture example of Proteus in it's light springtime form with colorful trees and flowers.
An example of Proteus in it’s light springtime form.

Execution

For my UX contributions, I conducted two different user tests and created the User Flow within the level plan. I worked with our 2D Artist to make sure the aesthetic and drawings that she created was appropriate for what I had intended the gameplay to be. I then took these designs and tested them on potential users to see how the gameplay was going to be received by people of all skill level. A large part of my documentation can be found at the bottom, the most important being the High Fidelity Mockup before we started prototyping in VR.

User first testing out our environment with controllers before we implemented the LeapMotion.
User first testing out our environment with controllers before we implemented the LeapMotion.

In addition to the UX Design, I also created all of the 3D models off of the 2D Artist’s drawings, and through the implementation of my models and design I contributed to the overall programming within the Unreal Environment to make sure our project looked and felt the way we had intended it to be.

Tree model created in Blender
Tree model created in Blender

I worked closely with the Head Software Programmer and the Hardware Integration Specialist to implement the design and user experience considerations for our project, which included hand-grabbing and touch interactions. I created most of my 2D iterations using Adobe Illustrator, my 3D Iterations with Blender and Maya, and the Environment Iterations within Unreal.

User test with the LeapMotion implementation
User test with the LeapMotion implementation

Level 1 Transformation

 

Final Result

Postmortem

All in all the project was a huge success. As my first VR game, I am immensely proud of the work we did as a team. We finished three different levels of the game, the second and third both being as fun to design as the first. I personally realized early on how difficult it is to work in a new type of hardware system. Designing for Leapmotion hand interaction systems provided a completely different interaction system for the user, which in turn allowed me to prototype different forms of gameplay. Different iterations of the gameplay allowed us to grow and learn the extent of the technology that we were using, and from our failures we gained new knowledge.

This is a screenshot of the Level 2 environment which is partially outdoors with a user entering a cave system
This is a screenshot of the Level 2 environment which is partially outdoors with a user entering a cave system

Overall, the project was a complete success. My absolute favorite part was getting to showcase our work once it was finished. I had the joy of putting our booth together to have users and people on our university campus come demo the work that we had done.

Two different users utilizing the LeapMotion to play the final version of our game, MNPUL8R
Two different users utilizing the LeapMotion to play the final version of our game, MNPU

Links to Documentation

Low Fidelity Mockup

Level Plan, Models, Color Scheme, Gameplay

High Fidelity Mockup

User Test 1 (Low Fidelity Mockup)

User Test 2 (High Fidelity Mockup)

Games UX Design: Redesigning Peacemaker (Part Two)

Undergraduate Interaction Design Practice at IU

Making a Better User Experience for Game Interactions

Overview

The first part of this project was to redesign a game called PeaceMaker, which can be found here. The second part of this project was to create our own game along the same theme of Peacemaker. This game had to have an power struggle of two or more groups, whose ultimate goal was to achieve peace. Our goal for this project was to work within a group of 5 and create our own gaming system and interface with a paper prototype.

A full brief of the project can be found here.

Execution

We worked for an entire month on this project. The parameters laid the groundwork for how our game’s story was to play out, but we had to create a plot and an interface system that made sense to the user. I was tasked with creating a plot and backstory of the game that enhanced the player interactions. During the beginning stages I realized that the game had to have a heavily integrated backstory with a lot of emotion. If the backstory didn’t make sense and the plot didn’t carry enough emotion, the user would not feel inclined to continue through the game. There also needed to be a sense of “fiero” (an Italian word meaning ‘pride’) within the game, which means that the user needed to feel a sense of emotional accomplishment when completing an interaction and triumphing over difficulty. I worked with this in mind when designing how the plot and interactions were going to be revealed to the user as well.

Yogi's Meeting 3

Screen Shot 2017-12-11 at 5.03.35 PM

 

 

 

 

 

 

The biggest challenge we ran into as a group was deciding on how our plot was to be presented to the audience. We didn’t want to pull a Star-Wars and have mounds of text for the user to read, but we also didn’t want the user to have absolutely no background revealed because the plot had to be integral to the gameplay. We decided that the user would begin in the home base of the ship, and as events unfolded and the user interacted with more characters, they would be the ones to reveal plot information. Besides exploration, we designed the player to also have a tablet in-game in which they could make decisions and retrieve information (in case of memory fatigue, or a pick-back-up situation).

2-3Meeting7

We learned through our users that it was better to test our ideas early and often, because it allowed us to have users comment on individual aspects of the game and how they could change according to what made the most sense to them. This method of testing gave us the time to ideate more and gave the user less of a cognitive load when testing. The user testing specifically revealed to us how we could constrain the players into following a set list of interactions that we needed them to complete in order to advance through the plot of the game.

2-7UserTest2.3

Final Result

Postmortem

Throughout this project I acquired a lot of knowledge on game design and plot construction. Through my own creativity and that of my team, we were able to create an interesting and unique game prototype that followed within the parameters set by our instructors. I specifically learned that it is very easy to overload a user with complex interactions within a game, and when testing it is better to show a cue visually than to explain it with words. As a group, we recognized the importance of player interactions, emotional drive, and cognitive load for games.

The final project deliverable can be found here: IDF Project 1.2

*This deliverable includes the final sketches, user personas, any mockups or ideations, and the results from user testing.

Games UX Design: Redesigning Peacemaker (Part One)

Undergraduate Interaction Design Practice at IU

Designing a Better User Experience for Game Interactions

Overview

My first project regarding interaction design practice during my time as an undergraduate was to redesign a game called PeaceMaker that explores Israeli-Palestinian issues: http://peacemakergame.com/.  The game is a single-player game and was developed in 2006. However, the game is incredibly dense and may be overwhelming for a first time user. Our goal for this project was to work within a group of 5 and redesign the game.

The full brief of the project can be found here.

Execution

As a team we worked for a full two weeks on this project, and we as we started researching further into this game we realized none of use really understood the depth and complexity of the interaction system and playability. It was built so that the player had a very small margin of winning, and had to use and understand all of their resources at hand. This was not a game you won on the first try, and it wasn’t something you could idle around in. I was in charge of doing background research on both mobile and desktop turn-based consequence games, and the re-organization of player interactions within the game.

TeamFBoard1

The biggest challenge we ran into as a group was organizing the background information and in-game information. The game was designed to teach you about real-life scenarios that occur, but also to present you with information in the game as the leader of the nation. Our first attempt to address this challenge was to reorganize the amount of information presented to you at the beginning and prepare you for the challenges that may lie ahead (difficulty ratings, map systems, user settings) through onboarding.

UserTest1.5

We learned through our users that even with a reorganization of information, the game had too large of a cognitive load for them. We decided to remove all videos, as they tended to be too long and didn’t play well into the narrative of the game. We also removed the organization system of the¬†three “actions” (security, political, construction), and reorganized it into four “secretaries” (defense, diplomacy, infrastructure, intelligence) with an action button. These secretaries broke down the information into more understandable categories, and the action button provided the user an assurance that they would be able to go back and change a pre-selected decision before deploying it into the game.

TeamFMeeting1

Final Result

Postmortem

I developed and evolved as a UX designer with this project. I was able to research and understand commonplaces practices within gaming systems, as well as applying that research into the plot of a unique game.  I learned that when working within a group of designers, collaboration and communication is key. I also recognized the importance of proper user testing when trying to affirm or reject various design decisions. As a group, we collaborated and debated daily on proper techniques to use within our game and it benefitted us greatly.

The final project deliverable can be found here: IDP Project 1

*This deliverable includes the final sketches, user personas, any mockups or ideations, and the results from user testing.