Tag: o6web

The site for the Pine Ridge Condo Association was developed with communication in mind.

Prior to the site’s creation, all electronic communication between the neighborhood residents was handled via email, with no single contact list maintained. Members of the Board of Directors had the most accurate lists but, in the interest of privacy, those weren’t made available to the neighborhood as a whole.

The Pine Ridge web site, combined with an associated Facebook page, provided another location where communication could occur. Post to the Facebook page were automatically pulled to the site’s home page. Site administrators could then flag important messages as news, which would give them more space on the home page and make them available in an RSS feed.

The Pine Ridge home page, featuring a news announcement as the primary content with other posts from the associated Facebook wall made available down the right side.

When a user logs in, he or she is presented with information about their own house, other users associated with their house, and the ability to edit his or her contact information.

Additionally, each resident of the neighborhood was given an account on the site where they could log in to manage their contact preferences.

Their email address and phone number remained visible only to the board, but they could opt in to a mailing list based on the data in this user-managed directory. Any messages sent to a specific email address would be forwarded to all of the neighborhood homeowners. To protect against spammers, only messages from email addresses already on the list would be forwarded on.

By creating the web site, a place for static information was also made available. Documents such as the association bylaws – public documents but sometimes hard to find – were given a home on the site to be more accessible.

The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in October 2012.

The Library Orientation Exchange program at Eastern Michigan University had come to O6 in 2007 to turn their then-static listing of resources into a database-driven, searchable index. When it came time for a site redesign, they came back to us.

While LOEX’s “mothersite” was the primary focus of the project, much of the design was driven by their newer web property, the site for their annual conference.

The existing design for the conference site was deemed to be acceptable, however we wanted to take the time to create a unified brand shared across the conference site and the primary site.

We started by taking the horizontal navigation and locale-specific images of the conference site and adding in the LOEX branding. A spot for the LOEX Twitter feed was added to the home page to provide fresher content.

The template was built out in such a way that it could be used for each year’s conference by swapping out a couple images and changing a handful of colors.

With the conference site updated, that design was pulled over to the primary site. The colors were updated to match those of EMU and the locale-specific parts of the conference design were replaced by a section showing how users could interact with LOEX via social media.

The redesigned LOEX home page features their updated branding, a Twitter feed and links to their social media presence. It also utilizes Eastern Michigan University’s color scheme.

The LOEX resources system, originally developed by O6 in 2007, was also updated to feature the new design.

The LOEX Conference site was the basis for the primary LOEX site. The two share a basic template, with the conference site having colors and imagery related to the host venue.

The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in September 2012.

Photographer Heather Bostater came to O6 in need of a web site that could showcase her work and allow potential clients to reach her.

We brought in Nick Gorsline of Pulp+Pixels to create the design, utilizing his experience to build a layout in which Heather’s photos could speak for themselves.

O6 turned Nick’s design into Adobe Dreamweaver templates and built out pages that Heather could edit in Adobe Contribute, giving her control of the small amount of text content on the site.

A custom tool was created to allow for the management of the site’s photo galleries. The front-end for those galleries was the open-source Galleria system.

Other bits of development included an email form allowing Heather to be contacted through the site and a system for randomly displaying a customer testimonial on the home page.

The Captured Moments home page, featuring a gallery of selected photos and a randomly-selected client testimonial.

A gallery page in the Captured Moments web site. Any number of photos can be added to the gallery and reordered through a custom-built tool.

The custom-built tool for managing galleries on the Captured Moments web site. Images can be loaded into one or more galleries, with the image order determined on a gallery-by-gallery basis.

The Captured Moments web site includes a standard email contact form to allow potential clients to reach Heather.

The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in August 2011.

O6 originally completed the e-commerce system for Mythlogic Computers in August of 2007 and by early 2011 it was time for an update.

The first Mythlogic checkout was a single page system, with shipping and billing information entered on the same page and immediately submitted for acceptance or rejection. The same address had to be used for billing and shipping and only credit cards were accepted. Additionally, all shipping charges were a flat rate.

The checkout updates broke that single page down into four steps with additional options and validation.

Separate billing and shipping addresses could be entered at the first step. A checkbox copied information from the billing address to the shipping address if the customer wanted them to be the same. Another new addition was support for international addresses.

The second step took the shipping address that was entered and used the UPS and USPS APIs to determine what shipping options were available and what each would cost.

