TRKBRD. Stacked User Inputs

Transcription

1 rob nero interaction designer mobile: skype: rob.nero Hello! I m seeking an interaction design position where I can use my diverse background in design, creative problem solving, attention to detail, and physical or screen prototyping to create emotional, meaningful, and temporal designs. TRKBRD The TRKBRD (trackboard) was the final project for my first year of the Interaction Design Masters program at Malmö University. What started as an idea for a new input device, grew into a physical prototype that gained international attention from Engadget.com, presenting at the IxDA s Interaction 10 conference, and a collaboration with a university in Morocco. See for more information and videos. Stacked User Inputs "Stacked User Inputs" is my final thesis at the Interaction Design Masters program at Malmö University. Stacking inputs is how I refer to the concept of combining a physical interface with a virtual interface, creating multiple layers of interaction. I have created a "SUI Cube" which has a single, touch-sensitive, one-button interface. See for more information and videos. Below are two of my latest projects...

2 User Interface Design Specialist Northwestern Mutual April June 2010 Designed and developed rich interaction web applications. Independently collaborated with diverse project teams, managing my time, work, and estimates to provide the most value to the project. Designed application that changed a 3-hour monthly process into 30 minutes for thousands of Field agents Introduced a "Satellite View" diagram to our project deliverable package, providing a high-level view of the entire application and all the interactions Developed all front-end HTML, Javascript, and Cascading Style Sheets for web applications Redesigned and rebuilt the Calendar Widget form field to enable customizations and input efficiency, providing cost savings to every enterprise application Co-designed & developed an enterprise-wide UI Framework to revolutionize how web applications were designed and developed Evaluated an early draft, and contributed an application example, to the book Designing Interfaces by Jenifer Tidwell (O Reilly Media) User Interface Designer efunds June July 2002 Founding member of company s irst User-Centered Design team, establishing design standards and methodologies for web applications. Strengthened team by training junior designer and presenting value of team to satellite of ices. Performed User-Centered Design tasks for projects: User Profiling, Use Cases, Paper Prototyping, Prototype Reviews, Usability Testing, Field Research, and Help System Design and Documentation Generated prototypes, navigation and interaction flows, and storyboards for web applications to reference for design reviews, usability tests, and hand-off to developers Engineered templates for paper prototyping web applications in Adobe Photoshop Created User Interface Standards and Style Guides for enterprise web applications Evangelized value and understanding of newly formed UCD team by presenting to multiple office locations, and aided in designing a brochure to distribute Worked with a diverse team of developers, technical writers, project managers, and product managers through all stages of product development Analyzed WebTrends reports and web server logs to assist in User-Centered Design research and web application design Web Site Designer efunds June June 2000 Primary web designer for intranet and extranet sites, creating visual design, information architecture, and code. Redesigned and developed intranet portal web site with increased organization and functionality Developed intranet web sites using HTML, Java, and Javascript Created entire visual design of customer extranet, including navigational interfaces and graphics Redesigned Flash and graphical interface for a Web-Enabled ATM prototype to increase brand consistency and visual aesthetics Education Masters of Interaction Design. Malmö Högskola, Malmö Sweden Bachelors of Business Administration in Management Information Systems. University of Wisconsin, Milwaukee IxDA Interaction 2010 conference presenter IxDA Interaction 2008, 2009, 2010 conference Copenhagen Co'Creation 2009 seminar From Business to Buttons Conference 2009 (volunteer and attendee) User Experience Week, Adaptive Path Discovering User Needs: Field Techniques You Can Use, Gomoll Research & Design Usability Professionals Association Conference 2001 Presenting Data and Information, Edward Tufte. 2000

3 PingPong Remix This world-wide collaborative music mixing experiment was designed for a national TV/radio campaign in Sweden, to raise awareness of refugees around the world. Myself, and teammates, were requested by an independent production firm to create an experiment to coincide with the one-week event. Idea Our idea for the experiment was to mix sounds on a global level, to create music with collaborators around the world. We would create a web site that would facilitate this process, and then use existing social networks to broadcast the idea and spread its message. Through initial research, we quickly found alternative sites that provided similar services of mixing music online. None of these services fit our budget and timeline, and all failed to allow us to deliver our message for the experiment. Wireframes With only 2 functions, uploading and downloading, we designed the home page to keep these functions front and center. Additional elements on the page were used to promote the event and display the site s global interactions. Development I was the only person on the team with coding experience. However, I didn t know a programming language that could provide our necessary functions. In one weekend, I gave myself a crash-course in PHP, learning enough of the language to allow us to continue with our experiment. Cities in Sweden Success During the entire event, we collected impressive statistics about the use of the site: 26 countries visited the site 142 cities in Sweden visited the site 149 total sounds uploaded 29 remixes created 99 artist profiles created Our experiment received numerous mentions on the radio from the campaign hosts, urging the audience to participate in the ping-pong. Two of the radio hosts even uploaded their own sound samples to the site. At the end of the event, 3 local music producers went through the final 29 remixes, and choose the top 3 remixes. These remixes were then played on the national radio station. All the remixes are still available to download at: Twitter was my inspiration when I proposed that we strip everything away from the site, and focus only on the core functions and core user. PRODUCERS (Musicians) CONSUMERS (Listeners) We concentrated on the musicians that would be creating music for the site. From experience, I knew that knowledgeable musicians would prefer to use their own software, which would allow us to reduce the functions on our site. Functions uploading sounds downloading sounds uploading remix downloading remix message other users comment on sounds/remixes in-browser editing in-browser recording real-time collaboration Time on Site Statistics Tracking users and usage on the site allowed us to understand what worked and didn t work on the site. I tracked the statistics and sound files throughout the one-week event, to fix bugs and adjust the design. In-depth analysis after the event gave me insights into how the site was used and which promotional channels were most fruitful Visitors per Day times Loyalty 1 time Used compromise, focus, and limitations to guide design decisions. Quickly learned new tools to bring idea to realization. CREATIVE PROBLEM SOLVING COMPROMISE USER RESEARCH WIREFRAMING CODE DEVELOPMENT SITE STATISTICS & ANALYSIS

