innovative auto solutions - brent...

WEBSITE DOCUMENTATION

1

INNOVATIVE AUTO SOLUTIONS


2

CONTENTS

PROPOSAL.......................................................................................3

TARGET AUDIENCE.........................................................................5

CONTENT STRATEGY......................................................................6

FLOW CHART....................................................................................7

MOODBOARD...................................................................................8

WIREFRAMES...................................................................................9

TYPOGRAPHY MOCKUP...............................................................12

MOCKUPS........................................................................................13

PAPER PROTOTYPING..................................................................15

USABILITY TESTING.......................................................................16

IDENTITY PROCESS.......................................................................17


3

PROPOSAL

A. PROJECT OVERVIEW

Project name: Innovative Auto Solutions website

Project timeframe: October 1 2013—December 5 2013

Project summary: Cra� ing an identity and online website showcasing the services, work and products of

Innovative Auto Solutions (IAS).

B. BACKGROUND & MOTIVATIONIAS is a recently opened auto customization shop that specializes in remote start/security, custom lighting, and car audio. Most business thus far has been generated by a word of mouth referral and they are looking to grow their client base with the addition of an online presence consisting of an identity system and website. Website will be cra� ed with a minimal and clean design, and built using the WordPress CMS platform which will allow IAS to upload their own images showcasing their work, post monthly specials and adjust their products accordingly. Through this solution business will be generated by more than just a referral path. The online posting of specials will incentivize potential clients to choose IAS over the competition because of the lower price points of the big box retailers.

C. GOALThe goal of this project is to build the company’s client base and generate new business through an online presence that will di� erentiate them from the competition, most specifically, the big box retailers.

D. DELIVERABLES-Research & planning documents -Logo design -Website design-website development

E. SCOPE-Research project needs, design inspiration and create document with findings/recomendations.-Create logo.-Build website using WordPress CMS platform.-Upload new files to server to replace splash page.


4

F. RISKS AND REWARDSRisks of this project are not getting done in the short timeframe, poor planning & design which will lead

to not reaching the goal of the project. Rewards of the project would include reaching the goal of the project and increasing client base and increasing sales.

In Scope:-research includes: inspirational images, logo & website mockups, website wireframes, flow charts, and site documentation.-Identity system to include: Mind mapping, logo sketching, .-Website includes: Home page: Navigation links, Image slider, monthly special area, contact information and about section. Services page: Descriptions of services performed (catagories TBD). Work page: Gallery layout to showcase uploaded images of featured work. Contact Page: General contact information accompanied by a contact form. Products page: Layout forproducts including general features, price, and model numbers.-hosting includes: file transfer to server and database set up.-Training includes: Up to 5 hours of training on using wordpress CMS platform (uploading photos, updating products, and changing monthly special area).

Out of Scope:-research: additional research outside of what is defined in scope-additional print materials (business cards, letterhead, thank you cards, flyers, brochures, promo tags, etc)-additional website sections (blog, ecommerce,etc).-additional server services (subdomain setup, database setup, etc.).-additional training outside of 5 hours will be billed at hourly rate.


5

TARGET AUDIENCEMARKET SEGMENTThe market segment for Innovative Auto Solutions (IAS) is rather large. To be broad, the market segment is all automobile owners who are looking to add a� ermarket accessories to their car,truck or motorcycle.

TARGET MARKETThe target market for this product is auto owners, but it can be broken up into a few catagories defined more specifically by genere.Car Audio & Security: Drivers looking to add custom stereo equipment as an upgrade from factory stereo elements. May also be looking for security system to protect stereo investment.Remote Start: Drivers who have living situations where heated or cooled garage may not be available and looking for an option to warm up or cool down their automobile before getting in it to drive.Show Car: Drivers who use automobiles as a hobby that are looking to upgrade Interior/exterior graphics, exterior accessories (spoilers, hood scoops, etc)..Lighting: Drivers looking for custom upgrades to lighting systems (LED, Angel Eye Headlights, Colored dome lighting, Interior Bass Lighting, Underbody lighting, etc).Motorcycle: Custom chopper style motorcyclists looking for lighting and/or stereo upgrades.

