Chloe Gunter

Device Mockup
Bike Shop

Project

Re-Design and Devleop a Neighborhood Bike Shop website.

Role

Brand Designer, User Interface Designer & Web Developer

This Neighborhood Bike Shop wants a website that encourages the local community to call or come into the store. They also nedd a logo re-design and re-branding, with local community reachout marketing concepts.

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe InDesign
  • CSS
  • HTML
  • JavaScript
  • Concept Proposal
  • Information Architecture
  • Style Tile
  • UI Comps
  • Responsive Website

Design Process

I designed and developed a responsive neighborhood bike shop website with clear call to actions and concepts to get the community involved.

Live Site

Branding

Once the concept and company name was finalized, I started sketching the logo design. There are several logo variations for this site including the favicon located on the browser tab.

    Business Name

  • Neighborhood Bike Shop

    Location

  • Big Bear, CA

    Services

  • Repairs
  • Maintenance
  • Manuals

    Products

  • Mountain Bikes
  • Road Bikes
  • Custom Bikes
  • Bike Gear
  • Bike Parts
Bike Shop Logo 1 Bike Shop Logo 2 Bike Shop Logo 3 Bike Shop Logo 4

Style Tile

This document was used to get the look and feel of the website visualized with the navigation bar, colors, fonts and imagery.

Bike Shop Style Tile

Client Discovery

I developed a client discovery document for the client and project information. This document is an excellent way to quickly get an overview about the company, the project manager contact, and project priorities. This also allows me to offer additional services the client may need such as logo design or re-branding.

    Insights

  • They need a website rand brand re-design.
  • Their site is not e-commerce, it just displays the products.
  • Their goal and call to action is not get people to come to their store.
  • They have a custom bike service that would be a great opportunity for a form.
Client Discovery Document Page 1
Client Discovery Document Page 2
Client Discovery Document Page 3
Client Discovery Document Page 4
Client Discovery Document Page 5
Client Discovery Document Page 6
Client Discovery Document Page 7
Client Discovery Document Page 8
Client Discovery Document Page 9
Client Discovery Document Page 10

Content Structure

The information architecture is used to visualize the flow of how the user would get to each piece of content, a plan for the navigation.

Information Architecture

Bike Shop Information Architecture

UI Comps

Before I started developing the new website, I created a phone, tablet, and desktop screens for the home, product and about us pages. The product page comps were used as a refrence for each page of the website that included products, such as, a page for the mountain bikes the company offered. I used these comps to get approval from the client before proceeding. Kepping the client involved will make the development of the project easier, and builds trust and transparency between both parties.

Bike Shop UI Comps

Outcome

Designed and developed a re-branded Neighborhood Bike Shop website with the goal to get the customers in the store for their services.

Live Site

Other Featured Work

View my other portfolio projects.

Coastlinepools Preview
View

Coastline Pools

Womens Self Help Preview
View

Womens Self Help Blog

Q-Pond Preview
View

Q-Pond App

Developer Portfolio Preview
View

Developer Portfolio