Payment options were the third step. In addition to the previously-employed credit card option, the new checkout system supported check, wire transfer, and PayPal E-Check.

The fourth an final step was a confirmation page, allowing the customer to review their cart before submitting their order.

The first step of the updated Mythlogic checkout system allowed for entry of both billing and shipping addresses.

The second step of the updated Mythlogic checkout system allowed for customers to select from a list of available shipping options.

The third step of the updated Mythlogic checkout system provided multiple payment options.

The final step of the updated Mythlogic checkout system gave customers a chance to review their order information before submitting it.

This front-end checkout system was also cloned into a back-end system that allowed Mythlogic employees to take offline sales.

The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in April 2011.

Note: O6 Web Services is not affiliated with, nor does it endorse any political party or entity.

MissiveMitten was the follow-up to the MDelegate site that O6 built in the lead up to the 2010 Michigan Gubernatorial election.

Following the election, the MDelegate team wanted to create a site for information dissemination in the mold of The Drudge Report or The Bean Walker.

Little design work was necessary, as a clone of the aforementioned sites was expected.

Tools were built to allow the site owners to manage the headlines displayed on the site, as well as additional links to news sources at the bottom of the home page. The tool for managing headlines allowed new headlines to be added or removed, with active headlines available to shift around a grid that represented the layout of the home page.

The MissiveMitten home page, showing a long listing of news headlines and related photos.

The headlines displayed on the MissiveMitten home page were managed through a tool that laid them out in a grid.

The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in December 2010.

Note: O6 Web Services is not affiliated with, nor does it endorse any political party or entity.

The MDelegate site was built in the lead up to the 2010 Michigan Gubernatorial election. It was part of a Republican grass-roots effort to share information and reach out to voters.

The basic site design was provided by the client, with O6 cleaning it up and fitting in content areas that hadn’t been accounted for.

The home page was centered around news distribution, with headlines pulled in from RSS feeds displayed and a space for posting news video hosted on YouTube.

In addition to static content pages, there was also a password-protected section where site users could see information about other users near them, including an events calendar, a map of their precinct, and other shared files. Users could submit their own events to the calendar through a form.

An administration system was built to allow the site owners to manage the dynamic elements of the site. Tools for managing users, moderating the event calendar, and adding/removing news feeds were part of the administration system.

The MDelegate home page, showing news headlines, a YouTube video, and a user login form.

The above text and image were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in October 2010.

Temple of Bloom flower shop of Raleigh, NC, came to O6 looking for their first corporate web site and an online storefront.

The people behind Temple of Bloom had worked with O6 before on the Capital Area Team Sports projects and were familiar with our methods. Similarly, we knew that many of the tools used on the CATS site worked for them and could be carried over into the new site.

Just as CATS used a database-driven, Flash-based navigation system, so did the Temple of Bloom site. As we knew that the client felt no need to abide by the “Rule of Seven” in these navigation areas, three different sets of nav items were used to make sure that all of the site’s content would be available, with the client able to edit exactly which links would appear.

General content on the site would be managed by the client using Adobe Contribute. The exception would be in the store, which featured a custom administration system.

Each store page featured a block of descriptive text, a photo, the price and an “Add to Cart” button. The first three of that list could be managed through the administration system, which also allowed products to be pulled from the store as needed.

Editing the site’s home page required a combination of the two content management methods. Three randomly-selected products that had been flagged as “featured” would appear on the home page alongside a block of text that could be edited in Contribute, giving the client a space for announcements while still giving prime space to their products.

One unique challenge of the site’s shopping cart was allowing shipping on different addresses to different locations for each product purchased. Shipping charges would be determined by grouping the products by address and date.

The Temple of Bloom home page included an area for promotional text and three featured products.

Product display pages on the Temple of Bloom store included room for a photo of the product, descriptive text, the price and a button for adding the product to the cart.

A unique element to the Temple of Bloom shopping cart was the ability for each item purchased to be delivered to a specified address on a specified date. Items were then grouped by delivery address and date to determine shipping costs.

Also constructed but never used was a “microstore” that allowed a small amount of product to be placed for sale through a streamlined checkout process. The microstore was intended to be used for the high-traffic Valentine’s Day season.

The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in April 2010.

The Clark Irrigation Design & Consulting project was a design and development project to create the company’s first corporate web site.

