To view all the professional projects, click here
XES Module for Docker is a cloud application that gives the user ability to execute, stop, configure and easily upgrade the profiles. A profile is an executable workflow built in EAM (Edifecs Application Manager) by a user. Docker is a lightweight copy of the entire operating system. For more info, click on the product details page here.
Currently, a user can execute the profile in existing Edifecs applications EAM or XES Manager but both are not very usable. The interface is not user-friendly.
There’s overload of information on screen and the application is not seamless. It requires user to get out of the system to perform additional tasks. The older applications also lacks multiuser interface and docker support. Therefore, we designed this improved UI flow. It is an add-on to the existing server application.
1. Brainstorming session with Product Manager
Product manager and I started the project by doing a brainstorming session in which we determined the key
workflows of a profile. One of the main workflows is listed below:
Execute a profile in production environment workflow:
1. User designs a profile in desktop EAM (Edifecs Application Manager)
2. User saves the profile to the cloud
3. User drops the input files in the inbound location
4. User starts the profile in docker production environment
5. User looks at the result outside of web application
6. User drops more input files in the inbound location and keeps the profile running
2. One pager Document
Based on the brainstorming session and the recordings of the meeting, I created a one-pager document for the project to make sure that I understand the purpose of project clearly.
The document helped everyone on the team (PM, Dev) to be on the same page. It clarified the purpose of this project, its users and technological constraints in developing it.
3. User Profile
Product manager shared the details of users based on his experience of working closely with the clients.
The role of the XES Module user is ‘EDI IT analyst’. The user is more technical oriented than business oriented and has good knowledge of the backend system.
He cares about executing the profiles and his primary need is to be able to seamlessly start and stop profiles. He needs a clear UI to monitor the profiles and upgrade them when
necessary.
4. Secondary Research
Soon after the brainstorming session, I started collecting sample screenshots of the similar products to gain
inspiration for the design. I looked for applications with server dashboards. Many of them were suggested by the
product managers.
5. Requirements Document
Requirement document was shared by the PM team which had high level description of the user experience that we wanted to design in this release of the product. It had the details of the key workflows and future strategy of the product.
This document helped me understand the scope of current release.
6. Sample Data
Sample data of identified entities were also shared along with their default values and exceptions. This made me understand the nature of the data that would be displayed on screen.
7. Sketches
Based on the requirements and sample data, I started sketching for different approaches of designs. I presented them to the PM team to understand their views and expectations from the UI design.
Below are the three different sketches for displaying Profile cards on the UI:
1. The
first variation
has start and stop buttons exposed and remaining actions hidden in the menu list
2. The
second variation
has all the user actions hidden inside the menu list with CPU consumption graph displayed for each server
3. The
third variation
has partly hidden and partly exposed user actions with no extra meta data info on the profile card
8. Initial Designs
I started designing the UI for the application by using different components and styling. I determined a theme for profile list page and continued with the same theme for the rest of the pages. Following are several iterations of profile list screen design:
The final design are the screen UI of the entire workflow that enables user to start, stop, configure and view
statistics of the profile. It consists of following screens:
1. Profile List
2. Basic configuration screen
3. Advanced configuration screen
4. Profile statistics screen
Interaction Link: Here
(Click on the individual pages to see them full screen)
XES Module for Docker is one of the projects that was driven by me from start to the end. I collaborated with the PM team to understand the requirements, overall system, current business model and future startegy. Creating one- pager document and sketching different ideas of XES design helped alot in bridging the gaps of understanding and attaining common ground. There was some emphasis on moving quickly to the prototyping phase by the PM team but I discussed the importance of investing time in understanding the problem first before solving it. Therefore, I played the role of an educator as well besides being the designer.