Chris Schiotis

Design Portfolio

North Star Smog of Long Beach - Website Redesign

Objectives

Mock-up of North Star Smog of Long Beach

This mock-up shows the large and small screen sizes of the newly launched website.

Logo Development

Screen capture showing vector logo developmentWe drew the logo to make sure we matched the existing signage
Style guide rules for logo safe zoneStyle Guide rules for the header logo

The Color Palette

#ec1e24
#262667
#ffffff
#000000

Typography

This is heading 1 font-family: Helvetica, Arial, "sans-serif";
This is heading 2 font-family: Helvetica, Arial, "sans-serif";
This is heading 3 font-family: Helvetica, Arial, "sans-serif";
This is heading 4 font-family: Helvetica, Arial, "sans-serif";

This is body copy.

font-family: Helvetica, Arial, "sans-serif";

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

This is an inline link

Our Appointment System

Calendy

We, (the business owners and I) wanted to offer something that our competitors were not. We found that none of our competitiors offered an online appointment syetem. We discovered 'Calendy' online... It is very easy to work with and implement.

The user interface is decidely user friendly:

This is a screen shot of the first screen visitors will see.

This is the first screen visitors will see. Clicking the menu element shown above reveals the time options.

This is a screen shot of the second screen visitors will see.

Very easily interpreted and tappable menu items. Definitely mobile friendly!

This is a screen shot of the third screen visitors will see.

Choosing the desired time slot for your appointment takes us to the next screen.

This is a screen shot of the fourth screen visitors will see.

Fill out the simple form and then tap the 'next' button.

This is a screen shot of the fifth screen visitors will see.

Tap 'add to your calendar'...

This is a screen shot of the sixth screen visitors will see.

Choose an option for the calendar and you're set! An confirmation email comes almost immediately.

3rd Party Services

Screen shot of the coupon window

A third party provides a coupon service as well as some other critical information related to smog inspection services.

Their site is a directory of inspection services and provides quite a bit of useful information.

Finally

My role(s), tasks and responsibilities on this project were:

go to the top of the page