Unleashthe Kraken

User Experience
UI

Background

Great Lakes has been around for a while and has built a lot of CICS screens off of the mainframe system. CICS screens are represented in the header image of this page and are navigated using the keyboard and codes that must be memorized. Many applications were built in this format and it was getting increasingly difficult to train people on this old type of system.

A second issue was that Great Lakes wanted to utilize more in house developers to build these apps. The problem is that the in-house developers had not dealt a lot with the presentation layer (HTML, CSS, Javascript) of code.

Responsibilities

Front End Coding, UI Design, Branding, Visual Design, User Testing

New branding

Since the internal applications were more for business use cases like data entry, forecasting, database manipulation and display of data there was very limited use of illustration and no photography. Another big difference was only using different weights and sizes with open sans as opposed to changing the font. This project wanted to think more like building a native app, but for a desktop computer. Color was also used sparingly, with the exception of the call to actions which were always an orange button.

Applications created

Email, letter and phone call analytics dashboard
Automated outbound marketing strategy through segmentation
Data Entry Applications
HR training management tool

User Experience

The driving force behind this project was to create a more intuitive environment for people to do their work as well as pave the way for future webapps to be developed. The ease of use was critical for these apps, because the client wanted to make sure the training time was cut down for each employee who used them. The awesome part is we had the actual users sitting there who could test the app and let us know what needed to be improved!

The project needed to take into account the developers who did not know HTML and CSS. Thus was born the KRAKEN!

The Kraken template was the first template created and would be used for simple applications that only required a column or two. A developer would download this file and would be immediately ready to build the application. Think of this like an internal “bootstrap” for Great Lakes Apps.

As apps were being built it was realized that some of them were complicated and needed more screen space. Because of this standards of where information lived were created. The first column was used as the navigation and settings for display of data in the main white column. The third column was considered ancillary data area, where it was nice to have, but not critical to the core functionality.

Accessibility

Many people do not realize that webapps need to be accessible just like a building. So when building a app it is important to be aware that visual clues like color or graphics are not seen by a blind person using a screen reader. Another user would be the keyboard only user, where development needed to make sure the site is able to be navigated using only the keyboard. The templates and component library were made to be accessible and usable by all people.

Do you want to create something amazing?
So do I!

Let's get started!

unicorn astronaut