03: Concept - JoyToKey GUI Redesign

Improving Function and Aesthetic of Gamepad Input-Mapping Software

UI Design, User Flow

Objective:

JoyToKey is a shareware program that allows users to bind keyboard inputs to a gamepad. The software has been around for at least ten years and has made very few changes in UI. As a personal challenge, I attempted to modernize the UI's visual style and improve its usability.

Role:

UI/UX Designer

Process:

1. Comparative Analysis
2. User Flow Diagram
3. Low-Fidelity Wireframe
4. Style Guide
5. High-Fidelity Mockup

Comparative Analysis:

JoyToKey uses an older Windows-looking GUID that doesn't do much to guide the user through the input mapping journey. My initial impression when opening the software was confusion as the menus weren't intuitive and didn't say which device was active. The long list of inputs on the right could have been a useful overview, but it was filled with extra, unused inputs that added to the initial sense of confusion.

ReWASD is a newer software that shares much of the same functionality as JoyToKey. Initial impressions were much a comparative improvement as the aesthetic was more modern, and the controller visual helped me identify which device was active. The controller-edit view was a bit overwhelming at first. The iconography wasn't intuitive without context, and the view lacked the overview list that JoyToKey had.

User Flow Diagram:

I created a user flow diagram to illustrate the journey from program launch to remapping the controller buttons. From the diagram, I could derive the software's primary views and additional prompt dialogs.

Low-Fidelity Wireframe:

Referring to the user flow diagram, I identified the three main views for the input-mapping journey: Device/Profile Selection, Device Input Selection/Overview, and Input Map Editor. I wireframed these views, selectively using aspects of reWASD to improve the interfaces of JoyToKey. I also wireframed to the user flow diagram's decision components into the and alert prompts that would be present throughout the journey.

Style Guide:

With a pre-established audience of gamers, I sought to redesign the UI with a more modern, gaming aesthetic. I drafted a list of some popular games and gaming tools and compiled some of their user interfaces into a mood board. I identified some of the common characteristics: Dark gradient backgrounds, simple geometric UI elements, white sans-serif text, and monochromatic accents.

High-Fidelity Mockup:

After establishing the visual design, I applied it to the wireframed views to create high-fidelity mockups. I kept a neutral color palette for menus and used a dark gradient background to create higher contrast on focused elements. I applied open-source iconography from IBM's Carbon Design System to streamline the mockup process.