FlagstaffBiking.orgApril, 2001
What I Did:
Co-founded organization,
Assisted with special events and advocacy programs, Content Management System (CMS), PHP, MySQL, HTML, CSS, Graphic Design, Shopping Cart, E-Commerce, Forum / Message Board, Payment gateway integration, Shipping module integration
Co-founded non-profit bicycling organization to help unify and promote bicycling in Northern Arizona. Responsible for web development and design from the organization's inception until May 2006.
The website was programmed to be extremely community driven. It was built as a Content Management System (CMS) so that multiple people and cyclists could contribute to the content and stories.
Color coding was used as wayfinding to help website visitors find their way through the multiple areas of the website. The design followed a fluid layout for best flexibility.
Other features of the site were: Membership / Shop, Sponsors, Polls, Photo Galleries, Guestbook, Classifieds, Forum / Message Board, News Archives, Newsletter Subscription, Trail Reviews, Columnists, Commuting Tips, Bike to Work Week, Online Calendar, Sitemap and many more.
-
Home pageView Larger
The home page was designed with "green" and bicycling in mind. A large sized bike photo randomly rotated with each page refresh and adapted itself to the liquid layout.
-
Home page with right column toggled offView Larger
A website visitor had an option to toggle / close the right column. This allowed more space for visitors with small screen resolution. Login occurred in the left column up top.
-
Home page after loginView Larger
After login the member was greeted with a "welcome box" and could then proceed to review their profile or administer content. The color coded top drop down menu functioned as main navigation.
-
Membership / ShopView Larger
The online shop made it possible for members to purchase clothing, accessories and membership.
-
Product detail membershipView Larger
The registered user could add a membership type and options to their shopping cart and then checkout to purchase.
-
PollsView Larger
The website also included a polls section that was used to gauge the community's opinions and interests in bike related issues.
-
Poll resultsView Larger
Displayed statistics on a particular poll question. The results were displayed in numeric and graphs. Additionally members could comment on the poll if they so chose.
-
ClassifiedsView Larger
A classifieds section was set up to help people recycle their cycles.
-
Gallery landing pageView Larger
The photo album had multiple features and was easy to manage. It could hold unlimited gallery sections and photos. Titles, descriptions and captions could also be added.
-
Gallery sub pageView Larger
A gallery could have multiple sub categories. Random pictures could be displayed below the category listing.
-
Gallery viewingView Larger
When viewing a gallery each photo would display a thumbnail image that could be clicked for an enlarged view.
-
Gallery photo detailView Larger
Layout of the enlarged photo detail page. The photo could be rated or even sent as an e-card to a friend.
-
GuestbookView Larger
The guestbook allowed visitors of the website to write a greeting or message to the FlagstaffBiking.org community.
-
PromoteView Larger
A promote page was setup to help promote the organization and website. The landing page included links to a "Link to us" and "Refer a friend" section.
-
Link to usView Larger
Included instructions, HTML code, banners on how to link to the organization's website. It also featured directions on how to add a RSS feed.
-
Refer a friendView Larger
Referring a friend was easily done via the referral form.
-
Trail reviewsView Larger
The trail reviews section informed riders about various trail systems in the Flagstaff area.
-
Trail system overviewView Larger
Provided maps and information about a trail system. When a specific trail name was clicked it would take the visitor to a detailed view about that particular trail.
-
Trail review detailView Larger
The specific trail review detail page included pictures and description about the trail. it was also possible to rate a trail.
-
NewsView Larger
The news page could be filtered according to a specific category (in this example Trails). It also included a link to news archives and to subscribe to the electronic newsletter.
-
Trail news articleView Larger
Layout of a news article in detail.
-
CommutingView Larger
The city section included a featured commuter section which listed various commuters and their bike commuting experiences.
-
Featured commuterView Larger
Layout of the featured commuter page. The page included a photograph and a story line.
-
EventsView Larger
The events section displayed a list of upcoming events.
-
CalendarView Larger
Displayed a monthly calendar that could be switched into Weekly and Daily views. It listed event titles that could be clicked for a detail view about that event.
-
Event detailView Larger
A detailed view about an event after selecting it from the monthly calendar.
-
Bike to Work Week (BTWW)View Larger
The BTWW was an annual event that had a dedicated place on the website. It included a schedule, promotions and event details. Participant could register their biking activity through a custom form.
-
BTWW Worksite ChallengeView Larger
The worksite challenge was the main competition during bike to work week. Its purpose was to motivate people to leave the car home and get to work by bike or alternative forms.
-
ColumnistsView Larger
The columnist section included columns written by four bike correspondents. Each of the correspondents could add stories and photos on their own using the CMS system.
-
Columnist's articleView Larger
Layout example of a columnist's article.
-
VisitorsView Larger
This section included information catered to visitors from out of town.
-
SitemapView Larger
The sitemap listed all active topics and sections dynamically from the database of the Content Management System (CMS).
-
Contact UsView Larger
Displayed the organization's contact info. The email address was embedded into a graphic for security reasons. A form allowed the inquirer to direct their message to the appropriate department.
-
Redirect screenView Larger
After certain form submissions the user would be presented with a redirect screen. In this "logged out" example, the wheel of the logo was made to spin using an animated GIF image.
Testimonial
I have had the pleasure of working with Thomas Nordstrom over the past four years as our solo website technical advisor and developer for the two websites, www.flagstaffbiking.org and www.summitvelo.com. Both organizations, Flagstaff Biking Organization and Summit Velo, were not only pleased with his work but felt the final product he delivered was exceptional. Thomas is a professional website developer of the highest caliber, who meticulously researches, formats, edits and proofs his work. I've received many compliments from our members of both organizations that they enjoy the format of our websites and remark on the user friendliness of our sites.
Melissa Grimes Executive Director