By Matt Byrnes
The following contents detail the research, strategy and execution of the frontend framework for CDC Global Travel. It is my hope that this presentation will provide helpful insight on the production of this interface and will serve as a resource for future projects at the CDC, MISO and Booz Allen.
As CDC Global Travel is an application used all over the world, there was great emphasis on the app being optimized for very low-broadband areas in developing nations. In addition, a mobile-ready framework was desired as more than half of web traffic now comes from mobile devices.
With such an emphasis on the framework being lightweight, a decision was made to opt out of using the popular Bootstrap framework for a more refine solution. Upon review of several lightweight frameworks, Skeleton Responsive CSS Boilerplate seemed most ideal. The framework is self-described as “Light as a feather at ~400 lines & built with mobile in mind.” In fact, Skeleton does not actually consider their solution a framework, but rather a starting point. This was particularly attractive as we were looking for the driest fronted code possible.
We have not once looked back at opting out of Bootstrap. The decision to utilize Skeleton CSS and code the rest as needed proved to be very effective during the production and in meeting requirements. Our final payload for the Skeleton CSS file is ##kb and the un-minified document is only 1500 lines (double spaced).
While conceptualizing the theme and design elements of this application, I often referenced imagery and symbolism that is meant to project sophistication, sterility and international travel. I also wanted to the interface to look slightly futuristic so that it would communicate a cutting edge type of quality. I chose these characteristics because they are synonymous with what one would expect from the world’s largest disease control organization.
When conceptualizing a theme for an application, I like to use an abstract exercise that involves finding images that convey how the interface should make one feel. These images do not have to be very literal to the purpose of the application. They may be a variety of things such as a setting, material, painting and so on.
With flat design being so en vogue these days, it seemed a little risky to attempt a contemporary interface that did not belong in this genre. However, every fad comes to an end and after two years it seems that flat design is on its way out. Furthermore, flat design is admired more amongst fellow designers than the general public. With this, it made sense to set aside these new conventions and focus on what would really make the client excited.
Opacity is very easy to implement interns of code these days. All that’s required is a few CSS attributes. The more challenging part has to do with applying it in ways that don’t denigrate legibility and usability. There must be a well-balanced combination of font colors, opacity levels and a backdrop that is noticeable but nonobtrusive.
Instead of just throwing some text next to a company’s brand or making a new one that may not bear any reference to the original, one might consider the option of sub-branding. CDC Global Travel was a great candidate for this practice as it part of a greater organization but worthy of its own identity.
Make no assumptions when trying to discover an optimal user experience for a client. Try not to let the client make any assumptions either. Often, they have become so used
to protocols that they have a hard time imagining them being significantly different. They will have a list of desires and many will provide the right direction. However, knowing
what’s better is far different from knowing what’s best. Finding what’s best can often be accomplished through a qualitative approach. Interviewing, observing and focusing on the
issues they can’t quite put in to words.
I believe shadowing is one of the most effective methods of qualitative research when conceptualizing an interface for a client. There really is no substitute for seeing protocols performed
in an organic environment, under both optimal and problematic conditions. During shadowing session you might essentially consider yourself a trainee.
It can be a little tricky finding the right place for UI/UX process in the agile workflow. Designers have to be simultaneously assisting in the completion of sprint objectives while keeping an
eye on the big picture. Focusing only on the requirements of a particular sprint can lead to short sidedness and neglect of larger holistic design questions. Being too far removed from the development
team can be contradictory of the Agile methodology, making the process a type of mini-waterfall.
One key takeaway we learned during this project is that UI/UX should probably be ahead of the development team to some degree. Nothing else, including cars and houses, gets designed and built simultaneously
so why should an application be any different? Determining how far ahead is currently a wide discussion amongst UI/UX practitioners all over the world.