4 Field Review Tracking The FRT application was developed to manage the yearly audits of over 5,000 Field Agents. Auditors travel almost constantly throughout the United States, interviewing each Agent, in accordance to Federal law. I was brought in to this project to redesign screens that were developed by someone else. The previous screens were labeled so unusable by the auditors that they refused to use the system for 9 months. Through detailed analysis of the requirements, I was able to fit 80% of the functionality into existing design patterns. This minimized the learning curve for the users, gracefully eased them into the new design, and saved money on the overall project budget. Old Navigation The existing design followed a Hub and Spoke design pattern, but did not create any value for the hub screen. The hub was only a list of links to navigate to each screen in the application and perform each task. The only way to start each task was by returning to the hub first. This constant jumping to and from the hub screen added no value to the hub and wasted time. Wireframes Detailed analysis of many factors was necessary in order to provide the most valuable redesign. These included: types of users workflow processes function uses and volume current design flaws & frustrations Wireframing functions and screen elements organized related elements and prioritized functions according to user needs and context. Success The new designs were a huge success with the auditors! Because of the volume of interviews the auditors conduct, every second saved by streamlining their processes is a big benefit. For one task they do each month, I shortened it from 3 hours to 30 minutes. New Navigation My new design kept the Hub and Spoke, but added more value to the hub and flattened the number of spokes. Every task was still possible to initiate from the hub, but the screens were flexible to the needs of the user. The tabs on the screen gave quick access to each of type of review. Instead of jumping back and forth in the old design, they could easily flip between tabs in the new design. The hub maintained their sense of place at all times and gave them context-sensitive functionality based on that place. This design focused the functionality to what was relevant for the screen they were currently using. 3 hour task became 30 minutes Reduced budget estimate by reusing design patterns and widgets. USER RESEARCH CONTEXTUAL ANALYSIS WIREFRAMING WEB APP DESIGN VISUAL DESIGN FRONT-END DEVELOPMENT

5 TRKBRD (trackboard) Why do I never have enough room for my favorite mouse when using my laptop at local cafés? The table is never big enough. My trackpad is never big enough too, or useable! There has to be a better way of providing cursor-control input to my portable computer. What if I combined the keyboard and the trackpad on the laptop, creating a large trackpad on top of the keyboard? Typing and moving the cursor are typically mutuallyexclusive actions. I could glide my finger over the keys to move the cursor when I m not pushing down the keys to type! To prototype my idea and realize it in physical form, I used the open-source Arduino micro-controller platform. Arduino is a small piece of hardware (photo at right) which allows connections to various types of input sensors and output controllers. The small board pictured can then be loaded with software you write, to control the various inputs and outputs. Documentation While testing ideas and constructing the final prototype, I took many videos to document the tests and results. I would often post the videos online to show my progress and share the results. TRKBRD XY Coordinate Success! (pictured) is the video I excitingly posted late at night when I had successfully calculated my finger s XY position for the first time. I wasn t expecting many people to watch the video but then a few blogs found the video and posted about my project over 115,000 video views MakeZine.com Engadget.com Prototype After many trial and error prototypes using different sensors, I came to the final solution that provided the best result: 2 lasers, 110 light sensors, and some simple algebra. Follow the steps below to read how it works. Each light sensor becomes flooded with light from the laser. 1 The left laser turns on. An optic in front changes the point to a solid plane of light covering the entire keyboard. Physically prototyped idea with Arduino platform to test interaction with users. Gained exposure from Engadget & MakeZine and presented at Interaction 10 conference. 2 which also lead me to presenting at the IxDA s Interaction 2010 conference. CODE DEVELOPMENT ARDUINO / ELECTRONICS When my finger touches down on the keyboard, it blocks the light from hitting the light sensors behind it, creating a shadow. 3 By comparing two XY coordinates, finger movement can be 7 determined. All of these steps are performed times per second to achieve a smoother cursor movement on the screen. X,Y 6 PHYSICAL PROTOTYPING VIDEO DOCUMENTATION Instead of trying to explain my idea with only words and drawings, I could now demonstrate the idea with a working prototype! With both shadows found and a little algebra, the XY coordinate of my finger can be found! Watch more videos at PUBLIC SPEAKING CONFERENCE PRESENTING 4 The software on the small Arduino controller reads the brightness value on each light sensor, one at a time, looking for the shadow of my finger. 5 USER TESTING Prototype in place on top of laptop. The left laser turns off, and the right laser turns on, looking for another shadow. A working prototype allowed me to get honest feedback from people on the street.