CIDCO had previously conducted an internal competitive review and came to O6 with a list of things they wanted to make sure were included in their site’s design. They wanted to make use of high-quality photos, a navigation system that could handle large amounts of content, two content regions on every page, and a place to highlight organizations that they were members of.

The home page includes a photo rotation, giving them a way to show off their projects. Those photos are repeated on secondary pages, with each section of the site assigned a unique photo to identify it.

The logos of CIDCO’s organizations are located in the right-hand column of the home page, prominently displayed above the fold.

Drop-down menus in the site navigation allow for any page on the site to be reached from any other page without taking up large amounts of space.

Three templates were created for each section of the site. One features a narrow right-hand column, one features a wide right-hand column, and one has no right-hand column at all.

The templates for the site were all built to be Adobe Contribute compatible and a screencast was produced to train CIDCO staff on how to manage the site’s content using Contribute.

The Clark Irrigation Design & Consulting home page, prior to content population. The large photo feature rotates to show the company’s work and the sidebar highlight’s associations the company is partnered with.

A second-level page on the Clark Irrigation Design & Consulting, prior to content population. An expanded drop-down menu is shown.

One final addition to the site was a login system for CIDCO’s previously-developed online filebox. The filebox was then integrated seamlessly into the main site, something that was intended when that application was first created.

The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in October 2009.

SeniorBrigade.com was a site created by the Michigan Attorney General’s office for the purpose of providing helpful information to senior citizens.

The project began in the summer of 2008 and went through several distinct iterations before the final launch.

From the start the site was developed to be managed using Adobe Contribute software and a set of password-protected tools for controlling database-driven features of the site.

A key feature of the site was a searchable events calendar. The calendar could be searched by date as well as by county in which the event would be taking place. Part of the interface for this included a state map where clicking on a county would take the visitor to that county’s events.

Also included was the ability to manage a set of “quick tips” that were displayed as part of the site template, with a random fact loaded on each page view.

The first design for the site was used for several months at the start of the project. It used bold colors and had a set of rotating photos to keep the page fresh. The “quick tip” was given high placement on the page and the events calendar was the primary piece of content.

By fall of 2008 the Attorney General’s office decided to move in a different direction with the site and a cleaner look was developed. A video message from the AG himself was the primary focus of the page design, with the calendar and quick tip pushed down. More introductory text was added, as well as a portal area.

Just before the site’s launch in 2009 one final design was put together, attempting to reconcile the AG’s office’s request for color with the cleaner design. The image rotation was brought back as part of the site’s header and the events calendar was moved up to a more visible position on the page. All of the previously-existing text was kept and two new content areas were added without dramatically changing the page size.

Our final design for SeniorBrigade.com. It incorporated space for all of the content the Attorney General’s office asked to be able to display, included a photo rotation, and brought back color that had been removed in the second design, but ended up never being built.

The tool for managing entries in the events calendar. Key to this system was being able to enter the county that an event would take place in, allowing for geographical searches.

The second design for SeniorBrigade.com. This design was intended to look more streamlined than the first. Focus was shifted from text to a video message from the Attorney General.

The first design for the SeniorBrigade.com site. As much of the content had yet to be developed, the focus was on big blocks of color and a set of rotating photos.

The final design was never built, as the Attorney General’s office handed the project off to a different group for the final launch.

The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in May 2009.

The 2008/2009 Capital Area Team Sports site update was our second chance to work on the CATS site and an opportunity to rework several systems we had previously built, factoring in information learned from over a year of the original site’s use.

The site was redesigned around a concept provided by CATS. The idea was to have as few hard-coded content sections as possible, breaking the page structure into completely flexible content areas.

To make managing the site content easier, new templates were developed to detect each page’s position in the site architecture and display appropriate content based on that position. This is mostly used in displaying the proper navigation for a page depending on what section of the site it belongs to.

The site navigation is Flash-based, a move we normally wouldn’t have made but an alternative navigation exists in the site footer, clearing up concerns about accessibility.

The password-protected administration section of the site was expanded to include a “Members Only” section, with a moderated user signup form created for CATS members to request access.

The CATS home page. The banner graphic, right-hand side image, and countdown clock are all customizable on a page-by-page basis. The left-hand side subnavigation is determined by the page’s position in the site file system.

Additionally, changes to some of the site administration tools were made to make the site easier to run.

The above text and image were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in February 2009.