Giving LJVCC Individualized Style

Challenge

The La Jolla Village Community Council is a group of neighbors who have been active in improving their neighborhood since 1989.  With all the development in the area surrounding UCSD, the La Jolla Village community has been instrumental in insuring that residents of the area meet and have a voice in what happens to their neighborhood.

LJVCC Neighborhood Link Page

The free service they use for their “website” http://neighborhoodlink.com/sandiego/ljvca/ contains their content, but when you are logged into the website, it’s hard to tell what website you are on and it’s hard to find the key content because there are too many ads and extraneous links.

Approach

I made the following recommendations to the group:

1. Investigate other ways to share the LJVCC info on the web that are also free.
2. Conduct competitive analysis to see what works for other neighborhood groups.
3. Organize Content and make it clear what the LJVCC has to offer.
4. Suggest using graphics that represent this particular area in North La Jolla.
5. Create and use a prototype page.

Results

A new La Jolla Village Community Council website was created.

LJVCC  “About Us” Page

A WordPress blog was used to host the website. WordPress allows graphics and videos. It also allows up to 35 contributors and allows editors to approve comments posted on the site.  Although it is free and simple to use, it doesn’t display ads on the pages.

Tabs were created for the following key content: About LJVCC, Meeting Announcements, & Newsletters.

LJVCC  “Next Meeting” Page

More content can be added at any time at the discretion of the blogs editors such as LJVCC board member contact Information, Regional Development Planning Reports, LJVCC’s History and past accomplishments, Local Links, Membership Signup Form and Newsletter Archives

Prototyping for Parent Connection

Challenge

After launching their new website http://www.sandiegoparent.com the Parent Connection needed an easy way for new members to find them.  Before sandiegoparent.com, the Parent Connections only web presence was through Scripps.org.

I was asked to help create sketches that would be used to propose a better way for the Scripps website to link to the Parent Connections site.

Approach

The approach was threefold:.

1. Interview stakeholders to clarify objective and tasks
2. Create a prototype
3. Make Recommendations

Results

Goals were agreed upon and stated clearly.  Parent Connection tasks were listed and categorized.  A quick drawing of changes to the existing page was created with Adobe Fireworks.

Scripps Portal Page

This screen shot could be marked up and used by the Parent Connection officers to communicate and visualize what they would like their page to look like on the Scripps site.

Recommendations were made regarding the use of a professional copywriter, specific content and links that could be added to the introduction.   Specific suggestions for the sandiegoparent.com site were also given.

Designing and Developing the NAV I/O Client

Challenge

Satellite communication test engineers need a NAV I/O (Navigational Input/Output system) to monitor large quantities of data, in real-time, from multiple sources such as; ship antennas, shore antennas, a ship simulation roll tower and communication terminals on both ship and shore.  The challenge is to present this information to the test engineers in a way it could be easily viewed and recorded.

Approach

Realtime Microsystems built a brand new system with the following aspects:

Paper Prototype

Modular Client/Server Design: Client/Server architecture that separates the data from the presentation and allows the GUI to be updated without changing any of the hardware or software on the server sub-system.

Interactive Graphic User Interface: The client sub-system runs on standard PC and Windows environment user interface.  The users are all currently familiar with this computing environment.  The NAV I/O users will be able to control the display and recording of the data through this window.

Operating Systems: The server used the Microsoft Windows CE Operating System which allows the software to be developed in languages C++ and Visual Basic rather than obscure real-time languages.

Software: A structured software engineering process was followed and clear documentation provided.  The software was developed using Microsoft  C++ and Visual Basic.

Hardware: The new NAV I/O would maximize the use of commercially off the shelf (COTS) components which would lower up front engineering cost and ensure replacement parts be available in a reasonable time frame at a reasonable price.

Ellen was responsible for all project phases of the client software such as requirements, test plan, design, test procedures and the user’s guide.    Paper prototypes were used early in the project lifecycle.

Results

The NAV I/O  software displays Antenna and Roll Tower Angles & Attitudes via analog display, digital display, recorded data.

NAV I/O Screen

Satellite engineers can control many display and recording intervals, modes & more.  Graphical display tools used: Gauges, Stripcharts (roll tower angle plotted over time).  Status Bar shows what’s on & off.

save screen

Designing a Web Form

In January of 2008, I was asked to sit down in front of a blank screen and draw a really great web form. I thought a form that you could fill out and then get a free iPhone would be fantastic, so that is what I dreamed up. Here’s what I did:

Goal
The purpose of this page is to collect the mailing address from the winner of an iPhone. The winner should know: what to do, where they are in the prize redemption process, who they are giving their information to, and what they will get in return.

User
The user can be anyone who uses the web, including those with limited accessibility such as vision or hearing impaired.

Page Layout Notes
• A simple layout using shapes and colors was created to delineate 4 basic web page screen areas.

1. logo and branding area
2. page title area
3. user input area
4. display area

• Dark colors and bold text were used to emphasize the current step in the prize redemption process.

• A fixed layout, not liquid, was used to provide a consistent user experience.

• All font sizes are adjustable, not absolute, so text size can be controlled in browser.

User Input Notes
• Current standards and conventions were used for data collection. Most users are already familiar with the “combo-box” and the “text input” form controls.

• The user shall be able to use keyboard only, tab between fields hear “alt” information for screen readers or voice recognition systems

• Use of external Cascading Style Sheets (CSS) is recommended for layout, ease of maintenance, and use of relative font sizing.

• The information typed into the form should persist even if the user skips to another step. If they go back to select a different prize, they shouldn’t have to re-type their address.

• Client-side form validation is recommended to inform user if the fields are blank or incorrect before sending to server.

• All web pages and text box labels should be titled.

Post Script
The “law of attraction” is working well. Since designing this form I have actually received my own free iPhone! Now all I have to do is design a form to cover my AT&T service and I’ll be all set!

I would also make a few more changes to my form, based on lessons learned in Luke Wroblewski’s Web Form Design workshop I recently attended.

1. Use “top aligned” field labels. This will streamline the “path to completion” and allow space for future changes to either the label or field size.
2. Remove the red asterisk’s that denote required fields. Since all but the second address field is required for this form, mark the second address field “optional” instead. In general, it’s best to eliminate optional fields whenever possible.