GL Studio Redesign

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?

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.

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:

The results of the survey conclued that:

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.

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:

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.

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.

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:

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