User Interface Design Pattern Library Project


Home

Work Distribution

Assignment 1
Proposal

Assignment 2
Revised Problem Statement
Persona Explanation
Personas and Goals
Task Analysis
Appendices


Assignment 3
Scenarios
Persona Revisions
Task Revisions
Comparative Analysis
Initial Design Ideas

Assignment 4
Prototype
Write-up
Appendices

Assignment 5
Write-up
Interactive Prototype
Presentation (ppt)

Assignment 6
Heuristic Evaluation for UC HIPO

Assignment 7
Write-up
2nd Interactive Prototype
Appendix

Assignment 8
Write-up
Appendix

Assignment 9
Write-up
Presentation (ppt)
Final Interactive Prototype

Revised Problem Statement
Building good user interfaces is no trivial task. Many UCB campus web developers lack time and expertise for UI design or focus too intently on creating a distinctive visual design for specific sites. Budgets do not include allotments for UI designers or usability experts. Even when a web application developer consciously focuses on user interface design, the resulting application can have usability, consistency, and interoperability problems.

We propose a user interface design pattern management system to provide basic UI components and conventions to help alleviate or at least minimize these problems. A user interface design pattern is a document that describes a UI problem, its solution, a rationale for that solution and examples of the solution.  The typical pattern format is text-heavy with few visuals and an unclear relationship between patterns.  Typical pattern libraries are also discoverable primarily by the pattern name rather than the problem the pattern wishes to solve. 

User Context
Our user research of campus developers suggests that a collection of patterns would be more useful if navigable by design problem and by nomenclature geared to the type of applications developed at UC Berkeley.  Campus developers would use our application to explore by specific problems or keywords geared to campus terminology. 

Scope of the Application
Our  application will support the following features:

  • searching and browsing by UI problem the user seeks to solve.
  • display the design pattern in a way that's more user-friendly

We also would like to add community features, such as commenting and annotation, to our application, but these are low priority for the class and will only add them if we have time.

Primary Persona
As our primary persona we chose to design for Hans, a developer who embodies our 'Swiss Army' type.  A Swiss Army type, for us, is a developer who does end-to-end development.  We chose a Swiss Army type to be our primary persona because we felt this type of user would be more likely to benefit from a collection of ui design patterns.  On the Berkeley campus, we found this type to be highly self-motivated and self-taught, interested in improving user interface designs, and more in need of resources and support.

The secondary persona we will consider during our design process is the Enthusiastic Manager. This individual is interested in producing quality applications that meet the needs of the client and reflect well on the team. This type of manager is interested in resources that support his team's work.