Portfolio & NetSuite Web Sites
Here are samples of a few of the sites I have created or worked on over the past eleven plus years. Before and after shots are shown when a makeover of an existing site was developed. All of my current work involves NetSuite Web Site set up and customization. (Sites with a use NetSuite.) Current projects include: www.AudioFly.com, www.MFASCO.com, www.ClublifeHeadphones.com, www.MokiElectronics.com, http://www.OneSourceIndustries.com and many more. Also see our MWT Mobile Bundle for NetSuite SiteBuildera>.
I work well within the limits of design, daily maintenance procedures and site objectives. Give me a call for a free evaluation of your NetSuite site. Though I am located in Bordeaux I have clients all around the world. Working via phone, Internet and video conference allows me to understand your needs, share graphics and build a great web site. All the below NetSuite web sites use Advanced Site Customization.
Contact MVL Design by calling at 302.304.8404. Click to call MVL Design at 302.304.8404
Beachstore wanted to move their existing Yahoo store over to NetSuite. Many of their product descriptions had product images embedded in the HTML that needed to be kept. The left navigation needed to look distinctive yet be updateable the normal NetSuite way. The home page had extensive customization requirements.
Our Solution: For the home page I created custom code that randomly selects from a group of images and featured items to display at each load. This way the home page is always different. Additional featured items are up at the top of the page. Item and category layouts have cells that change based on the type of item being displayed. Custom features like last item viewed, and items selected for the site-wide compare are on the left. The Item detail page morphs into a different layout based many custom item fields and the state of the existing item description HTML. The shopping cart was customized so the product navigation appears on the left which is appropriate in this new, wider web site
Our Solution: Taking the mock-ups sent by their graphic designer I built a great NetSuite web site. The left side navigation uses custom tags so that, though it looks the same in each category, the links are quite different. Each page uses downloadable fonts that the latest web browsers support.
Find a Local Dealer uses a custom SuiteScript Suitelet to gather information from 1000s of dealers in their NetSuite database and display the requested information. It even displays the information for dealers that have multiple locations. Ask us about how we can do the same for your site.
A scanner manufacturer needed to create multiple web sites using NetSuite multisite feature. We've done dozens of NetSuite Multisites so know just what to do. Ambir needed a easy way to filter a product listing based on technical criteria and a robust document / file search.
Our Solution: Taking the mock-ups sent by their graphic designer I built a great NetSuite web site. The top dropdown navigation uses CSS3 transitions for the animation. The Add to Cart process on the item detail page is a two-step process that allows for additional items to be added to the cart at the same time as the main item.
Since this was a third site I've built for them, much of the code was reused from the other multi-site templates
A distinctive look, that included special fonts and graphics was the order of the day. Plus, a hard-to-image layout of customized designs for each jar that was a separate item (not matrix item) was also needed.
Our Solution: I started on this site a few weeks after fonts.com started to offer downloadable web fonts. The specific font their designer choose happened to be one of their fonts. Perfect. I created a method of using categories to display items in a specific arrangement that is a cross between our "Faux Matrix" items AND custom subcategory listings. All this is wrapped up in an easy-to-maintain custom code, explained simply with out screenshot videos.
A projector manufacturer needed to create an informational website with a specific look. They needed a Dealer Search that uses data contained in their NetSuite account overlaying a Google Map. They also needed a visual way for their users to determine projector placement based on screen size and projector type.
Specialized information is provided on the item detail page, based on specification provided in custom item fields. No matter where you are at, clicking on a Request More Information button brings in a custom contact form that sends information right into NetSuite.
Masterline manufactures and distributes products for water skiers. One of their most popular items was a custom-made and engraved handle. Their original NetSuite site was a bit simple and forced them to create a new item each time they needed to manufacture a custom handle. They wanted something easier for them, and simple for their customers. Plus the site needed a new, edgier look.
Our Solution: Taking their design elements and desires we worked together with the client to come up with a more modern design for the site. To solve one of their big issues with their items they only needed to use one of our Faux Matrix item methods. We also coded the item detail template so that when a matrix item is selected, if there is a custom image in the child record for that matrix option, the main image is swapped out. Custom drop-down navigation uses CSS 3 for the animation.
Our Solution: Though images and backgrounds can be reused when bringing a site over into NetSuite the HTML and CSS should be written just for use in NetSuite. We've done this many times and have our process down.
Changes to their old site involved custom SuiteScripts to read and display competitor pricing on some items' detail pages, custom dense item list views which show thumbnail images on on-hover, and custom top drop-down navigation for the whole site.
Pro Therapy Supplies
Pro Therapy Supplies web designer had a whole slew of features he wanted added to their new NetSuite web site. The nature of three of their main tabs is that they numerous sub-categories but no ability to have sub-sub-categories. So how to create the desired drop-down navigation when you have so many categories? Matrix child items have different model #'s and UPC codes; how can those be displayed. Those requests and more...
Our Solution: The home page has a main rotating image that links to separate items and does not use Flash. Very easy to update with simple text. Other parts of the home page are made to be easily updated so the page stays fresh and current.
The top drop-down navigation was handled an interesting way: a initially the main or most common categories are shown in a list with that ability of the users to change the drop-down display from an A-Z list. It really works well for their site.
On the item detail page there are options for extra-large Mojo zooming, main images changing when a color matrix is selected, displaying the model number and upc code of a selected child item, optionally displaying videos, specifications and more in a separate sub-tab, displaying a marketing icon over an thumbnail image as per a check box, and much more.
One of the nations largest assembly tool distributor wanted to use their NetSuite account to build a web site that they could easily manage over time. It had to allow them to display and sell many items that are very similar in features. On the item detail page it needed to show up to 50 different technical features and with the click of a tab, display and allow purchasing of all spare parts for that item. I live for such customization challenges.
Our Solution: The home page is a real HTML page that is very modular, allowing for easy changes over time. The category list works as designed and the item list shows all items in a series, even pulling in a few specifications from one of the items to show for all. The item detail page is amazing. Not only can they easily add related items but also associated items and spare parts. The spare parts show in their own tab, along with an exploded image of all the parts, and multiple spare parts can be purchased all at once. A detailed tool repair form, which also fills in a printable form, finishes off the site.
Our Solution: The home page is a real HTML page, using a few of our image replacement techniques to make it appear different on each load and over time. The item detail page has up to five tabs, including one for reviews. Multiple extra large images are available for each item, links to the main category, optional specifications and drawings and scrollable boxes for related items and upsale items
For every page of the site there are category-wide featured items. On the right column is a very customized shopping cart portlet: it displays the items in the cart. How cool is that!
Finally, the site has a black background, even into the checkout process and my account areas.
A current NetSuite user wanted to start using their NetSuite web site. Their graphic designer came up with clear mock-ups of the home page, category list page, item list page and item detail page. A moderate amount of custom features was requested, including image elements and pricing that display only when certain customers were logged in. The site is navigated by item or by brand
Our Solution: This was a joy to create as the client was so clear on what they wanted. Though it took a bit of creativity to get the look and feel into NetSuite's template the site went together very quickly. On the category, item list and item detail pages various elements only appear if custom fields are filled in with text. Custom code was written that allows for the special image elements and pricing to display for only a certain category of their users.
One of the nations oldest plastics shops wanted to move their site to NetSuite. Simple and clean look with unique shipping requirements. They sell sheets of plastic that can be cut to size. Not only did the cutting information needed to be included but also a cutting charge only when appropriate. A way of determining the correct shipping to offer also needed to be developed.
Our Solution: First the site was created, simple and clean. Custom code on the shopping cart looks for the required elements and asked for the user to input the largest size of the sheet they are receiving. That information is used to determine what shipping method to offer to them. Hijacking the Proceed to Checkout button and adding custom cookies allows the shipping method page to retrieve that information so they only see appropriate shipping methods based on size and shipping state. Custom code on the Review and Submit page double checks everything. Cutting charges are maintained with custom code on the shopping cart page even to the point that if someone removes an item that has cutting charges associated with it then those charges are also removed from the cart. Smooth.
Institute of HeartMath store
The Institute of HeartMath store had very unique shipping requirements. I can't go over them all but different shipping methods were allowed based on specific items in the shopping cart, amount in the cart except for certain items, what country and type of address the item was being shipped to, plus a few more. The homepage was to have fading images with a stop, forward and backward buttons. Some of the items needed to be used in a NetSuite multi-site with totally different descriptions. Finally, extensive use of Information Items was called for.
The type of creative, custom programming that was needed to fulfill the shipping requirements is what I am good at so though it was not a piece-of-cake to do it was created in a timely manner. Surprisingly modular, the code that controls the shipping methods is easy to update.
SpaEquip is the premier distributor of spa equipment to everything from large hotel chains to individual spas. They asked us to move over their current site's look into their NetSuite site. However, that look needed to slightly change and navigation totally change, when a user from a partner corporate site logged in by coming from a partner URL. Also, that user was to only see specifically approved color selections, a sub-set of all the colors offered for selected products. Oh, and the add to cart button text needed to change for the partner corporate sites, too. In other words, the one NetSuite site had to act like many different sites.
Our Solution: Getting the desired look fitting into NetSuite was done first, it is what we do best. We started working on this site before System 11 so a lot of DOM walking was in order to get the functionality desired. It worked but wasn't ideal. NetSuite System 11 changed all that by providing us with better tools to implement the design.
Password-protected, corporate partners sites with unique looks and product mixes have been added. The add to cart button changes based on the site you are in and on if the product has options. In-stock items are treated differently than drop-ship items as far as displaying inventory and shipping times. If an order has items shipped via truck then UPS shipping is automatically removed and a detailed message is delivered. The list of functional customizations goes on and on.
The had a good set of mock-ups they desired to get into NetSuite. As a Canadian company selling mainly in the USA they had currency and shipping default issues that needed to be fixed. Different item detail page templates for their different types of items needed to be created.
Our Solution: Their graphic designer had good mock-ups for me to go by. I created the layouts and templates and they filed in the text. A bit of custom coding to overcome the issues they needed addressing and the site was done. End with a few screenshot videos to help them learn how to use and update the site and they were in business. Finally, when creating a shipping address custom code switches the address default to USA. If you are a Canadian NetSuite use that sells mainly to USA this is a big deal. So is their awesomely small RC airplane. Watch the videos of it flying in a heavy wind on the beach right from their site!
Christmas Done Bright
CDB manufactures and sells high quality lighted lawn ornaments. There site design required a black background for all product images, and the colors red and green for everything else. Current product and customer data needed to be maintained while moving over to NetSuite.
Our Solution: Moving over all product data into NetSuite can be a big chore. Our NetSuite partner, InnoVergent, accomplished this task for CDB. A site design was developed by us to their specifications and a few of our unique customizations were added. The end result... a site targeted specifically to their customer base that is easy to use and update.
InnoVergent is a NetSuite partner. They specialize in the back-end set-up of NetSuite and in house training. MVL Design does the front ends for all their NetSuite clients. We recommend you call them for all your NetSuite needs that we can not fulfill. (like importing product data into NetSuite)
For their web site we supplied the conceptual design, HTML, CSS, SEO and graphic expertise, actually everything, to quickly build their web site in a search engine friendly way. Though this site is external to NetSuite their contact us page (shown) uses a form right from NetSuite so leads populate a customer record automatically. (Hint: it uses an iframe to grab a custom NetSuite online customer form.)
Maharishi Ayurveda Products
MAPI.com contracted with us to maintain their large shopping site and bring it up-to-date technologically. When we took over we found a really great site inside a huge mess. The site had over 1600 pages but less than half were live. Something as simple as a price change had to manually be done on over 10 pages, some of which may not be live. No one knew for sure. Every link went thru a CGI script so no link checker could tell what page was real.
The home page was everything a shopping site should not be. The shopping cart malfunctioned much of the time. Navigation was less than stellar, at best, and totally confusing or unusable at worst. Their best informational pages about their products were not even active! And the one page their customers used the most took over 45 seconds to load even over our high-speed line. They really needed our help.
Our Solution: Since they were committed to turning their site around over time we started simple and changed more and more of the site as time (budget) allowed. The 45 second load-time page was changed first, replacing the "old-school" code with fast-loading CSS and other techniques. The page now loads in a few seconds. (you would to if 1400 font tags were removed from your back)
In June '04, a new shopping cart (NetSuite) was added to the site. Links were made to be direct so now Dreamweaver could tell us what pages were live. (500 old, useless pages were thrown out) Navigation was updated and made consistent throughout the site. A slightly modified version of the old look was maintained where possible.
A new home page was designed focusing on the four main ideas they wanted to present. One section of the home page changes with each loading highlighting a new product area. Many new pages were created and a new template was made for the old, un-linked content, updating its look. A search engine was added making it easy to find your way through the vast content of the site. When Podcasting came up we suggested and implemented it immediately.
We added special shipping customizations that disallow orders to PO Boxes or International orders from being placed. Also, various shipping promotions can be used... order three of a particular item for free ground shipping, place a particular promo code for free ground shipping, etc. Their express shopping page allows for multiple items to be added to the cart at the same time.
Older and last century work below...
A new NetSuite user had a design they wanted to achieve. First the site owner wanted us to implement the site in NetSuite. We did so, with a great deal of customization to achieved the desired functionality. We took the design they communicated via a Word document, added a simple, search-engine-friendly drop-down navigation, created custom forms and impressed even ourselves with making the login page look like the rest of the site AND adding customized navigation for the Customer Center based on the role of the customer.
However, after a few months use, it became apparent that NetSuite really wasn't what he needed and a different solution was found. We quickly moved the site design over and the site owner is thrilled with the results.
The site owner sent us the exact look he wanted for the home page and we did the rest. Most the site uses only two pages, the home page and the gallery page. Everything you see is controlled by three simple text files the site owner can update and expand easily (gallery groupings, price and size data, image information). As of this writing the site owner has yet to add the price and size information so you cannot purchase the images. But the site is still way cool.
Pleased with our work Sunburst hired us to create a web site for their new label printing business. The owner wanted his bottle customers to easily find the right sized label to fit the bottle they were purchasing, whether they were still at the bottle site or coming into the label site directly. Information regarding which label fit which bottle needed to be managed from an Excel spreadsheet. Updates to the sites data needed to come directly from this spreadsheet. Finally, the site needed to be very simple to use, provide for a tips on label artwork creation and be able to accept uploaded artwork files. A shopping cart was not desired as direct customer contact is an essential part of their business model.
Our Solution: At first we met with the site owner and worked out the business model and order flow. Much of the above requirements came through our suggestions after hearing how the label business was to function. To keep the site simple we came up with the "easy as 1 2 3" concept and carried that over into the site look and feel. But the neatest touch came with how we manage the Excel spreadsheet data. (Yes, that's me on their home page)
A crisis had developed. After over a year of development by another group the site still wasn't live; it didn't meet the vision of the sponsors (National Council of Teachers of Mathematics and MCI Foundation.) The new director asked for for our help.
By the end of the month Illuminations was live on the Internet with an improved homepage and a new direction.
Our Solution: The new homepage represented our above-the-fold1 home page design: all critical info and buttons are quickly visible. Less-critical homepage material is lower on the page yet partially showing to encourage scrolling. Pop-up text for each button gives the new user an idea of what lies ahead.
The new homepage was heralded in the words of one educator, "Bravo! What an incredible job you've done getting this together. ...The Illuminations home page can be a model for what a home page should be. Anyone from neophytes to super geeks can successfully use this page and get where they want to go with minimum clicking." Another educator said. "WOW! The site looks wonderful! It has clear text, functional links, and it loads quickly. It also seem like there is a world of useful information on the site."
Completely redesigning the structure and layout, the site was easy to navigate, update and use. This 50 MB, 1600 page web site became the best math education site on the Internet.
At a later date we were able to provide a completely new look and feel when the Illuminations logo changed. Much cleaner than the first design (which we had little to do with) and much easier to update. We added database connectivity to the SWR section of the site and a QuickTime "live-tour." But we all know the history of MCI/WorldCom and when their bankruptcy hit the money for the web site dried up. Sigh.
Working with graphic designers from DaraNET we created the HTML for this new site. Cascading style sheets are used throughout to maintain a consistent look. Monthly press releases are highlighted along the right edge of the home page.
A small site based on a brochure.
The site owner needed to have a place on the Internet where he could send prospective clients. An easily changed "brochure" that is available 24/7.
We designed the site to look like his existing hand-outs, even using the same images from the print graphic artists.
Get Healthy For Life
We worked with Clark Marketing Group who provided the branding, logo, and content. We came up with a clear organization of the content and easy-to-use navigation throughout the site.
All wrapped up in a clean modern design.
All the bells and whistles for a useful, informational, shopping site. A password protected distributors's area, poll, quiz, newsletter sign-up and much more.
This one was tougher than it may look at first. The customer wanted to have a slightly playful site yet be taken seriously in the mortgage brokering business. The site had to "break" normal design rules yet be easy to navigate.
It also needed to be updated daily with new mortgage rates using software they were used to using (Excel), provide different rates based on the location of the customer, and allow for company expansion into new states.
We came up with a great design (after a few tries) and procedures for safely updating mortgage rates daily without the need for a web designer. We will work with you to insure that a highly-trained webmaster is not needed for every type of update to your site. We can provide training videos, too. Give us a call.
Our Solution: On the pages that mattered we removed all the font tags and much of the old-school design methods. This cut the page sizes down to a third their original size and drastically improved page loading speed. The site owner was happy.
Finally, we created a simple way for the product status to be nightly updated by the site owner. As a final push we made a training video going over the simple process we developed. (Hint: it uses CSS classes in a creative way) If we told you the site owner was ecstatic would you believe us? He is. Ask him.
CIT Solutions, Inc.
CIT Solutions was formed to bring the highest standards of software development, consulting, systems integration, and training to U.S. and international telecommunications companies. The principals of CIT Solutions pioneered the use of the Internet with Web applications for worldwide telecom services. Their web site had to reach only top executives with high speed Internet access, and Windows running on an 800 by 600 screen was specified as the design platform. (Back in the mid-90's this was a big deal.)
Our Solution: They wanted to mimic a new brochure back cover (see above) but with a new logo, new text, animated graphics, unusual page loading sequences and, oh by the way, "make it look like this platinum credit card." Though the company is no longer in business, (not our fault, we swear) the site is still a model of old-school design with DHTML.
Iowa Wind Energy Institute
A web site was needed to go along with a new brochure being printed from an exhaustive study on wind energy in Iowa. The web site was to fit in with the look and feel of the Iowa DNR web site and was to have live calculation pages so users can determine the practicality of wind energy at their location. A 100 page Word document was provided by the client and a great web site was delivered.
Purely Organic, Ltd.
Purely Organic, Ltd. imports the finest organic Italian food: from $10 bottles of olive oil to $155 bottles of balsamic vinegar. Their web site needed to look rich, dignified and inviting. They personally visited every farmer in Italy to insure their farmers were passionate about the quality of the exclusive organic food they produce.They wanted their web site to promote their unique travels and exclusive products.
Their current web site violated every "rule" in the business: slow loading graphics, hard to read menu, etc. but a great product!
Our Solution: We redesigned and rewrote the site in stages. A change in front page color scheme, text, visual presentation and components. The Online catalog sidebar has subtle rollover buttons. The words "Our Products", "Our Travels", "Direct from Italy" & "The Growers" give, at a glance, a taste of what they want visitors to immediately know about the site. When the mouse is placed over them more text and graphics pop-up to inform, delight and entice the visitors. The site is uncluttered, dignified, inviting, and loads fast!
This was one of the first sites we did professionally and still looks good after all these years, though the coding and navigation images could use updating .
Clark Marketing Group
Get Profitable.com needed a makeover. We were asked to come up with something that looked modern yet conservative...and use a unique shade of blue. A lot of text had to be included on the homepage yet the top shouldn't look cluttered.
Our Solution: A blue was chosen to wrap around the site. On that a light gray navigation bar was built out. The top navigation bar looks like transparent tabs as the dark blue slightly shows through. The modern yet conservative objective was achieved. (Well... for 1998)
A customized forms-based shopping cart is built into the site. It uses Authorize.net to automatically accept credit cards and allows for selling hard and soft goods on the same order. (This is one of the first sites we did and could now really use a code and look touch-up.)
Working with their in-house designer who designed the navigation and wrote the content we quickly created the site they wanted for a very reasonable price. A few of our artistic touches and the site gives the elegant feel desired.
This is just a sampling of the many web sites we've worked on since beginning web site design in 1996. We still love web design and coding, and would be more than happy to speak with you about your project. Give us a call. Contact MVL Design by calling at 302.304.8404. Click to call MVL Design at 302.304.8404
1. "Above-the-Fold" refers to the area on the top half of the front page of a newspaper. The most important new stories are placed here so they are visible when selling the paper. The space within 430 pixels from the top are viewable by a typical, late-90s Windows IE browser screen. We call this area "above-the-fold" and design our sites with the most important items in this space. top