Project:

Website Design & Development

scroll icon
PCB You - Desktop home page final design with scrolling animation

PCB You needed a polished, professional site for the launch of their start-up.

The Data Driven Design team joined the effort to create a site that would boost PCB You's credibility and provide necessary information to potential customers who had already expressed interest.

Technology:

HTML/SCSS/JS

Adobe XD

Adobe Photoshop

Craft CMS

Roles:

Website Design

Frontend Development

Backend Development

Project Management

DevOps

Hosting

Start-Up Challenges

We've worked with many small companies and start-ups in the past and immediately recognized some of the same challenges at the outset of our engagement with PCB You. Like many small and new businesses, cost is a huge concern when undertaking a completely new project.

Our team does not believe in cutting corners on quality in order to fit within a budget, so our conversations with clients on a tight budget begin by focusing on the MVP approach to their web presence. In our field - sorry to disappoint all of the sports fans out there - MVP stands for Minimum Viable Product. In other words, what is the minimum set of features, pages, and content that would make the project successful? During the discovery process, we nailed down what the site needed to include.

At the same time, we also explored several areas of challenge for the site. Among them was that the client did not yet have any content written, a company logo for their brand or imagery that could be leveraged for use across the site. Knowing the cost of these items, PCB You decided to write the content themselves with some guidance from the DDD team as to what types and quantity of content should be created. In addition, although we offer branding and logo services, the client decided to seek a lower cost vendor to create their mark. In order to overcome the limitation on imagery available from the client, we explored ways to add a more graphic component through the selective use of color blocking, simple background imagery, and text outlines. Ultimately, this dearth of options resulted in a flurry of collaborative, creative problem solving - something we embrace.

"The optimist sees the opportunity in every difficulty."

- Winston Churchill

After establishing the structure of the site as well as getting an idea of the amount of content we needed to account for, we dove into the design process. Since PCB You didn't yet have a logo, typeface or brand colors, we had the opportunity to create a website design that wasn't tethered to existing assets or style guides. The client also expressed an interest in exploring bright, unconventional color choices. Based on this, we brought back our initial ideas applied to the homepage, in a variety of bright colors.

PCB You - Home page design ideas in color options
PCB You - Desktop home page prototype with scrolling animation

Through further revisions, we settled on a blue look and designed the remainder of the pages across the site.

During the design refinement, we felt that the pages could still use a greater visual impact so we strategically switched the background on a couple of areas - the page hero and call to action. We switched out the original circuitry background for stock imagery and video. In order to provide PCB You with a series of assets to use across the site, we edited them so that they felt in alignment with the brand.

PCB You Home page - Desktop scrolling animation

Phased Roll Out

After we received approval on the page designs, our technical team jumped in to begin phase 1 development. Due to the need to get the site up as soon as possible, we planned for the first release to include only the essential pages - the home page and contact page. This allowed us to focus our web development hours on a set of meaningful deliverables as well as allowing the client to tackle content creation for a smaller portion of the website.

After launching the slimmed-down site, we continued work. During a second phase, we coded the remaining pages of the site, and created a flexible custom content entry set up in Craft CMS, to allow for easy editing across the pages. One of the areas we made particularly flexible was the page hero. We built the template so that it could include either a video or an image, allowing for consistency in the design, but differentiation for a user.

PCB You - Mobile Phone development with scrolling animation

Parallax, page-load and scrolling animations

Data Driven Design created additional design elements to add further movement to the static design.

PCB You Contact Page - Desktop page load and scrolling animation
PCB You Home page - Responsive website on mobile phone and tablet

Final Touches

The end of PCB You's website project included:

  • Content entry across the site
  • Creation of a favicon
  • Web design changes to make the colors and background imagery more reflective of the provided logo
  • Basic SEO set-up
  • Creation of a 24-page content entry guide with screenshots
  • And, of course, launch!
Ready to start your project?
Get in touch