To improve the usability and overall client satisfaction with GL Studio.

My Part

Qualitative Research, Competitive Analysis, UI/UX Design, User Flows, Mockup Designs, HTML & CSS Protoypes


UI/UX Designer & Researcher (me), Product Owner & four Developers


7 months doing the Agile Methodology with 2 week sprints

GL Studio has been a pioneer in the development of graphical interface software. As an industry leader in HMI and UI Design Software, it has set the technology standard for the creation of high-quality user interfaces.

What is the problem we are trying to solve?

DiSTI is trying to get more into the automotive field and target a new user type, the UI artist. Since GL Studio was built for developers by developers, there are many tools missing for a UI designer. So how can we imporve the application's user experience while providing new features?

Some of the pain points with the old verison of GL Studio

Key goals that need to be achieved

The main goals of this project where to:

  • Improve general UX within the application
  • Update the UI to a new modern look and feel
  • Improve the toolset so a UI designer would be comfortable using the application

My Role & Responsibility

I coordinated the UX/UI design for the entire project. I collaborated with the VP of UX for the product and with our development team to determine what improvements where needed for the first release.

We worked in an agile development process with regular sprints and design sprints to achieve our tight deadline for release. With the design sprints I had to make sure I was ahead of the developers so they knew what UI/UX tasks where next.

Let’s find some of the current pain points

I began the research by conducting a heuristic review of the application. I followed the “10 Steps to Improve Usability, Utility, and Desirability” by the Nielsen Norman Group. This would give me the foundation I needed to begin to see where improvements were needed. The results showed that the application in its current state was violating 6 out of the 10 rules.

Using the Nielsen Norman Group Heuristic Review I discoved several issues with the current appliation.

Now it’s time to talk with our users

Next, I sent out a survey to 8 of our current customers. I picked customers that where mature in using the product and ones that just started using it. The purpose was to determine what pain point our users had with the application and help determine what we needed to fix first. Learning about the problems of potential users is a great way to be inspired and motivated. Working with real world data is a good starting point to help avoid guesswork and preconceptions.

Some of the questions asked where:

  • How would you rate The GL Studio's editor interface?
  • If you could change one thing about GL Studio what would it be and why?
  • How would you rate integrating art assets (images, 3D models, animation sequences, etc.) in GL Studio?
  • Do GL Studio packages make it easier to create my application?

The results of the survey conclued that:


People felt that there was not enough contrast between elements


Object property menu items could be arranged differently


They wanted more backend stability and package handling improvements.

Why does everything have to be so gray. The interface looks outdated.
-Anonymous User

With the research done, I now know what to improve upon. It lets us see who our users are and what their product journey is.

Who is our user?

The accumulation of the different insights and common patterns that came from the users’ survey answers helped me create a persona, which is the manifestation of that data in a character.

Dan is an engineer at a large automotive manufacture that is looking for an application that allows him and his team to build HMI/UI displays. He needs this application to have an intuitive interface so the engineers can program and UI artist can design with ease.

Discovering our user’s journey

With the creation of the persona, Dan, I wanted to see how he and other prospective customer begin their product journey. With the help from our sales team and product owner, I created a Journey Map to get a visual representation of how Dan and others get from prospective to buying a license.

User journey shows how a user starts with the sales team and ends up buying a license

Finding out what our competition is doing

I did a competitor analysis on two of our top competitor’s applciations. This gave me an understanding of how the workflows work in each application. As a UI/UX designer, this helps guide me to design a solution to Dan's pain points.

Some of the findings that I felt that where strengths in their applications, but where weaknesses in ours were:

  • Their interfaces were cleaner and more modern looking
  • Designer creates the look and feel for UI in an external program such as Photoshop, Illustrator or Sketch and then imports into the application
  • Designer do not have to name the Photoshop layers a certain way
  • Designer can edit text on the canvas and not in a separate window
  • Iterating with this workflow would be much quicker because there is little back and forth between designer and engineer.

Creating the solution

With the information collected to start the design process, I began with the wireframes. This visual guide represents the skeletal framework of the app. It helped me arrange the interface elements quickly while working on solving Dan’s pain points. Moreover, the simplicity of wireframes allows me to quickly test ideas to see if I was removing his pain points.

Wireframe showing some of the imporvments I felt where needed

What colors to use?

Before I got started on the UI redesign, I went ahead and created an inspiration board from other dark theme applications. I looked at desktop and mobile applications to get a sense of how others have used a dark theme.

Color pallet and Fonts

The primary colors for the dark theme are black blue hues with bold blue highlights. The rationale behind using this bold blue tone is because blue is often described as trust, feelings of loyalty, reliability, secure, and the most used color in the business world. Blue is also the richest color for red-green colorblind people.

The Final Design

The new design resulted in a cleaner, more organized and visually appealing appearance. Icons are easier to spot and understand. Brighter highlights show the user what action they are on. This new design solves Dan's pain points and gives him an applaication he and his team can use.

Scoll to see a side by side comparison of the pervious version to 7.0 release.

A compresence of the previous release 6.3 to the new release of GL Studio 7.0
Just some of the improvments that where made to GL Studio for release 7.

What did I learn?

Redesigning the UI and improving the user experience has been a challenging and rewarding journey. It was clear from the onset that the major challenge was updating a legacy application and not having our user base be upset with the new changes.

After doing some post launch research, I found that 80% of our users are enjoying the new UI and UX enhancements. One user was quoted as saying:

The visual enhancements were long overdue. The contrast between colors makes it much easier to view objects and elements needed to finish my project.
-Anonymous User

I also found out that we have a 70% adoption rate of users upgrading to 7.0 from previous versions. This means more companies have begun new projects in the new version or are migrating projects over to the new version.

What is Next?

The team is not done yet. They will continue to look on how they can improve GL Studio for future releases. Just some of the items are:

  • Deep research about new specific features customers are asking for
  • Usability test of the new features prototype with users
  • Continue to improve the user workflow flow
  • For UI artist, look at improving our PSD importer and consider building others like Sketch and Figma