JCI Marketing (www.jcimarketing.com) had the opportunity to redesign Pilla Sport’s website - a company that creates top of the line lenses for elite sporting professionals.

1. Responsive Web Design
With JCI Marketing:
Taking a look at our process.
Pilla Sport

2. Here at JCI Marketing, we
love to take your website
to the next level…

3. JCI Marketing had the opportunity to redesign
Pilla Sport’s website - a company that creates top of
the line lenses for elite sporting professionals.

4. Let’s take a look at the homepage before…

6. *We determined there was too much going on above the fold with bits of information
scattered everywhere. The eye has a hard time landing somewhere.

7. Let’s take a look at the homepage (above the fold)
after…

9. *Lots of white space so the eye is drawn to the product and clear messaging.

10. Old Pilla Banner Images
On Pilla’s old site, they made use of sliding banner images to display different messages and
images on the homepage. This is a common feature used to highlight different products and
messages as well as provide some movement on your site.

11. Color Configurator
JCI implemented a color configurator that acted as a creative visual feature. Every time the
page loaded or refreshed, the color elements and messaging changed based on the color of
lens displayed. This was a creative way to display different lenses and taglines, without having
to do a normal rotating image gallery.

12. Homepage (Below the Fold)
We created a grid menu below the main
banner image to navigate to different
pages on the site. The client wanted a
“dashboard” feel on the homepage, a
highly visual overview of what the site
entailed. We went a step further and
added interactive elements, so when you
hover over a block, a video or simulation
plays. The blocks of color correspond to
the lenses displayed in the banner on
that page.

13. Subpage Layout
The subpages contained a lot of content
that needed good organization. In order
to conserve space throughout the site we
developed index pages that allowed for
horizontal scrolling. We did this so you
could find relevant content faster by not
having to scroll for a long time on each
page. We also broke up and delineated
sections by using different background
colors (white & light gray).

14. Subpages - Images
Cutout images against a lot of white
space, juxtaposed against solid blocks of
color or square images gave the
subpages a nice layout flow and enabled
the sections to breath more. Cutout
images of the glasses helped display the
products in a clean, attractive way.

15. White Space And Pops Of Color
Pilla's overall brand is very black and white. Intentional white space was used to enable the lens colors
and other bits of color on the page to pop.

16. Let’s take a look at the homepage (mobile view)
before…

17. Responsive Web Design
At JCI Marketing, we keep responsive
design in mind. Responsive web design
is the practice of designing a web page
for different device sizes. It ensures
elements on a page (images, text, cta’s,
etc) all “respond” or correctly display on
desktop, mobile and tablet devices.
Pilla’s old website was not responsive, as
you can see. The image at the top and
the footer site map is cut off from view,
as well as the top navigation, making it
impossible to navigate around on the
site.

18. Let’s take a look at the homepage (mobile view)
after…

19. New Mobile View
Content (both text and images) were laid
out with responsive design in mind. This
mobile view of Pilla’s New Product page
gives you an idea of what someone
would see when viewing the website on
their mobile device. Text is readable and
images are positioned at the top of each
section of written content. The
hamburger menu located at the top left of
the page enables the user to easily
navigate around the website.

20. Conclusion:
The client was happy with the final product and felt
the design executed what they were going for in the redesign. The
additional features and interactive elements really gave Pilla Sport
the pop and cutting edge they were hoping for - as it conveyed who
they were as a company.

21. JCI Marketing can’t wait to work with you!

22. Interested in hearing more?
Check out our website at jcimarketing.com. We would also love to offer you our free
Ebook: 25 Website Must-Haves. Get the Ebook by clicking on the link below!