As the only UX designer & part-time in the team, I work alone with direct instruction & guidance from the VP of Product. This a continuing project, however this case study mainly focus on the implementation of a new design system, aid based user experience, key configuration settings redesign of Atlas, and the design to development handoff.
Atlas is a data analytical and management SAAS software platform sold by Kinney Group Inc, that is installed on top of their client's existing Splunk implementation. It helps solve common Splunk issues, optimize Splunk environment, and help the users do more with Splunk efficiently. The application assist its client in the tracking, visualization, and management of their system ingest data through indexes, source type, search heads, and etc. The application itself offers its personalized customization through role based access control, license management, system/setting configuration, and more.
As Atlas moves towards maturity, the company and its' management team realized that there needs to be a way to identity Atlas as it own product and application. With this change, the push for the next big release of Atlas (Atlas 4.0), focus on new user interface, new RBAC (role base access control) structure, aid based user experience, and configuration settings clarification & redesign. The management team also seeks a way to increase the efficiency of design to development process due to the small team of 1 UX designer(Myself) and 3 developer. During this time and due current circumstances, the speed of implementation is the top priority.
At the start of the redesign, I was given a choice to potentially creating a custom design system and component for the new interfaces of Atlas 4.0 update using Figma. But this quickly became and ineffective and inefficient use of time. As a part-time UX designer. I started off with only 20 hours a week to work on the project. A fully functional design system requires a lot more time and effort. Given the deadline that was set by VP of one week, this was simply not possible. However eventually the hours got increase to currently 30 hours a week.
The next try as represent with the purple lines in the timeline. The VP suggested to try using a react design template call Berry. The process start off good, and I quickly learn how to use the template to customize to the branding of Kinney Group and the Atlas application. The design using the template is shown below. However this also became a problem, as the template found end up being more useful for web e-commerce sites. The components found in the kit did not meet the need of what Atlas need. The development API were also not useful as the developer mention that it seems to be just styling changing wrap on top of the Material UI components.
After talking with the developers, I decided to do some research into the Material UI system and uncover the whole design system that end up really useful to what our team need for efficient design and implementation on the development side. The MUI system offered quick customization of themes as well as a fully documented API. More importantly I was able to cut the design and prototyping time by 50% and increase the efficiency of my own workflow. With the use of the MUI design kit. I was able to quickly implement and maintain a whole new design system(consisted of light & dark mode, variables, typography, color themes, etc.) through Figma.
Another big change from Atlas 3.0 to 4.0 is the increase in the amount of help base UI. This can be see in the increased used of on-hover tooltips, push-out help text panel, and the wizard-based help that is coming a bit later in the version updates. Another thing to note is with the design change, any aid based UI also uses the same secondary color (bluePurple) to help note to users that if they see the specific secondary color it is for help.
The key changes is how to represent large amount of data in a limited amount of space, as well as being able to summarize the data. This is done by using MUI chart systems, data grid, expandable tables, and stacked bar graph.
Some of the feature changes in the new updates included the new Role Based Access Control system show through the new user experience changes. The updates with the license usage is also reflect. However the top configuration change is the move to merge individual element(page) configuration into a single Elements Configuration page to allow for quick access and and management.
After a few trial and error, I was able to work with the developers on the team to come up with the best way that works for them in delivering a clearing instruction of the the design for the handoff. This is done through using the slides feature in Figma as well as addition comments of what might be slightly different in Figma to design through to the limitation that Figma has on advance prototyping. An example of the handoff is shown below.
