UI & UX

GL Studio

GL Studio is a GUI builder typically used by software engineers in the aerospace industry. As DiSTI’s first UI/UX designer one of my first assignments was adding features to make the tool more user friendly to a UI designer as well as a general UX improvement within the application.

Design Process

A user centered and iterative design process was used to guide this project from start to finish. Special thanks to Nielsen Norman Group, they are one of the most influential leaders in UX design; the method below is based off some of their articles.

Research, user data and interviews provided invaluable feedback that helped me drive a new GLS experience that improved the core tools while adding some needed ones.

Research & Analysis

The first step in any UX process is doing the relevant search insights and data gathering. Additionally, a comparative analysis of the existing competition was compiled as a source of knowledge and inspirations for future ideation sessions. I spent two weeks downloading and ramping up on Qt Creator and Rightware’s Kanzi software. With the research phase done I was able to understand their strengths and weaknesses.

User Journey Maps

Typically in the UX process research into personas is done next, howerver with this project I was given the target user of UI artist.

With that in mind, I skipped personas in-favor of journey maps instead. This would help me to get a better understanding of what task users needed to complete their assignments.

UX | User Experience

After the journey mapping was completed, I was able to target some key improvements that would improve the user experience.

Reorganize Properties Panel

This panel includes settings for each property. With the amount of properties on screen, users have complained it’s difficult to find some options.

  • Group options better, i.e. position & rotation are now grouped into an easily scannable panel.

  • Organize settings for each property so the most commonly used options appear in order.

  • Advanced mode for each property, the default view shows only commonly used options. Users can easily view advanced settings via toggle and shortkeys.

  • Typography and iconography improved to help users visually scan quicker.

Add Layout Controls

Currently users do not have standard placement/layout controls designers are familiar with.

  • Add rules on canvas, measurement values for ruler can also changed.

  • Users will be able to drag guides onto the canvas similar to how Photoshop works.

  • Users will be able to snap objects on canvas to guides and rulers.

  • Typography and iconography improved to help users visually scan quicker.

Improve Text Tool

There are currently numerous minor text issues with the tool, each one isn’t too bad on it’s own but when you combine all of them together; it makes a bad user experience overall.

  • Users can now edit text directly on canvas, currently users have to select the text layer; look in the properties panel for a setting field “String”; then enter the desired text there.

  • Add spinboxes to fields that users can increment values positively or negatively.

  • When users click in the option field, the text value will now be automatically selected so user don’t have to manually highlight the option.

Add Prototyping

Users can currently prototype with GL Studio, however the user needs to know how to write code.

  • A new node based sytem added to let users easily prototype interactions between screens, with this new system users can just click and drag interactions.

  • Users can click to add functionality with a prebuilt library instead of having to write code.

Wireframes

With all the UX documentation created, the next step was combining those into a click-through wireframe to help tell a story to stakeholders. These give the stakeholders a chance to follow the stucture and features without getting boggled down with design details like color palattes and imagery.

Visual Design

The final visual design was refined though multiple rounds of iteration with key stakeholders. Although they had the final say so, I was given free reign on color standards, iconography and typography. The final design also included dark and light skin themes.

Presentation

The final step in the process was to give a presentation to the full GL Studio development team as well as the support service team. This presentation was a standard powerpoint along with an Adobe XD click-through.

  • Current state of GL Studio vs industry competitors.

  • Improving GL Studio user experience for everyone.

  • Roadmap for a true UI designer workflow.