MARKET SIZEAccording to The US Department of Transportation’s Federal Highway Administration division in 2011 Minnesota had over 5 million regestered cars, trucks, and motorcycles and ranks 10th in the US per capita. Those numbers show that most people in Minnesota choose to drive over using public transportation. The New York Times reported in November of 2012 that the a� ermarket auto accessory industry generated 29.8 billion dollars in sales in 2011 and it’s looking like that number will rise in 2012. Drivers are choosing to outfit their automobiles with these accessories.

OTHER CUSTOMER OPTIONSCustomers may choose to go to the big box retailers to get the same type of work done and with the evolution of technology, seeing some of these a� ermarket parts already installed from the actual dealership is starting to become normal (remote starts/security systems, upgraded audio systems, etc).

KNOWN CUSTOMERSThe customer base is strong in MN due to the climate (remote starters) and by doing some research online the audio and custom accessory markets are the same. Numerous forums and blogs were found relating to the subject matter indicating a strong market.

BENIFITS TO CUSTOMERSSome benifits to customers is that they will get a more intimate experience than going to the big box retailers and/or the dealerships. in addition to the intimate, more personal experience IAS has competitive pricing that is cheaper than the competition.


6

CONTENT STRATEGY

A. PAGES: The Innovative Auto Solutions project will be a multipage website with landing page, products page, services page, work/image gallery page 404 error page, and contact page.

Home page: To include image slider, section for monthly specials, brief about statement, link to connect on facebook, brief overview of services, and basic contact information.

Products page: To include separate pages for remote start/security, lighting, and stereo products.

Work (Projects): To include image gallery of best projects.Services Pages: To include overview of services available and installation rates.Contact: Basic contact form containing a name, email, and message fields with a send button.

Confirmation or error message to show above form upon form submission. Also included will be link to facebook page.

404 Error page: To include creatively designed 404 error page.

B. CONTENT CREATION & MAINTENENCE: Content wil be provided by client (images, product descriptions, body copy, etc.).

Content creation plan: Content will be catered to the needs of target audience. Content will be minimal to fit with the layout and feel of design of website.

Content maintence: Content will be maintained at clients discression as needed. Additional charges will be applied to out of scpoe requests.


7

FLOWCHART

REMOTE START LIGHTING CAR AUDIO

HOME

SERVICES PRODUCTS GALLERY CONTACT

EMAIL SOCIAL MEDIA

FILL OUT FORM

SEND FORM

SUCCESS ERRORS

VIEW LARGE LIGHTBOX

FIX ERRORS

TO SOCIAL MEDIA WEBSITE

BACK TO PRODUCTS?

BACK TO HOME?

FINISH


8

MOODBOARD

Innovative Auto SolutionsFONT SOURCESBoth Lato and Open Sans are Google fonts and will be loaded through the Google Fonts API

NAVAGATIONFONT FAMILY: Lato BoldFONT SIZE: 1.15em based on 14px default.FONT COLOR: #e67e22FONT COLOR HOVER:#231f20 BACKGROUND COLOR:#e67e22BACKGROUND COLOR HOVER:#231f20

COLORS

INSPIRATION

BODY COPY

HEADINGS

H1: HEADINGH2: HEADINGH3: HEADINGH4: HEADINGH5: HEADINGH6: HEADING

HOME HOME

#231f20 #e67e22

FONT FAMILY: Lato BoldFONT SIZE: 1.15em based on 14px default.

Innovative Auto Solutions is your go to shop for your aftermarket auto accessory needs. We specialize in Top Quality Products and Excellent Customer Service. We are here to serve you for all you accessory needs to make the vehicle you drive yours!


9

WIREFRAMES-DESKTOP


10

WIREFRAMES-TABLET


11

