Afinos is a next generation network platform for social and business media sharing and collaboration. It is a desktop application for real-time non-server-based sharing of data files, video and other media formats. Afinos is a seamless integration of social web-based tools from the browser to a single traditional desktop application.
Create a visual design that reflects the sophistication and quality of the Afinos brand while allowing for scalability, flexibility and customization. Refine the existing information architecture to reduce user interactions, display more content and allow fast access to critical features. Utilize desktop UI design standards and leverage standard interactions and systems to increase the end user’s accessibility and comfort with the application. Due to the customization required for the UI skin, a design system and layout for each component is designed for integration with alternative skins.
A design system was created based on research of current and future trends in online and desktop applications. A mixture of gloss and matte styles was implemented to create a sharp cutting-edge design. The design was created in modules to allow for infinite flexibility and customization. Standard UI interactions such as tree structures, drag and drops, icons and window panes were utilized to increase the functionality and capabilities of the application.
To simplify the visual impact and complexity of the application, additional functions and informational systems were incorporated into hidden panels, icon indicators and tool tips. This visual simplification reduces the overall noise of the design while maintaining simple access to the critical information.
In order to ensure the success and implementation of the design, a close relationship was formed with the developers. This relationship allowed me to prepare the design assets and components for future customizations and design styles.
This project is currently under its final stages of development.
Are we moving from paper books to on-screen reading? Maybe not today, but many groups and companies are looking at the possibilities and platforms for such a move. Moving to the computer desktop is one option that is available today.
Create a prototype user experience design direction that maintains a consistent brand identity with the client’s online resources while leveraging desktop UI and interaction standards to promote ease of use.
A richer and more substantial feel is created by using a heavier weight typeface and graphical outlines with subtle gradients for depth. This design is an example of pushing the visual styles of desktop applications to meet the expectations and visual capabilities of online tools. Using the clients subtle color palette and branding the application seamlessly integrates with the client’s online counterparts.
To view full resolution images, click here.
Several online testing applications, data collection, data display and user management systems are required to effectively broadcast and capture such a large number of possible fonts and user results. The first stage is to create a flexible framework that can be expanded and customized to accommodate the ongoing survey portion and user feedback. The final two stages will incorporate a robust interactive display for users to track and search the general and font-specific results of the survey and research. Lastly, tools for commercial font vendors and educational applications will be integrated to assist in promoting the research results.
Currently we are at the end of the first stage of the research; the survey tool has been implemented with a full user data system, database storage, and dynamic font display system. The font display system uses actual font outlines to display identical images of the fonts via the web regardless of the operating system or platform. In addition the system can randomize or alter the font display during the survey through a simple admin XML control system.
To increase the user experience the traditional multiple choice radio button and checkbox have been replaced with a custom interactive slider and transition system. This system increases the user’s response rate by reducing user clicks and limiting the mouse movement during the survey. By using interaction design and animation to leverage the power of online media, improved testing and user experiences can be created without jeopardizing the integrity of the content.
Work on the data display systems and educational tools are underway and will be released in Fall 2009. These tools will incorporate both educational resources and advanced search capabilities that will allow for a better understanding of the measurable emotional and descriptive perceptions of typefaces from a large audience of designers and non-designers.
As the Director of Digital Media for the Vignelli Design Center, I have created the first stages for the information architecture, design and development of the Vignelli Design Center web site. This web site reflects the mission, collections and informational content for the center during construction.
Create a visual design that reflects the style and quality of the Vignelli name while creating a new web identity for the Vignelli Center for Design at RIT.
A clean and crisp design was created that allows for open space, dynamic content and ease of use. The design allows for scalability during phase II of the project without changing the visual complexity.
David Lamb, a nationally recognized and award-winning architectural photographer, was in need of an online presence to showcase work and foster client communication.
Create an online brand and presence for a photography portfolio with limited download requirements and image security. Develop a flexible Flash site that can be updated easily with multiple categories and images. Provide integration with the clients email for communication and client resources to share and transfer large project images.
A minimal and easy to use design was created to allow the images to be the focus of the site. To be effective, design cannot stop at visual elements; it must be part of the entire project process. This includes the design of the client interactions and maintenance of a project. In many cases this can be over designed and becomes complicated and cumbersome for an inexperienced client.
However, by using the principles of information design and maintaining focus on the end-user, a simpler and stronger solution can always be found. In this example external XML files allow for new categories and images to be dynamically added by the client. Designing a system for the client as well as the end user that requires no special software, tools or additional web knowledge is always an interactive design goal.
This site won the 2008 Design USA interactive Award.
Wegmans, a large regional grocery store chain with over 30,000 employees, was looking to develop a system of e-learning modules to help managers and employees understand various elements of payroll and labor laws. Being named one of the 100 Best Companies to Work for by Fortune magazine for 12 consecutive years, Wegmans employs a diverse group of people from part-time high school students to salaried professionals.
To design a prototype user interface template for a series of e-learning applications that reflects Wegmans beliefs and well-being themes. Create a user experience that would promote ease of use and involvement in the on-line course and testing. Develop a flexible and dynamic design that allows for adaptation to other e-learning modules and courses.
Working closely with the branding and well-being theme, several visual styles were created for the modules. These modules not only reflect the perception of Wegmans, which creates a closer connection between the users, content and company, but maintain a clear and easy to use interface. In addition, the visual design was created with modular elements that could be dynamically driven by external data or replaced with alternative skins. All functional elements were designed to meet SCORM standards.
To view full resolution images, click here.
To assist in the planning and curriculum development of the New Media Design and Imaging program and other School of Design programs I conceived, designed and developed an online shared application. This application allows for multiple users to create custom 4 year curriculum plans, share and collaborate on plans, store comments, credit hours, resources required, and assign faculty to specific courses. All content is secured through password protection and each variation or plan can be exported to external applications like Excel for further use.
To view full resolution images, click here.
In conjunction with NOAA, Earthecho and Entco this presentation explored a case study of the Deep Ocean project and students from my New Media Team Project course. This presentation walked through the different elements of the project from the 3D ride, environmental issues and integration of academic support and production work. As part of the project, students worked with these organizations to conceptualize, design and development a complex online resource to be used by the non-for-profit organizations. In addition the dynamics and pedagogy of incorporating real-world projects and clients with students were explored.
Exploring the importance of user experiences for online designers and developers within the e-learning community is essential to increase the effectiveness of these applications. This presentation covered users’ expectations, migration of real-world experiences to online experiences and the techniques that are available to create an effective and memorable user experience.
Presented with Professor Chris Jackson.
Author of a reviewed article for the Korean Magazine Graphics Live. The article discussed the pedagogy in the New Media Design and Imaging program at RIT. The article discussed the focus and process of combining both graphic design principles with interactive design and development within a single course and program. For students to learn the problem solving skills and techniques of interactive design they must be exposed to and versed in the technologies of computer programming, 3D creation and mobile devices. Work examples and resources were used to support the article.
The International Design Archive Directory is a global information resource for materials about the history of design. It exists to provide students, teachers, writers, researchers, curators, scholars, practicing professionals and others with a comprehensive listing of "what's where" in public and private graphic design collections. This project is in conjunction with the Vignelli Center for Design and Professor Roger Remington. The project is currently being reviewed by AIGA and other design and archive organizations.
This project required two main areas. For the general viewer or researcher, a front-end search and browse section allowing for simple and clear interactions. For archive contributors and organizations, a robust database, submission and validation section is required.
Initially designed and developed by a team of students (team members), the application has now gone into its third major iteration with the continued support of Adam Miller at the Barbarian Group. Through international collaborations and user testing the site has been refined and simplified to capture design archive and directory information in preparation for a fourth iteration. As the current administrator and usability researcher the fourth phase will focus on creating a more dynamic and interactive user experience for user searches and browsing. In addition a more complex information submission process will be implemented for the back-end.
Hyehun is a South Korean award-winning fine art painter and book illustrator in need of an online presence to showcase work and exhibit information.
Create an online presence for an image-based portfolio with limited download requirements and multi language support. Develop a flexible Flash site that can be updated easily with multiple categories and images.
A minimal and easy to use design created to allow the images to be the focus of the site while supporting the look and feel of the imagery. This site uses the same XML backend engine as other projects to drive the content and interaction but is integrated with an entirely different design style and layout. Again no special software, tools or additional web knowledge is needed to maintain and update the site.
This site won the 2008 Design USA interactive Award.
Today blog tools and design systems can be integrated into numerous user experiences. With a national membership, Finger Lakes Rover Club was looking for a module tool system that would allow for a robust content management system to track events, updates and other resources for members and guests.
Create a custom interactive module system for users and a robust backend for the site administrator. Image galleries, pdf integration, calendar systems and e-commerce were required for the site modules.
A modular Flash, PHP and mySQL prototype system was created for the client. Each module is self contained and can be deployed on its own page or in conjunction with multiple modules. Again, this flexibility and ease of customization allow the client to participate in the design process and ensure that their message and desires are communicated to the end user.
AMI is a general term for a national utility system for measuring, collecting and analyzing energy usage and metering. Created for Energy East Corporation, this icon reflects the advanced technology of the system integrated with horizontal hash marks as a reference to traditional analog metering systems.
Created as a style guide and presentation template these designs build off of the existing logo and company’s mission of providing intelligent utility network solutions for advanced metering and smart grid management. These designs are formatted as standalone graphics and integrated into PowerPoint templates to increase ease of use and consistency across media.
Online tools can play an important role to increase the effectiveness of a larger and more complex application. In this project an application was needed to help the user understand how to apply specific solutions to a given problem. Kodak’s Cinescript application allows for a user to apply custom python code to a film or video to enhance its quality or correct errors during filming. To generate the code required for a specific problem, the user would walk through a set of questions and visual examples that represent common situations that are faced. After the user selects their options the application would generate the sample code that could then be migrated to the Cinescript application.
Create a portable multi-platform application that could incorporate text and image-based questions and interactions. The application must then generate and display the appropriate code based on the user’s inputs and requirements.
Built as a stand-alone Flash application, this prototype illustrated the power and flexibility that can be achieved without the overhead of a fully implemented desktop application. To increase the effectiveness and ease of use, a simple panel navigation system was deployed that allows the user quickly to go back and forth during the process. Large images and drag and drop interactions were used to assist the user while selecting the appropriate images for the problem. Utilizing an easy to user interface and clear visual representations of a problem can ensure that the desired results are consistently achieved.
To view full resolution images, click here.
"Designing the process of creation”
The Kodak CAP project is a Flash-based e-learning system with a SCROM and LMS connection to track the employees’ progress and test results. Kodak controllers and financial employees were required to complete all training and testing to meet Federal laws and standards.
Interactive design is not only about the end user or visual design; it is a critical part of the development and workflow process in large scale team projects. As a consultant for Kodak during this 2 year project I used interactive design principles to create a reusable system and workflow process that reduced the development and QA time by 40%-50% for a team of developers.
This complex project of over 30 modules required a development system that allowed for custom quizzes, interactive flowcharts and animations with SCORM and LMS compliance for a team of developers. The final system needed to reduce the development time, increase consistency and quality during the development, testing and end-user phase.
I created code based design elements that removed the need for timeline interactions and animations by the developers. Through simple adjustments in variables and preformatted elements developers were able to customize the pagination, quizzes, and interactive flowcharts in minutes and not hours. In addition robust templates were created to prevent errors and ensure stable connections to the SCORM and LMS systems. Two major templates versions of this system were created to maintain coherence with advancements in technology and Flash versions (ActionScript 1.0 to ActionScript 2.0).
In addition to the core application changes, a design and naming system were created to promote cross developer compatibility. This design system and templates dramatically reduced the development time and errors of each module. Process design for development is often overlooked by interactive designers and developers; this project is a showcase of how applying design to all parts of a project can not only increase productivity and quality while reducing cost.
This training program was designed for all Kodak individuals who operate X-ray devices, or may be exposed to the X-ray beam. Radiation safety training is a NY State mandate and requires certification of completion of the training that explains and illustrates the principles and effects of X-ray radiation.
Create and write the full text, audio script, assets and interactions that meet the NY State requirements for X-ray training. Develop a directory-based application to walk the user through the training, create interactions and quizzes that reinforce and test the user’s knowledge during the training. Based on the successful completion of the course and final exam, issue a certificate of completion or guide the user to revisit specific learning objectives that need to be completed or learned for successful completion of the program.
To assist the user and help information retention during training, a 3D character guide, interactive challenges and animations were incorporated. During e-learning experiences the user can become bored and frustrated with long text-based explanations and examples. To combat this and ensure that people with different learning styles can retain the information it is important to represent as much information in multiple formats. This project, winning of the 2003 Best in Show by Technical Communication Society, illustrates how audio, text, interaction and even fun can be used effectively to meet federal and state requirements in an online e-learning application.
To view full resolution images, click here.
The NexPress e-learning series was developed to educate uses on multiple areas of this printing technology. As in all e-learning applications, user assessment plays a critical role. Consistency in the development and implementation of an e-learning application is important to ensure the application meets SCORM requirements and functions correctly with the LMS (Learning Management System).
Develop a reliable LMS connections system between Flash and server technologies to track user progress and assessment. Create a custom Flash component that allows other developers and instructional designers quickly to implement quizzes and tests within the application.
To simplify the process of building a quiz, an internal Flash component was created that allowed the instructional designer or developer to quickly add or alter questions to the assessment section of the application. By removing the need for the designer or developer to access code, quality assurance and consistency between modules and with the LMS system was ensured.
Rocky Mountain Health Care Plans is a major health care supplier in Colorado. As part of a site restructuring their information architecture and interaction design required updating to achieve better performance and usability for consumers, partners and health care providers.
Redesign the member, provider and broker sections and site map and create new wireframe templates that would increase the usability and flow of critical information.
The existing site relied heavily on a narrow and deep structure, forcing the user to dig for critical information multiple levels down. This system didn’t utilize the pages’ space effectively and resulted in redundant navigational elements. To reduce the depth of the site a broader and shallower structure was created. By creating narrower columns, short pull-outs of critical information, and quick links on the main pages the user is now able to get a better overview of the content contained within the section and jump directly to the appropriate section. Translating user behaviors and web analytics into real changes of information architecture ensures the success of content delivery on the web.
SAP is a global business management software developer that utilizes e-learning applications to showcase and educate users.
This e-learning application required interactive content and animations to be completed within the guidelines of an existing e-learning design and development system created by Eagle Productivity. The use of animated screens of the actual software mixed with voiceovers and interactions engage the user and increase information retention by creating a more entertaining user experience.
Relish Catering required an updated web presence to showcase their capabilities, locations and offerings in an updatable and flexible format. A static content system for the web is no longer viable. It is critical that a site be updated to reflect recent achievements, additions or changes. Dated content through inattention gives a negative impression.
Create an easy to use interactive development system for an externally created design. Incorporate a content management system that would allow for updates and future changes to the site.
Using XML and small modular swf files for each section the final site can be easily updated by someone with very limited knowledge of Flash or web languages. The complex menu system and loaders can handle any number of changes, additions or subtractions to the site one their own. Due to the customized internal pages and budget, a pure content management system was not developed. In many cases a full CMS isn’t required to accomplish your goal. Using simple design templates, file structures and instructional design techniques alternatives can be found to meet the client’s goals.