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 .
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.
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).
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.