|
Dustin Kirk San Diego, CA |
(843) 276-3456 dustin.kirk@gmail.com |
www.dustinkirk.com www.rpi-polymath.com |
|
About Interaction Design Portfolios
Interaction Design portfolios present a big challenge due to the fact that so much of the work lies behind the scenes. Interaction Design includes creating use-flows, storyboarding, developing wire-frames, conducting user studies, iterative prototyping, presentations, negotiation, etc... The whole story cannot be easily gleaned from a series of photos and a paragraph of text. The artifacts presented in this portfolio are simply a snapshot of several projects that I have worked on. |
|
About
With a passion for entrepreneurship and an eagerness to start my own venture, Stacks was launched in the Summer of 2009 after two and a half months of design and development. During that time, I rapidly learned Objective-C via online tutorials and classes, sketched, prototyped, and tested iterations relentlessly.With full control over every aspect of the application, no corners were cut in the design or implementation. While the premise is simple, the application exudes attention to detail, and time was focused on creating a remarkable user experience. Every decision from the lighting effects, the elimination of additional features, to the experience of using the app with one hand was carefully crafted. While Stacks has yet to garner any big exposure, it has received excellent ratings in the iTunes App Store and continues to do well with primarily word-of-mouth marketing. Design Notes
With many other flashcard applications in existence, it was necessary to define a niche to own and dominate. Stacks has carved out a niche in high-end professionally crafted flashcards. All aspects of the Stacks' user experience, messaging, and visuals, help convey quality and trust.Gestures were used to naturally enable movement through the navigation and stacks. A large effort was made to cut anything out that would require the implementation of a button. There are no options. Everything that would require a setting in an options menu was eliminated or decided upon. For example there is no sound as after a while people would want to turn it off. Thus, the decision was made to eliminate it and keep the user experience at its absolute simplest. This also is the reason the option to swap the front and back side does not exist. Instead, stacks are created to meet the needs of most users. To get around the need for a button to access the help screen, it is shown only during the first use of the application and in context of the location where the gestures are needed. This has been a tremendous success and keeps the UI clutter free. Paper wraps with wax seals were used to indicate stacks that have not yet been downloaded. The seals both provide as a visual indicator, but also convey the high-quality of the stacks content. To stand out from other apps and maintain a refined image, all UI elements were custom made. Creative use of transparent .png files enabled the custom menus in the Stack Library, as well as provide the lighting effects in the main navigation. Links
![]() |
![]()
|
|
About
As part of the ongoing efforts to revitalize assets part of HP Software and Web Services, HP Scan provided an opportunity to take a new look at a legacy application go back to first principals. During the investigation period it was critical to fully understand the technical complexities involved in scan devices, scan drivers, and use cases. Investigations included studying basic operating system scan flows and analyzing use cases, and developing user stories using personas and market research. While the project was not fully realized, my involvement progressed through the wire-frame stage of design and provided a clear and simple path forward for the scan development team. Key tasks included getting up to speed quickly and identifying the most fundamental features needed and making them sing. Design Notes
The original flow was awkward to say the least. To simplify things, a single scan portal was designed to enable users to access all of the options previously available, but display them contextually.Upon loading, the user's attention would be drawn to the preview area, the first step of the scan flow. The 'preview' scan resolution was set based upon consumer research so most users would not have to do a second, higher resolution scan to get the desired output. A large preview area with zoom controls enabled users to be accurate in the selection of content. Placing controls in context was the primary means of reducing the interface clutter and enabling all of the same controls that were previously available. Once a user was looking at a single selection area, they would see controls such as changing the straightening and changing resolution. A control for adding new selections was placed in the tray containing previous selections. Controls for rotating selections were placed next to the selection in the preview area. Large print, email, and save buttons were moved to the lower right corner enabling the user's attention to flow in a Z pattern. Users' attention was directed to the top-left to preview, top-right to select, bottom-left to optionally add selections, and then to the bottom-right to finalize. |
![]() ![]() |
|
About
While copy machines are fairly simple, the simple task can be extremely challenging on devices with only a couple buttons and no screen. A software based copy application that could be run from any computer connected to the device was the solution. On this project minimal time investment was necessary and the solution needed to be drawn up quickly. Without knowledge of several key choices yet to be made on the project such as the exact features that would be included. A scalable design was necessary to adapt to potential requirement changes down the road, but had to capture enough concepts for the developers to begin architecting the solution. With no investigation phase, past experience played a key role in identifying the core use-cases and fundamental features which would drive the design forward. The end result was a much simplified and less cluttered UI which highlighted the key functions and incorporated usability best practices. Design Notes
When possible controls used on devices were re-used for consistency when it made sense to do so.Controls were grouped by function and frequency of use. High-traffic controls are colorful and located at the bottom-right where action buttons in Windows are typically located. A visual content-type representation is now shown to help set user's expectations of how light or dark the content will appear. The Text, Mixed, and Photo options are enlarged as they will be the first thing the user chooses. All important controls are placed along the bottom of the screen so the mouse can travel across quickly to adjust settings before making a copy. The modular design enables the removal of features without a drastic change to the Information Architecture. |
![]() ![]() |
|
About
Most people can identify with the frustration of printing websites. HP Smart Web Printing tries to alleviate that pain by enabling users, through a web browser plug-in, to select and print specific content from a website. Despite being distributed on the order of 800 million installs a year, users rarely found the unique functionality. With a primary focus on improving awareness and usability, a user feedback strategy was created. Covering areas from user forums, online feedback forms, a team blog, and formal usability studies, the feedback strategy propelled initiatives which resulted in the first public feedback to be collected since its inception. Results from a formal usability study showed just how bad the visibility and messaging was and provided insight to drive the design direction forward. Limited by time, technical, and business constraints, a balance was found with a new workflow that could be easily messaged on the new website and demonstrated in simple flash animations. The resulting design was implemented and released in the spring 2009. Check it out via the link below.Design Notes
The usability study made several issues very apparent. First and foremost, once a user installed the browser plug-in, none of the participants could locate the functionality. To address this problem, a more identifiable icon was created, and used throughout the HP Smart Web Printing branding. The repeated use of the icon on the website helped users identify the functionality within their web browser.Users of the legacy version also had difficulty creating new website clips. To improve this, the functionality was given its own button at the top of the Clip Book. Along with it, buttons for Preview, and Printing were also added. The scale and position of the buttons became the focal point of the Clip Book. By doing this, user’s attention was drawn directly to the functionality they are looking for. Links
|
![]() ![]() ![]() |
|
About
As a simple and fun exercise, I took it upon myself to study beach-goers and develop a product recommendation for the company Dantoy. Following the standard methods of an ethnographic study, I went to the beach with camera in tow and recorded events as they unfolded. By observing those on the beach and analyzing Dantoy's business, I was able to develop a proposal to increase beach toy sales.Dantoy's background
For over 30 years Dantoy has been creating high quality and environmentally friendly children's toys. Headquartered in Hobro, Germany, Dantoy is one of the largest manufacturers of indoor and outdoor plastic toys in Scandinavia and exports to over 35 countries.Dantoy's Challenge (hypothetical)
Dantoy has a long history of creating high quality durable toys for children of all ages. One of their strongest product lines has been its sand and water toys. However increasing competition is flooding the market with cheaper lower quality toys reducing their market share and margins in the sand and water toy division. With a reputation for innovation and new product development, Dantoy is looking for a way to regain its lost market share while maintaining the high quality product standards the company has held onto for years.Opportunities
Early ethnographic research revealed many opportunities for Dantoy. A trip to the beach armed with a camera in hand captured many of the idiosyncrasies and motions Dantoy's customer base goes through. The research showed the following dissatisfactions:- People forget toys when going to the beach - Parents may not have enough toys - Vacationers may not have brought toys - Low quality toys break Observations also revealed several characteristics that could provide opportunities - Beach community allows for word of mouth marketing - Interaction between kids creates desire over each other's toys - Beachgoers enjoy convenience Solution
To combat lower priced, lower quality toys, and share with their customers the value of durability and high quality standards, Dantoy is thinking outside the sandbox. Applying a user-centered approach, a new business opportunity has been identified for beachside toy rentals.Located in high traffic beach locations, Dantoy will offer customers an affordable way to experience their wide array of high quality and durable products. Customers enjoy many of the following benefits: - Travelers do not need to bring or buy toys when on vacation - Locals will enjoy lighter packing... managing the kids is enough work - Kids will no longer need to fight over the same toy - Customers can try before they buy - Forgotten items will not ruin a trip to the beach In addition to the benefits to customers, Dantoy receives the following benefits: - People may experience the quality for themselves - Visibility among a highly targeted set of consumers - Face to face interaction with their customers - Opportunity to franchise - Opportunity to communicate environmental benefits - The business will work in harmony with current product lines - Provides an outlet for building interest in new products - Takes advantage of word of mouth marketing natural to a beach going crowd - Creates room for growth through additional products |
![]()
|
|
About
As part of a semester long Master's project, our project team studied the use of web browser history. After conducting user studies on existing behaviors it was clear that a better solution could be created. Presenting browser history in a linear list as most browsers do presents a lot of usability problems. Among these problems include trying to locate a page amongst many pages with the same page title or cryptic URLS. While users may identify the page they visited with the time they saw it, this information is not provided. The user may also remember what the page looked like, but that is not provided as well. The Personal Zeitgeist presents the user's web browsing history visually and even supports having multiple browser windows open simultaneously or multiple tabs open within a single browser. With cross-browser support the Personal Zeitgeist is designed to be a one stop shop for finding anything you've previously visited on the web.Visualization Design
The Personal Zeitgeist is a stand-alone application external to individual browsers and catalogs history sessions from all web browsers used on the computer. As an external application, it is invoked via keyboard shortcuts defined by the user. Once open, the user is presented three panels overlaid upon their desktop.The left panel contains a list of websites. By default this list is sorted by 'last visited' enabling users to quickly jump to previously visited pages. Users may also search their browser history via this panel. The center panel contains a visualization of browser history. At the top, the date and time is shown for the period within view. Scrollbars on the left side of the panel enable the user to scroll to a particular period of time. The bars underneath the scrollbars show the level of browsing activity. The scroll bars can be set to specific periods of time using the buttons at the bottom. In the middle lies a time-stamped grid. Grey areas contain a set of pages visited within a single 'session'. A session starts by clicking a bookmark, entering a url directly, etc, and ends when the browser tab is closed, or a new address is typed in. Pages which are visited through a series of links are shown connected to each other. The right panel shows the detail for a selected page. A screenshot, title, and description is shown as well as the page's popularity on social bookmarking sites, the ability to 'star' the page, and an indication of how much time has been spent on the page. Below, is a list of websites which can be sorted by pages in the same browsing session, during the same period of time, or other websites throughout the history which are similar in content. Links
|
![]() ![]() |
|
About
A final exam for Electronic Coaching Systems was to design an application to be used in by medical staff in a small doctor's office. The application should work with the Wi-Fi network to provide patient medical records on the fly for up to 6 patients at a time. Patient's records can be recalled initially via a swipe of their HMO card. Medical staff should be able to access prescription, address, and make notes on a patient's record. The application will be run using a Blackberry device and should not require the stylus.Links
|
|
|
About
After looking for a contact management system that would meet my needs with a great user experience and finding nothing available, I wrote my own. Using ASP and an access database on a windows server, I started to design and develop Contact, a web-based contact management system.Designed at a time when static forms within Microsoft Outlook were the shining example of contact management solutions, Contact took a fresh approach utilizing the web, providing lots of flexibility, and minimized the work of data entry. Today companies like Plaxio have taken the same approach toward contact management and aspects of the design can be seen throughout many modern contact management utilities such as that on the iPhone. Design Notes
Contact allows you to locate and retrieve contact information by searching all of a user's data. Search across names, job titles, emails companies, etc... through a single input field. Contact automatically groups together related contacts. By analyzing companies, email addresses, tags, and other contact information, for any given contact, groups of other related contacts are also generated. Navigating contacts becomes easier than ever. You can also easily generate an email to a group of contacts, or even generate driving directions between any two contacts. Contact's note capabilities let you keep track of previous interactions with your contacts. Keep notes about birthdays, names of their family members, meeting notes, etc... The next time they call, you know exactly where you last left off. The icon system within Contact helps users quickly identify people making browsing search results fast and easy. Users may enter in as much information or as little information as they have for a contact. It supports multiple emails, phone numbers, and only shows what has been entered. This modularity keeps the interface clutter free. Integrating internet resources into Contacts, with no additional data entry on the user's behalf, Contact will automatically link to additional web resources such as maps, news, weather, stocks, etc... by utilizing the information available for a contact. Links
|
![]()
|