To improve the usability and overall client satisfaction with GL Studio.
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.
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?
The main goals of this project where to:
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.
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.
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:
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.
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.
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.
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.
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:
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.
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.
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 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.
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.
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: