|
User Interface Design Examples
| Project |
Screenshots |
|
Diana - Design Annotation Tool (Fall 2006)
My partner, Jeffrey Kalvass, and I developed the Diana application for our Computer-Mediated Communications course. Our goal was to create a visual annotation tool specifically for user interface designers who wish to receive feedback from their colleagues or peers regarding a design.
Currently, Diana allows users to upload up to five images of their design and then invite people via email to leave comments on their design. Commenters drag rectangles across the design to indicate which part of the design the comment refers to. This helps save time and reduces ambiguity.
Please note: With less than a month to develop Diana, the application is still considered to be in an alpha stage of development. Known bugs exist and the application currently only works with the Firefox browser.
Launch the Diana Application
 Diana Paper
|
View Larger Image
|
|
LightsOn Project (Spring 2006)
The LightsOn web application was the culmination of a semester-long project for Marti Hearst's Spring 2006 User Interface Design class. I worked with three other students (Ivan Tam, Lindsay Tabas and John Mark Josling) to bring this interface to fruition using a formal user-centered design process. This process included: user goal and task analysis, development of personas, creation of scenarios, and designing and testing prototypes.
The goal of the LightsOn project was to create a user-friendly web interface to relay information about a system of wireless lighting devices deployed in commercial or campus office spaces. This interface allows building managers to achieve granular control of lights and to react more efficiently to lighting maintenance requests. The interface also allows the individuals responsible for paying utility bills to monitor energy usage over time. Additionally, they will have the ability to intervene in lighting in the event of an energy crisis.
Visit the LightsOn website to read all about our process. You can also view our final LightsOn prototype to see how we used HTML, CSS and JavaScript to create a smoke-and-mirrors application for the purpose of usability testing.
Please Note: This prototype is best viewed in Internet Explorer and may not display properly in other browsers.
|
View Larger Image
|
|
Wireframe Prototype (Fall 2005)
Below is a screenshot of a low-fidelity prototype created as part of my Fall 2005 coursework at Berkeley. The prototype, which was coded in HTML and JavaScript, allowed users to perform several different scenarios as part of a second iteration of usability testing.
|
View Larger Image
|
Usability Examples
Cars4Causes.net Heuristic Evalutation (Spring 2006)
This heuristic evaluation was conducted as part of the coursework for the User Interface Design class in the spring of 2006. Cars4Causes.net offered a wealth of usability issues ranging from inconsistent link styling to poor layout. For this evaluation, we were asked to organize our recommendations around Jakob Nielsen's 10 usability heuristics.
Real Estate Website Usability Comparison (Fall 2005)
For the Search Engines: Technology, Society, and Business course, I worked with Debbie Cheng to evaluate the usability of the search function of three popular real estate web sites.
Insurance Application Usability Evaluation (2004)
This report, created for a medium-sized insurance software provider, provides detailed recommendations on ways to improve the usability of the company's existing application. It is organized into three main sections: a high-level usability scorecard, design recommendations and a detailed log of the heuristic evaluation. Please Note: This report has been modified to protect the privacy of the client.
Web Design & Development Examples
| Client |
Screenshot |
|
DMG Consulting LLC (2002 - 2005)
Donna Fluss of DMG Consulting LLC wanted an attractive and user-friendly website for her consulting business. She had several services that she wanted to highlight along with a list of publications that needed to be updated frequently. I worked with Donna to design a dynamic website that would display her latest publications, news and events. We also arranged an online store for visitors to purchase her major publications. Please Note: In October 2005 I discontinued maintenance of this site in order to concentrate on my graduate studies. As a result, it may no longer be representative of my work.
www.dmgconsult.com
|
 View Larger Image |
|
Performance Solutions International (2004)
Patrick Crilly of PSI was looking for a redesign of his existing website because it had an antiquated look and feel and was difficult to navigate. I worked closely with Pat to create a site outline and choose appropriate stock photography for his business. I then designed the site, submitted a prototype for approval and proceeded with the coding.
www.consultpsi.net
|
 View Larger Image |
|
British Car Part Restoration (2003)
This website was created for my retired grandfather who enjoys restoring British car parts for fellow enthusiasts. He needed a very simple site with the primary objective of showcasing parts that he had restored and providing pricing and contact information.
www.british-car-part-restoration.com
|
 View Larger Image |
Other Work
NaturallyUrban Caddy Project (Fall 2006)
As part of the New Product Development class at Haas Business School, I worked with four other students to design and develop a composting container for use inside the home. Like user interface design, the new product develop process that we followed was centered around the needs of the user. We started out under the umbrella of recycling and, based on user and market needs, decided to focus specifically on residential composting. Through interviews, observations and existing research, we determined that odor, convenience and cleanliness were the greatest needs not met by current products. Our product, the NaturallyUrban Caddy, addresses these needs with special mechanism that traps the compost and related odors within a biodegradable bag. The user is never exposed to the compost after it has been placed into the container.
Papers
|
