1. Kuali Student User Interface Overview
Introduce Speakers Introductions
Cindy Nahm: Assistant Registrar from the University of British Columbia. Currently member of the User Experience team.
Wil Johnson: System Architect from Florida State University. Lead developer on the Kuali Student UI/UX team.
From the University of California, Berkeley, Tim Heidinger is Functional Steering Committee member and currently the team leader of the User Experience team.
Rachel Hollowgrass – recently joined our team and currently resided also at the Berkeley campus, is User Experience Expert/Lead for the Kuali Student Project.
We are representatives from the Kuali Student UIUX teams.
Kuali Days :: Chicago May 13-14, 2008

2. Session Objectives Kuali Student User Interface Overview
User Centered Design
Google Web Toolkit (GWT)
Questions and Knowledge Sharing
Session Objectives
User Centered Design (provide you with an overview of the UCD methodology we are using)
Google Web Toolkit (GWT) (describe the toolkit selection process and selection critieria)
Questions and Knowledge Sharing (opportunity to interact/share information)

3. User Centered Design Kuali Student User Interface Overview
Partnerships
Kuali Student 'U' Teams
Fluid Project & Berkeley
Partnerships/ Collaboration Internal: UC, UX, UI Teams, UX Lead - Project Level
External: FLUID Expertise (consultative capacity) Berkeley Design  & UX Lead co-location
In the beginning, outside partners were critical because we lacked UX expertise. Rachel is co-located a couple days a week with other UCD folks at Berkeley (Sakai, Fluid etc.)‏
(Fluid is a collaborative project to help improve the usability and accessibility of community open source projects with a focus on academic software for universities.)

4. User Centered Design Kuali Student User Interface Overview
User Centered Design is a product development methodology based on actual user needs, abilities and perceptions.
UCD focuses on understanding:
Who are the users?
What are their goals?
What are their pain points?
What are their motivations?

5. User Centered Design Kuali Student User Interface Overview
Methodology
User Research
User Modeling
Requirements Definition
UI Framework Definition
UI Design
Development Support
Methodology
Informed by Alan Cooper's work
1.) User Research 2.) User Modeling 3.) Requirements Definition 4.) UI Framework Definition 5.) UI Design 6.) Development Support
I’d like to touch upon the concept of ‘Personas’ which is an integral part of the UCD methodology.
Definition: “A persona is a user archetype you can use to help guide decisions about product features, navigation, interactions and even visual design” – Kim Goodwin, Alan Cooper
Rubber Band Activity Here. Ask for Volunteer
Rubber band represents the user.
When designing large systems, you are often faced with trying to design for all these different people – what about this person or this person or this example etc.
The design mistake we sometimes make, is to stretch the “user”.
Personas solve the problem of designing for everybody.
Take a collection of people and narrow it down to a single individual (a representation) and design for this individual. This individual is the representative of the group and therefore this person acts as a placeholder for that group of people.
Personas put a human face on the amorphous “user” because they are based on actual user needs. They save time by focusing development toward real cases and away from unlikely “edge” cases.
Enables us to avoid designing for the elastic user (user that stretches to meet any design)
Personas:
Improves odds that we will see improvement over an existing system
Reduces guessing about users needs and wants
Based on real data we collect rather than made up information or inferences.

6. User Centered Design Kuali Student User Interface Overview
Tools
Wiki and Axure RP Pro 5
Google Web ToolKit
Tools - UC/UX - Wiki & Cooper - UX/UI - Axure - Hand off to Will for GWT

7. Google Web Toolkit Kuali Student User Interface Overview
Why Google Web Toolkit (GWT)
Selection Process
Selection Criteria
Wil's Stuff here

8. Google Web Toolkit Kuali Student User Interface Overview
GWT Benefits
Rich Interface
Cross browser
Internationalization support
Accessible
Scalable
Development
Deployment
Ease of use
Wil's Stuff here

9. Google Web Toolkit Kuali Student User Interface Overview
Simple GWT Example
public class HelloGwt implements EntryPoint {
public void onModuleLoad() {
final Panel panel = new HorizontalPanel();
final TextBox text = new TextBox();
final Button button = new Button("Click Me", new ClickListener() {
public void onClick(Widget arg0) {
text.setText("Hello GWT!"); }
});
panel.add(text);
panel.add(button);
RootPanel.get().add(panel);
Wil's Stuff here

10. Google Web Toolkit Kuali Student User Interface Overview
GWT Service Example
public interface HelloService extends RemoteService {
public static final String SERVICE_URI = "/HelloService";
// Generated helper class
public static class Util {
public static HelloServiceAsync getInstance() {
// generated code omitted }
// service interface definition
public String sayHello(String name);
Wil's Stuff here
public interface HelloServiceAsync {
public void sayHello(String name, AsyncCallback callback); }

11. Google Web Toolkit Kuali Student User Interface Overview
GWT Service Example
public class HelloServiceImpl
extends RemoteServiceServlet
implements HelloService {
public String sayHello(String name) {
return "Hello, " + name; }
Wil's Stuff here

12. Google Web Toolkit Kuali Student User Interface Overview
GWT Service Example
public class HelloGwt implements EntryPoint {
public void onModuleLoad() {
final TextBox text = new TextBox();
String name = "Joe Smith";
HelloService.Util.getInstance().sayHello(name, new AsyncCallback() {
public void onFailure(Throwable arg0) {
text.setText(arg0.getMessage()); }
public void onSuccess(Object arg0) {
text.setText((String) arg0);
});
RootPanel.get().add(text);
Wil's Stuff here

13. Questions and Knowledge Sharing Kuali Student User Interface Overview
Contact Information Cindy Nahm Wil Johnson Tim Heidinger Rachel Hollowgrass