WIREFRAMES-MOBILE


12

TYPOGRAPHY MOCKUP

Innovative Auto SolutionsFONT SOURCESBoth Lato and Open Sans are Google fonts and will be loaded through the Google Fonts API

NAVAGATIONFONT FAMILY: Lato BoldFONT SIZE: 1.15em based on 14px default.FONT COLOR: #e67e22FONT COLOR HOVER:#231f20 BACKGROUND COLOR:#e67e22BACKGROUND COLOR HOVER:#231f20

COLORS

INSPIRATION

BODY COPY

HEADINGS

H1: HEADINGH2: HEADINGH3: HEADINGH4: HEADINGH5: HEADINGH6: HEADING

HOME HOME

#231f20 #e67e22

FONT FAMILY: Lato BoldFONT SIZE: 1.15em based on 14px default.

Innovative Auto Solutions is your go to shop for your aftermarket auto accessory needs. We specialize in Top Quality Products and Excellent Customer Service. We are here to serve you for all you accessory needs to make the vehicle you drive yours!


13

MOCKUPS-DESKTOP-HOME-960PX & UP


14

MOCKUPS-MOBILE


15

PAPER PROTOTYPING

TEST QUESTIONS

TEST RESULTS

DESIGN REVISIONS

1. How would you navigate to view the di� erent remote start systems?2.How would you fi nd out more information on the Drone remote start system?3. Does Innovative Auto Solutions(IAS) install in boats?

The testing results were encouraging. Some tasks were performed easily while others were not on a consistent basis. Users navigated easily through the fi rst two tasks, but got hung up on the third.All users had trouble fi nding out if IAS installs into boats. The information telling users that IAS does install into boats is buried into the audio section of the audio/video page.

To remedy this the info was added to the home page under the audio/video section there. Retesting was vastly successful after the move.


16

1. Can you tell me exactly what it is you are looking at?Tester 1: An automotive website.

Tester 2: A website. Tester 3: A business website.

2. What are your thoughts about how elements are placed within the layout? Is the site easy to navigate?

Tester 1:Elements are laid out good. Nothing is confusing as the links are defi ned enough for me to understand what they are. Tester 2: Laid out well. Tester 3: The black that runs across the entire width is a little annoying but thats a minor thing.

3. Take some time to use the website. Go to di� erent pages and try to navigate to other pages. Is there anything that is confusing to you or that you think should be done di� erently?

Tester 1:Everything looks great. Tester 2: Navigating the remote starters is a little confusing. Its a little confusing if I wanted to go to a di� erent page within the remote starters. Tester 3: I think prices should be added to the products.

4. Now look at the website on my phone and do the same as the last question. Do you still feel the same?

Tester 1:Everything looks good, I really like the mobile navigation. Tester 2: Yes, I like it. Tester 3: Looks good.

TEST RESULTS

DESIGN REVISIONS

Of the three subjects the testing was done, I got the expected results. All testers are internet users but not in the industry. They completed asked tasks and gave good, positive, and insightful feed-back.

I am only going to make a one design revisions. The testers pointed out that it was a little di� cult to navigate within the remote starters pages so I added breadcrumbs to the top of the pages to allow for an additional navigational element and a “you are here indicatior.

USABILITY TESTING


17

IDENTITY PROCESS


18

MIND MAPPING


19

SKETCHES


20


21

IIIIIIIIIIIIIII

II I

I I I I I I I I I I I I I I I I I I I I I I I I I I II

IIIIIIIIIIIIIII

SELECTED SKETCHES B&W MOCKUPS


22

SELECTED LOGOIIIIIIIIIIIIIII

II I

I I I I I I I I I I I I I I I I I I I I I I I I I I II

IIIIIIIIIIIIIII


23

COLOR OPTIONS

INNOVATIVEAU TO S O L U T I O N S











24

FINAL LOGO

INNOVATIVEA U T O S O L U T I O N S

innovative auto solutions - brent...

Documents