FrogLegs Website Redesign and Additions

FrogLegs Website Redesign and Additions

FrogLegs Redesign

A design project for the FrogLegs website and the SCC WEB202 course.

Background

Froglegs Kids Culinary Academy is a cooking school for kids ages three to fourteen. They have a static website that is visually branded as a business for children.

 

The previous FrogLegs look and feel

 

The Challenge

Froglegs is expanding their business and offering adult cooking classes and products. They need to expand their website accordingly, with styling that speaks to an adult customer base. And they need to retain the current look and feel for the kids offerings.

The site was split into two sections, branded and styled for kids and adults respectively. The challenge was to do this without making navigating the site confusing, and without surprising existing users too much.

 

 

Multiple sections of the site necessitate multiple navigation bars. This map shows two full nav bars for the Adults and Kids sections, and a stub page for the Mercantile part of the business, which shares the Adults nav bar.

 

The new navigation schema
The new navigation schema
The current nav bar displays the Kids styles

 

The landing page/homepage has no nav bar but rather displays three prominent links to direct users to the section of the site they need.

 

Wireframe for the new landing page

 

Inner pages in the Adults section displays a similar splashy image at the top, and similar link boxes on some pages where appropriate. And of course they will display the nav bar.

 

Inner page wireframe

 


 

The home landing page was designed with professional photography of the FrogLegs facility in Kirkland. It utilizes the basic look and feel of the new Adults and Mercantile sections.

 

Homepage visual design

 

The inner pages are designed to mimic the appearance of a fine dining restaurant menu. A new, more muted color palette was selected using the neon Kids section colors as a starting point. The layout of the class displays will be familiar to existing users of the website.

 

Classes inner page

 

At 767 pixel viewport width, display goes to single column wide and the nav bar is replaced with a hamburger button. The site utilizes the Bootstrap Grid CSS and SlickNav plugin for this.

 

Visual design for mobile viewports

 


 

In addition to the wireframes and visual designs, specifications were produced for future maintenance of the website. These specs and all other design documents were compiled in a folder.

 

FrogLegs Web Redesign Specs

 


Registration Redesign

The new Adults section of the site required its own registration pages to keep the look and feel intact throughout a full session.

 

New adult registration form

 

The Kids registration system was onerous:

 

 

…and underwent a similar paring down, though it was not possible to remove all of the entry fields for the kids.

 

The simplified kids registration
The simplified kids registration

 


Payment System

FrogLegs had long used a PayPal button system for their payment page. This had numerous problems. Beyond being non-searchable because of utilizing dropdown menus, it required users to click through the entire page and find everything they had already registered for, and then click on it again to pay for it.

 

FrogLegs original PayPal button payment system
FrogLegs original PayPal button payment system

 

Concurrently with the redesign project, FrogLegs switched from this payment system to a credit card processing service called FattMerchant. The payment system was simplified accordingly, from a page with dozens of (non-searchable) PayPal dropdowns and buttons to one that simply added the prices of everything they had registered for and presented a single button to pay.

 

The new all-in-one payment page
The new all-in-one payment page

 

jQuery was used to generate an order number for the desk employee who received the registration and payment notifications.

 


What’s Next

A similar but less encompassing redesign of the Kids pages is in order next, removing the spaghetti code of several developers (the registration page was aligned using tables) and implementing Bootstrap Grid.

The ultimate goal is a WordPress site using these styles and a powerful registration and calendar display plugin to offer users a better way to view and select classes, as well as a login system to save them time and retain them as customers.

Adam

Web designer, website author, blogger, graphic designer, layout artist Drummer, drum teacher, drum restorer, composer, vocalist

Leave a Reply