Product Design Lessons from Designing & Building 5 Websites for a FreeCodeCamp Certificate

A Case Study: Lessons Learnt, Adding Design Polish and Next Steps

Published 15th May 2019 ∙ Jason Crabtree

Table of Contents:

  1. Introduction
  2. Project Links
  3. Summary: Five Biggest Lessons
  4. Applying a Consistent Design Process
  5. Goals and overall approach
  6. Defining design constraints
  7. Project 1: Designing a Tribute Page
  8. Project 2: Designing a Sign-up Form
  9. Project 3: Designing a Product Landing Page.
  10. Project 4: Design a Technical Documentation Page
  11. Project 5: Design a Portfolio of Work
  12. Results and outcomes
  13. Next steps

Introduction

The FreeCodeCamp Visual Web Design Certificate is the achieved by building 5 different websites, each built to meet different goals set through user stories. After building each website and passing the required tests, the project is then submitted towards the final certificate presented after completing all 5 projects.

It was a great experience completing this certificate and a huge learning opportunity. Every project gave a fresh chance to build a new website based on constraints, user stories and a fresh brand and design personality. The constraints and specific goals helped give meaning to every design decision, providing a valuable look into the importance of shipping with purpose.

Within each project, I met the FreeCodeCamp requirements and added my own extra flourish and constraints on top. These focused on design best practices, modern web design requirements and adding depth to overall user experience. While these aren't Products with a capital P (with users, customers or business models), each design deserved professional polish and care. This case study details the process for building each website, highlights lessons learnt, and discusses the little bits of polish throughout each project.

Keep reading to learn more!

Project Links

Want to get straight to seeing the live websites? Check them out below!

  1. Build a Tribute Page: Technological Innovators
  2. Build a Sign-up Form: Mastering Forms
  3. Build a Product Landing Page: Cush's Chili Sauce
  4. Build a Technical Documentation Page: Seed CSS Utility Snippets
  5. Build a Personal Portfolio Webpage: Showing the Work: Portfolio Page

5 Biggest Lessons:

During this certificate there were consistent lessons that cropped up repeatedly, with lessons split across design, coding and general product development. Several of these lessons are especially interesting because of their relationship to a huge focus in design & tech right now — design systems.

These projects gave me a deep appreciation for the need for design systems. As each website grew, I repeatedly came across ideas relating to structure, consistency, reusable design components and pattern design. These subjects closely relate to the questions addressed by design systems and I’m super excited to dive into design systems in the future.

Biggest Lessons:

  1. Set projects up for success by using responsive layout design, establishing a strong grid system and using a patterns for colours, layout and typography.
  2. Remember the most important product is the final deployed design, focus on improving that, rather than conceptual ideas.
  3. Organise everything in a usable, clear way. Start adding structure at the beginning when things are clear, not at the end because they are becoming unclear.
  4. Rely on strong design foundations; different brand identities will always use strong foundations for typography, layout and colour.
  5. Start with core requirements, then add additional form and functionality from the core product experience upwards.

These lessons came up repeatedly throughout each project — and remembering each lessons will absolutely help me continue to make consistent and enjoyable product experiences in the future.

Applying a Consistent Design Process

These projects followed a slightly different route compared to my normal design process. While my typical design process includes discovery, research, concepts, wireframes, design and delivery, these projects focused heavily on visual design and execution, rather than product design exploration.

Following the user stories set-out by each project, I started each project by building the basic functionality required to pass FreeCodeCamp's tests, then used that foundation to complete out the visual experience and design. This approach ensured the required components were built in from the start, with visual design used to round off the experience.

Goals and Overall Approach

In addition to meeting FreeCodeCamp's requirements, I added my own personal goals to each project. These focused on user experience and prioritising performance, accessibility and responsiveness.

These additional goals were the result of a mixture of personal pride and the fact that many FreeCodeCamp requirements were met with basic HTML markup and minimal styles, as shown in the image below. These barebone designed often lacked strong typogaphy, hierarchy or stucture. Not quite the beautiful, function solutions I wanted! Because of that, once each test had been passed I kept refining each project to build desirable user experiences on top of the foundational functional layer.

Defining Design Constraints

As described in the goals section, each project had several constraints I held myself within. These goals can be classified as either A) Design Best Practices or B) Pushing myself out of my comfort zone.

Design Constraints:

  • Fully responsive and fluid layouts for any potential screensizes.
  • Semantic HTML5 whenever possible to maintain accessibility and keep websites as modern as possible.
  • A focus on only HTML5 and CSS with limited to no JavaScript or other build tools. This helped ensure speed and perfomance.
  • A unique brand identity for every page, ensuring every page has a different style, personality and layout structure.
  • Original copywriting for every page, reflecting that copy and product writing is an essential part of user experience.

Project 1: Designing a Tribute Page

View the page at A Tribute to 200 years of Technological Innovators

This project focuses on a alternating layout, with each images and text component creating visual hierarchy and interest. To remain responsive, the images fluidly respond to browser size changes — at a certain point shrinking to fit in a small screen view.

The image, title and text component is duplicated throughout with the position itself manipulated using CSS. This reduced duplication and ensured consistency throughout.

