Beth Cerny

Interface Design for User Account Application

Procedures to tell the ALCF science stories.

 

< Back to Improving How Users Experience ALCF

Interface Design for User Account Application

Helping a team of developers meet their goals while advocating for our users.

 
 

BACKGROUND

Our outdated user account application was built in 2006. The user account application is the underlying system for science project information such as who can access the supercomputers, which projects the person has access to, the amount of computing time each project has, and permissions for all of their files. This system is the backbone of our user operations and every single user on our supercomputer (around 1,500 each year) has to use it at least once if not multiple times a year. We are building a new public website during the same timeframe.

APPROACH

We are on phase one of the user account application and it will launch just a few months before our new website. We’ve decided to link the visual design of the application to existing website with the intentions of updating the CSS as soon as the new website is launched. Because the focus of phase one deployment is on software architecture and security, we are taking a common sense design approach and using Bootstrap to make it easy for the developers to implement design and interaction.

ProjeCT STATUS

We are in beta and doing system tests to debug the application. Phase one of the project will launch in early January 2019. Our users will encounter an improved interaction and design experience after launch. We’ll collect interaction data and user feedback after the initial launch to do additional design refinements in phase two and three. Our long term goal is to expand the application to become a portal for our users.

 
 
 

Figure 1: The application homepage designed by the application developers

Figure 2: A redesign of the homepage of the application keeping inline with the existing website design.

 
 

Figure 1: A screen shot of the homepage designed by the application developers.
Figure 2: My redesign of the application homepage using our current ALCF website to drive the design. The new application will require the user to have a CRYPTOCard token in order to sign into the website for enhanced security. Because CRYPTOCard often go out of sync with the server, we’ve added help pages to guide users through the steps of resyncing tokens if the problem arises. The redesign also includes user-specific information such as training, CFP opportunities, and recent science successes. User support hours and contact information is front and center on the page.

 
 

Figure 1. Screen shot of the first page for Join a Project designed by the application developers

Figure 2. Screen shot of the second page for the Join a Project web page designed by the application developers

Figure 3. My solution to the Join a Project page using Bootsrap

 
 

Figure 1 and 2: The application developers designed a two-page process to perform the task of joining a project.
Figure 3: Using Bootstrap functionality. I was able to combine two screens into one, saving the user from an unnecessary click and making it easier for them to perform the task.

 
 

Figure 1: Application developers design for choosing a project

Figure 2: Replacing a long list of projects with an autocomplete filter with the ability to filter by multiple types of information

 
 

Figure 1: A screen shot of the application before the redesign. The user was expected to scroll through a list of several hundreds of projects and add a checkmark in a box next to the project(s) they wanted to join.
Figure 2: This was updated with an autocomplete search box that allows the user to choose criteria that they want to filter on to find their project.

Figure 1: A screen shot of managing UNIX groups memberships

Figure 2: The redesign of the UNIX group management page

Figure 1: A screen shot of the UNIX group management page before the redesign.
Figure 2: The redesign incorporates functionality used in other screens to create a pattern of behavior for the user and the user will be able to perform multiple tasks in one screen. It’ll be easier to use our application if each web page has similar functionality and the user can make assumptions about how it works.