Portfolio
Incentive Power
The Company
Incentive Power is owned and operated by UpsellUSA Inc. From the start I was on the development team and I had some impact on the functionality and look of the site.
The Concept
Incentive Power was conceived over three years ago as an online sales and performance incentive site, to enable managers to build their own promotions according to their own needs. Participants log sales or other quantitative activities, and earn points that can then be spent in the iPoint catalog.
The product had not been properly developed. In the mean time, the competition for online sales and performance incentives intensified, with several other companies launching similar products, aimed at medium to large businesses.
The Solution
The development of Incentive Power started in February
2004. I and another developer were in charge. The joy of being on a
small team is that you can have a lot of impact on the finished product.
Incentive Power is a fully scaleable solution, with a range of subscription
levels to choose from. The site is designed for easy access by people
who aren't used to computers or the internet. It is compliant with XHTML
and CSS standards, with accessibility in mind. There are separate color
schemes for the public, manager and participant accounts.
Ready Set Go
The first re-branding was a pain, as many font tags and inline styling had to be taken out throughout the site, and there was no easy way of doing this. My good friend CSS made the job easier with the second style change, so the branding could take place in a few hours instead of weeks.
The Company
Ready Set Go is operated by UpsellUSA Inc for Microsoft. It was launched in late 2002, and I joined the team in early February 2003.
The Concept
Ready Set Go is an online sales and eLearning incentive site for Microsoft partners. Participants log sales or other quantitative activities, or take training.
The product had to conform to the latest Microsoft Partner styles, and was using old code and html font tags. It was important to keep a unique identity, so some compromises were necessary between the Microsoft approved styles and those of Ready Set Go as a standalone site.
The Solution
I read through the approved style documentation, and applied them but kept the Ready Set Go branding. Many of the resources were centralized for all of the promotions for easy update. The site has actually gone through two style changes, small tweaks to the color, masthead and links. The site is not fully XHTML and CSS compliant, as it still has some old code in it and some Internet Explorer-specific formatting. But it does pretty well for browser compatibility. We have added more user types and promotions to the service. There is statistical proof that sales figures can be directly relating to participating in our promotions.
Microsoft Partner University
Like Ready Set Go, the first re-branding was hard, because of all the inline font styles throughout the site. CSS made the job easier with the second style change.
The Company
Microsoft Partner University is accessible through Ready Set Go, an incentives site for Microsoft, and hosted by UpSellUSA. I built the first training, which was launched in February 2003, quickly followed by two others.It was my primary role to build the trainings and look after MPU until this year, when I moved on to development of Incentive Power.
The Concept
Sales and Microsoft partners can log in to Microsoft Partner University to learn about products, licensing, piracy, and so on, to earn points to spend in the catalog or to get some sort of accreditation. There are one-off sweepstakes, and other incentives to take the training to inform partners about products and services.
The product had to conform to the latest Microsoft Partner styles, and was using old code and html font tags. Like Ready Set Go, it was important to keep a unique identity, so some compromises were necessary between the Microsoft approved styles and those of Microsoft Partner University. It was also important to have an identity outside of Ready Set Go, to separate it visually from the sales promotions. The standard Microsoft hover menus do not work in browsers apart from Internet Explorer, and although this isn't a problem per se (on a Microsoft site), it did have some implications for accessibility when navigation is through JavaScript.
The Solution
I applied the Microsoft styles, and also created a Microsoft Partner University identity. The site has gone through two style changes, small tweaks to the color, masthead and links. The expandable menus were the main issue, as they weren’t browser compliant, so they were written in CSS with JavaScript controlling the display attribute.
Aviva Marie
I had never done a project like this before; it’s more feminine and asymmetric than my usual sites. I learned a lot about layers, margins and widths, and the different ways that browsers interpret them. The site was launched in June 2004.
The Company
Aviva Marie Holistic Spa is in Bellevue, WA, offering a range of beauty and health treatments in a gorgeous and peaceful setting.
The Concept
The site was to function as a combination of a menu of services and a business card. Aviva Marie is an exclusive, by-appointment-only spa, and the website should convey this. The client also wanted a way for visitors to get in contact with them through a mailer script.
Although the site had already been designed, it was by a print artist. It was heavily graphics, and the page design didn’t allow for overflow of the content. The design included a background pattern that was not possible without knowing the size of the viewing area, as it couldn’t tessellate properly, or required a large download. It didn’t have the right feel to represent the spa on the web. The client did not like the blocky appearance of a lot of sites on the web, and wanted a layered effect that seemed to break the mold a little.
The Solution
After several meetings and phone calls with the spa, it was agreed to keep many aspects of the original design, but subdue it. The site is XHTML compliant, and many of the graphical elements are CSS controlled, with layering in z and negative margins. The background was changed, and the colors tweaked to make it closer to the menu and business card, for continuity. The content area is scrollable, so not to disturb the rhythm between the pages. The text resizes, without destroying the integrity of the structure. I wrote a PHP mailer for the contact form.
Better Outcomes Psychotherapy & Hypnotherapy
The stamp was designed by Lois Tilbrook, and the three heads are based on drawings by Leonardo da Vinci. It is inscribed "mind, body, emotion". The site was launched in August 2004.
The Company
Better Outcomes Hypnotherapy and Psychotherapy is the business of Lois Tilbrook, a therapist associated with the NRHP, based in Cambridge UK.
The Concept
The client wanted a site that was calming and pleasing to the eye, but somehow inspirational. It was to appeal to the busy executive that needed a little help to cope with the stresses of modern life.
The client wanted a natural feel, with lots of photographs of scenery on every page. She liked my photography, especially of the Pacific North West, and requested use of them. I had done some work for her before, but as this was a separate business (from her artist studio) the client wanted a different identity for the site. The client wanted the landscape to fel expansive, and the layout clean and calming.
The Solution
had recently shifted my adherence from liquid layouts to fixed width - screen sizes are just too big to make the reading of content easy these days - and images also don’t do well being stretched. A hi-res image has been split and used on the masthead and along the bottom of each page, so there is expansiveness and a continuation of the vista. The site is built is XHTML and CSS, without using tables, and the menu is text for easy accessibility.
Diana Birchall
Since the update, the download speed of the site has improved dramatically. It is also more accessible as the font resizes in Internet Explorer, and the menus are text.
The Company
Diana Birchall is an author and screenplay-reader based in Santa Monica, Los Angeles CA.
The Concept
The client wanted a tasteful site, with East-Asian styled elements. She had recently written a book about her grandmother, pen name Onoto Watanna, who wrote for Hollywood in the early 1900's, and wanted the style to connect.
The client wanted an expandable design that was "classic" and would stand the test of time. She had plenty of content, just wanted it to look attractive. Links to places to buy the books were very important. The site was actually designed and launched several years ago, but there were more pages to add in September 2004 as the client's new book had just been published. Some content needed updating, and some taken out.
The Solution
the updates were finished in record time, and the client was very pleased. Through embarrassment at my old html code, too many images and a tabled layout, I rebuilt the site in 2006 with XHTML and CSS. The site is a lot more accessible, and will get better returns on the search engines.
NC Graphics
Although this is old work - done at least three years ago - I am still proud of it. It’s a testament to its scalability that the design is still being used today by NC Graphics.
The Company
NC Graphics is a CAD/CAM software development house based near Cambridge, UK. Their main products at the time were Toolmaker and Machining Strategist, which is now owned by Vero.
The client wanted an online brochure for prospective customers, and information and help for existing customers. As the online storefront of the company, it had to be professional and easy to navigate.
The client previously had a very small site from 1998, comprising of around 5 pages. There was little content specifically for the web, and they had a lot of information to communicate. Although there were some house styles that they used for the brochures and press releases, they had to be sharpened up and adapted for the web. The 3D CAM models built with the software were rather beautiful, and should be used as much as possible on the site. They also had lots of different products that needed to be presented in an attractive way. The site needed to be scaleable, so that it could be updated easily. It was important to ensure that updates could be made easily by central-sourcing elements, and that other people could do them who weren’t necessarily used to hand-coding.
The Solution
I chose DreamWeaver as it can save layout, menus and code fragments in templates and libraries, together with a good WYSIWYG interface. The site grew to 30+ pages in a short space of time. I adapted the PERL mailer script to save information from the contact form to a flat file for importing into Excel. I also designed many of the buttons in version 2 through 4, put brochures and press releases together, and designed and built the website.
StockGazing
This was the first IT startup company I have ever been involved in (I hope of many - they're fun), I am still rather proud of the site. Apart from being the wrong product at the wrong time, launched just as the American markets were taking a nosedive, it was a great product! I got to work with an awesome team, and felt we had achieved something. Now if we only did it the year before, sold it off...
The Company
StockGazing had a brief life between 1999 and 2000. It was the world's first International stock market trading simulation site, a startup company in Cambridge UK.
The Concept
StockGazing provided a number of tools to help users to learn about the international stock market. The main page consolidates a summary of a personal portfolio and trading history together with a message board, recent stocks and users' ratings.
The site needed branding. The client wanted a serious, financial feel with emphasis on the content. It had to be easy to use; the user can easily navigate to any page from anywhere. People were starting to get big monitors, and it was necessary for the layout to be fluid to take advantage of the space yet still be usable on an 800x600 screen, and the layout to be customizable. The client also wanted a promotion in Flash to stream over the web for prospective customers.
The Solution
I designed the logo to be aspirational, gazing at the stars. The color scheme was muted, limited to various blues and white. Although it looks a little dated now, at the time it was hot! All available space was used above the fold for the navigation (DHTML dropdown menus) and a messager alert window. The main page had summaries of the main areas of the site, so that the user can see how all their own stocks are doing, and how everyone else is performing in the simulation. It was a great idea, and it was designed so that one day it could be a real trading site.
SetGame Inc
I have maintained contact with SetGame Inc since 2000, and work on a variety of projects for them.
The Company
SetGame Inc is a games company based in Fountain Hills, AZ. Marsha Falco, the CEO, is the inventor of SET and Quiddler, two games that are popular with overachieving children..
The Concept
The site is not only the online catalog for the company, but hosts daily and weekly competitions and challenges for SET, Quiddler and Xactika. All the main areas should be navigable from the front page, but still visually attractive like the front cover of a book.
There were a few challenges involved in this site. Firstly, they had a definite house style and preference for a menu in a frame on the left hand side. Each game was to have its own unique style of page, yet still be integrated with the rest of the site. They also needed some help with their printed catalog, exhibition banners and promotional items.
The Solution
On the website, to hide the blockiness of the frame on the left I made some tessellating borders with graphic elements derived from each game. The front page has all games available, the cards fanned out around the logo and clickable via an image map. The logo was updated with a subtly 3-D colored effect, and the graphics were sharpened to give a shinier feel. I did work on the SET game area, and redrew the cards to be smoother and more attractive. As this is one of the most popular areas of the site, I felt that it was important. I made the banners in Illustrator, and vectorized some photographs of their box shots for big (20+ feet wide) displays. I also made a mobile to hang in toy shops, consulted for the Xactika card game, and designed their most recent catalog.
CSS is used extensively throughout the site to control the style and layout, separate from the content. Families of cascading styles and icons (to help ensure efficient code) are conditional on area and access rights.