Main Focuses:

  • Hierarchy
  • Fluid images
  • Alternating grid layout

Tiny Polish:

Hovering over each image slightly increases the size of the image and activates the link cursor icon — showing the image itself is a clickable link.

What I could improve next time:

For future similar projects, I'd explore ways to generate each component programmatically. This would reduce the manual duplication of each element and could introduce features such as dynamic ordering or user-submitted content while ensuring a consistency.

Project 2: Designing a Sign-up Form

Sign up* to the site at Mastering Forms
*Don’t actually sign-up, this is a fake project!

Web forms are notorious for being tricky to work with, style and design. For this project, I focused on doing the basics well. Each question has a descriptive label and is structured around similar questions. This was achieved using form grouping, form validation and semantic HTML elements.

The topographic background (courtesy of http://www.heropatterns.com/) helps set a friendly, welcoming tone to the website.

Main Focuses:

  • Responsive forms
  • Clear labels and product copy
  • Effective form layout and hierarchy

Tiny Polish:

The required questions turn green/red when they have met the validation criteria. Try it out! The validation itself is handled with HTML5.

What I could improve next time:

Further styling of the checkboxes and radio buttons could significantly improve the polish of the website, taking it to that next level of personalisation.

Project 3: Designing a Product Landing page

Visit the landing page at Adding Spice to Life: Product Landing Page

Landing page design has a long history. Styles trend in and out of fashion — with illustration being hot right now. Based on FreeCodeCamp's requirements, a video forms the core media element for this landing page.

This page experiments with bold borders and a atypical grid for the favourite recipes section. This created a dynamic grid around a logical foundation. This project lacks some polish in it's final execution — showing a gap between my initial concept and the final delivered design. A good reminder to keep working on my craft and execution skills!

Main Focuses:

  • Hierarchy
  • Breaking the Grid
  • Bold layout

Tiny Polish:

The copywriting for this page adds lots of personality, particularly the captions for the favourite recipes.

What I could improve next time:

Re-visit the sizing, layout and margins. The initial concept was to have overlapping elements but during iteration I wasn't able to layout the elements in quite the right way. At that point overall sizing should have been revisited.

Project 4: Designing a Technical Documentation Page

See the Seed CSS site at Seed: Utility CSS Code Snippets

This was the most exciting and ambitious project by a big margin and the biggest learning opportunity across all of 5 projects. During this project, I spent a lot of time thinking about designing the system to be flexible, reusable and practical, a great topic to be thinking about.

While the initial concept for this I project was creating code snippets I could reuse myself in the future I also ended up spending a lot of time thinking about functional CSS, design components, product consistency and design reusability. On top of that, this project was the most complex of all 5 in terms of navigation, layout and hierarchy. This forced me to really push my information architecture comfort zone.

Main Focuses:

  • Systems-thinking
  • Hierarchy
  • Balancing responsive design with a lot of content
  • Effective navigation
  • Clear structure
  • Strong layout
  • Clear copy and product writing

Tiny Polish:

The code block elements are sized based on the content, up until a constrainted size. At that point, they scroll within that constraint. This keeps things consistent while resizing for the material.

What I could improve next time:

There are a number of features that are common in documentation sites that could be added; including but not limited to page search, more in-depth code examples, design examples and contribution guidelines.

Project 5: Designing a Portfolio Presentation Page

View projects at Visual Web Design Portfolio

Project 5 for the FreeCodeCamp certificate is a portfolio page. Because I already have a portfolio page, independent of this certificate — this page is very experimental. The two column navigation and scrolling behaviour works well for this project but I would hesitate to use it for a more significant project. However, it was a great chance to experiment with a different navigation model.

Main Focuses:

  • A unique colour palette
  • Experimental navigation

Tiny Polish:

When navigating with the cards on the left, the content on the right uses ‘smooth’ scroll behaviour, a CSS property that scrolls the page down to the relevant section, rather than instantly moving the screen to the correct position.

What I could improve next time:

The smooth scroll animation could be further enhanced with a dim on hover state for non-active elements, bringing the active element to the forefront and sending other elements back. This would enhance the effect of focusing on the active element.

Results and Outcomes

Each of these projects forced me to consider trade-offs and make opinionated design decisions. One of the explicit constraints I aimed for was keeping everything fully responsive — ensuring each project worked as well on a phone as a desktop. Each project met that goal, an important achievement for any website built in 2019.

The lessons of this certificate will hold strong for every design project I work on in the future. The important lessons of strong design foundations, focusing on the final delivered design, strong organisation, consistent design and following a step by step process will carry me forward to continue doing better and better design in the future.

Next Steps

This project started as a way to focus on visual and interaction design. My professional experience (View Resume) has focused on user experience design with lots of time spent using post-its.

This certificate gave me a great chance to keep practising my visual design execution and overall design craft. Future projects will focus on working through the entire product design process; doing discovery, research, problem definition, ideation and then finally solution design.

If you’re interested in seeing more from me in the future — follow along on twitter at @jasontcrabtree!

Want to read more?

Read the Character Counter Case Study, with details on launching on Product Hunt, iterating based on feedback and building a tool to use daily.

Or checkout my Blog for posts on Design, Strategy, Code & anything else I've found been thinking about.