Web & Mobile  UX Design

TABLET PROFESSIONAL TRAINING APP
CREATED USING:  Adobe Illustrator, SurveyMonkey
This project  entailed creating wireframes, documentation, and conducting end-user  research and persona formation for a Unity3D-based training app for professional educators involving missions taking place over semesters of a fictional school year.  This project also required some illustration of the  back-end information architecture. 
The first example illustrates a fictional end-user persona type with Meyers-Briggs personality data, needs/wants, and technology preferences.   The information was collected using SurveyMonkey. This helped the client understand  the emotional needs and media preferences for their target audience.  
The second image is a user journey depicting how long the onboarding and required/optional mission progression would take in real-world time.  This visualization helped the client understand how content would be organized and presented to users.
 The third image  shows how various end-user types interact with different front-end applications, and, by extension, how the different  systems and pieces of information are organized and accessed on the back-end.  This mapped out the strategic  development effort so engineers could understand the holistic interactions between different systems and end-user types. 
The first image is a Tablet-based UI for an in-app status screen or "Report Card"  indicating user progression and skill accumulation. 
The second UI example illustrates an interface design for a web-browser based CMS tool for the development team  to create and maintain  the text content for  app.

MOBILE-WEB VIDEO DATABASE UX
CREATED USING:  Adobe Illustrator,  InDesign
Here's a selection of wireframes and charts  for a video-related content database interface that had multiple user flows, each served different needs and functions for different end-user types.
The first user flow, in green, had the simplest feature requirements and had  both an iOS and desktop/web-based front-end.  
The second and third user flows (in yellow and red) were both desktop-only, and shared more in common with each other than the green, mobile-centric userflow type.  These desktop wireframes illustrate a   Content Management System (CMS)  interface design allowing users to review video  clips and perform other back-end database functions.

GAME WEBSTORE/ E-Commerce WIREFRAMES

This was a quick one-day exercise to redesign a Desktop/Web-based digital storefront   for a major gaming brand . 
Platforms:   Desktop/Web
Tools and  Tech:  Illustrator CS6
UX DESIGN GOALS
  • Deepen positive user  feelings of connection and investment:
  • Add a "Wish List"  feature to increase cultivation and boost conversion by streamlining future purchases.
  • Surface user-generated content (Ratings, Reviews, and Video Streams)
  • Integrate social influences and features (Gift Purchasing,  highlight "Friends" that want or own a title)
  • Reorganize and reduce redundant elements 
  • Reduce clutter and scrolling

CHARACTER CREATOR with MiCRO-Transactions

This was a redesign of an avatar creation interface for an online game free-to-play (F2P) title that monetized customizable aesthetic and accessory options using virtual currency. I used Balsamiq Mockups to create these images to build experience and familiarity with it  as a popular wireframing tool. 
Platforms:   PC
Tools and  Tech:  Balsamiq Mockups
UX DESIGN GOALS
  • Put chat functionality behind a button toggle to reduce overlapping windows and clutter
  • Display both customization option pricing using real-world and virtual  currency
  • Give users the option to create and maintain a personalized Wishlist
  • Broaden the range of facial customization options to support procedural sliders/parameters, giving users variety and a deeper connection to a more personalized avatar.

Unity3D STRATEGY GAME PROTOTYPE

This was an experience-building project for Unity3D independent game development.  This prototype of a rudimentary turn-based strategy  game was built in just under three weeks  using C# and NGUI (for the UI elements).
Platforms:   PC/Mac
Tools and  Tech:  
Unity3D, C#, NGUI, Github, SourceTree
  • Each grid is randomly populated with a player (blue) and three stationary targets (red).
  • Within a turn, player can move their unit within a range (displayed in yellow) and use one special power (represented as cards along the bottom left)
  • The goal is for players to use powers to clear the grid of red targets
  • Players can also hover the mouse over either the player unit or a target to  see its remaining health points.