Design Presentations (CLE 1)

Worked on Site Settings: Import/Export Screen.

Here's the UX Kit.
This week concludes the first two-month long project under the UX Improvement Initiative. The project will remain in "Pre-Closed" status for another two months for post-production support.

Topics covered this week include:

• Created two gateway page templates with related variations showing authenticated vs. unauthenticated view of site gateway (see screens for clarification)
• Completed the "Add Tools" UI
• Made lots of small tweaks throughout!
• Prepared an initial round of storyboard documentation

Worked through the My Account area and cranking out visual design.

Topics covered in this design include:

• Completed the My Account area (consolidated Account and Preferences)
• Fleshed out remaining screens for Creating a Site via: Build New, Import, Template, or Copy existing.
• Applied visual design to many of the screens (about 75-80% finished)
• Finalized the visual queues and interaction structure around the Dashboard --> Site --> Tool relationship
• Touched up a few subtle details

See how sites are managed using the Sites widget and tool.

Topics covered in this design include:

• Searching for sites
• Joining sites
• Editing or managing "my sites"
• Two alternative concepts for sites searching and joining
• Understanding some fundamental interaction design patterns (hub model)
• Seeing the relationship between The Site, Widgets, and Tools

To learn more, take a look at this week's flash presentation.

Companion screens below:

Not sure why the gallery function displays the images in a backwards order, but I numbered them in order of how they're presented in the video. Hope this helps.

10	9	8
7	6	5
4	3	2
1

First round of visual design.

No video this week guys (sorry). But I do have some juicy eye-candy.

From a visual design perspective, my goals were as follows:

1. Create a modern (web 2.0) look and feel.
2. Create a skin that's fairly easy to dissect and modify. In other words, the visual elements should be simple, but not so simple as to lose all personality.
3. Create a concept that takes a step forward in branding Sakai. As of today, Sakai lacks any visual ownership beyond its logo. What I tried to do is expand on the playful elements (strokes of the type and symbol, colors, etc.) while still retaining an enterprise application UI.

The initial stages of the visual design were actually formed during the interaction design work I had presented earlier. I added color, refined various elements, and introduced some conceptual messaging (meet the Sakai Owl).

Important: Please do not focus too much on the content in the widgets. While the content suggests a social network environment, it is only a concept and used purely to foster the visual design exercise.

Also, it's worth mentioning that this visual design is prepared primarily for default Sakai. Your campus will have the option to customize the style to meet your branding requirements.

Enjoy!

Take a peak at how Sakai's new roles and permissions system works.

Topics covered in this design include:

• A completely new and robust way of handling roles and permissions!
• I added a dynamic hide/reveal option to the sidebar
• Rearranged where colors, styles, and other customization features are located
• Added a "styles" option that let's users pick between different pre-defined moods (layout not included)
• Did some light tweaking throughout

To learn more, take a look at this week's flash presentation.

*Companion screens below:

*Screen revision updates are included in this batch so you'll want to hunt through and find the screens that relate only to the video presentation.

Take a look this week at how the basic template idea is shaping up as well as how users can add widgets to their site.

Topics covered in this design include:

• Changes to the copy site screen
• Exploring templates a bit further
• Adding, viewing, and removing widgets
• Modifying the page layout

To learn more, take a look at this week's flash presentation.

Companion screens below:

Change Layout wo/ Sidebar	Change Layout w/ Sidebar	Widget Added
Add Widget to Page	Add Widget - Alt View	Predefined Templates
My Templates (conceptual)	My Templates	Copy Site (modified)

Here's the first rendition of the "Creating a New Site" flow. Also, I cover the Site Settings area and propose a few new ideas!

Topics covered in this design include:

• Create a site flow
• Proposed template concept
• A wizard-esque widget called the Site Assistant that helps new users create their sites
• General site settings which allows site owners to change colors, add a logo, etc.
• Exploring how and where the user's profile should fit into a site
• How a site might present its members in the site settings area – possibly only available to site owners.
• Briefly discuss my plans for a robust permissions system
• A feature rich site data import/export feature
• And last but not least, a way for site owners to copy an existing site while doing a little site management

To learn more, take a look at this week's flash presentation.

Also, don't forget to checkout the companion screens as you watch the video.

Enjoy!

Dashboard (Start Here)	Create a Site - Course Confirmation	Create a Site - Course Form
Create a Site - Non-Course Form	Create a Site - Sneak Peak at Templates	Create a Site - Select an Option
Site Settings - Copy Sites 3 (Error Message)	Site Settings - Copy Sites 2	Site Settings - General
Site Settings - My Profile	Joe's New Site - Site Assistant update	Joe's New Site - Using the Site Assistant
Joe's New Site	Site Settings - Copy Sites 1	Site Settings - Import/Export
Site Settings - Success Message	Site Settings - Add a Member	Site Settings - Members Tab

This week was spent laying the groundwork for the CLE. The design work covers:

• Dashboard views vs. site home page views
• Re-thinking how users navigate sites
• Re-thinking how users access tools
• Putting more thinking and detail into widgets (synoptic tool)
• Setting the stage for more efficient and robust preferences, permissions, and other configurations
• Getting jiggy with Web 2.0
• And a few other goodies...

To learn more, take a look at this week's flash presentation.

Also, you may want to download these screens as they'll be the focus of the presentation:

Dashboard	Site Home Page

Note: All designs are for "presentation only"! Any icons, photos, or other copyrighted materials used were done so for purposes of mock-up and will not be used in the final designs. Also, keep in mind that these designs are wire frames (rough sketches) and colors, style, etc. were intentionally omitted.

Enjoy!