interaction and visual designer
Screen Shot 2017-02-18 at 2.37.24 PM.png

Modular Gaming App

 

January-March 2016

2015 Winter Interaction Design

DES 385

Guest Lecturer: Francis Luu 

For my winter quarter of my Junior year, I was taught by Francis Luu (designer at Facebook) and assigned an independent project of creating an app with the assistance of my research group (Nick Allred, Logan Quinn). My research group was focused on video gaming and I chose to approach the idea of creating a mod library app to allow a user to browse mods for game that they already own. When they first open home page, there is an update badge showing any new updates for new mods available for that specific game, or whether a modder released a newer version for bug fixes, etc. Then the user would then be able to send that mod to their PC for later downloading. 

The websites that are already available for viewing mods are all very disorganized and it's harder to navigate some of them if you're a first time user. The search system in those websites also doesn't function as streamline as it should as some websites use specific jargon that others don't, showing a distinct lack of consistency.  Leading to a difficult experience to find things across different platforms. Therefore, my aim is to be able to offer quick access to viewing mods as well as searching/browsing. 

One of the requirements for the project would be to make our prototypes through quartz composer which is a prototyping app used by Facebook and many other app developers. It was very challenging, but it has a steep learning curve, allowing me to get used to some tools used within the industry.

 

UI INTERACTIONS

 
 

MICROINTERACTION 1 - viewing your own profile

Modular also allows one to view their own profile and edit their user account settings. This video demonstrates this microinteraction and navigation.

FULL FLOW

This video demonstrates the key flow of the app: browsing updates for games you already own, and the search system where you can filter your results efficiently 

 
 
 

MICROINTERACTION 2 - viewing a modder's profile

This video demonstrates one of the microinteractions that wasn't displayed in the full flow video. This video focuses on viewing a modder's profile to view any content that they have and possible send it to their own PC.

 

Quick preview of one of the quartz composer work screens-specifically the send update confirmation screen

Quick preview of one of the quartz composer work screens-specifically the send update confirmation screen

 

UI MOCKUPS /// Final ITERATION

Second iteration:

This is the second iteration of the UI design, where I explored a more of a marketing oriented design, where I would feature mods from other games that aren't owned to give more of a perspective of the modding community. This version compared to the first iteration tries to simplify the layout to a further extent, getting rid of excess information and making the pages simpler with a consistent color palette. But the design of the app didn't resemble an app enough, which is where I lead to the third iteration of the design which is much more simplified and direct with the purpose of the app, pointing out the more salient features.

First iteration:

I was experimenting with the layout and what features would be best to include. Along with that colors would look appropriate against a dark background. However, I found that the app was trying to address too many things and the pages would get cluttered and have too much information.