Course Project

Web Design Consultancy Project

Imagine you work for a web design consultancy. You have a new client who is a musician. He’s asked your design firm’s help in building out a web presence for his band, but isn’t quite sure where to start… In this course, we’ll be going through a series of individual and team assignments to understand what’s important to your client and his target audience, design a solution that meets his band’s needs, and develop a working prototype using modern web languages. We’ll be using hands-on Design Thinking, User Experience, and Scrum development practices as we complete the assignments.

The end deliverable will be a mobile-responsive native prototype (a “clickable demo” that illustrates key features) developed in HTML, CSS/Bootstrap, and some beginner JavaScript functionality (via Bootstrap). It is not expected that you will implement any advanced functionality or use any server-side languages. Throughout the course a series of optional WebLabs are provided to get you up to speed with the basics of web design so that you can contribute to the web development component of the group assignments.

Each week we’ll work on a different part of the design challenge. Specific instructions for completing each assignment are included in each week’s assignment overview. A simple example is included with each assignment to get you started. It is expected that you will build on the examples and make them your own.


Module 01 | Web Experience Questionnaire

Individual Assignment | 0% of Course Grade

In the course we’ll be working on a small web development project using front-end web languages like HTML, CSS/Bootstrap, and JavaScript. Complete this short questionnaire and let us know what your experience and interests are so that we can put you in a group that aligns with your interests/skillset.

This assignment is required and not graded

Download the questionnaire


Module 01 | User Research Study

Individual Assignment | 10% of Course Grade

As you’re working with your musician client, you want to better understand the band, their target audience, and competitors. By understanding how and why from a user’s perspective, you will begin to uncover opportunities for developing meaningful solutions for your client that will shape the overall design of your end deliverable.

This assignment is graded using the creative grading rubric.

Go to assignment 01

Optional: WebLab 01 | Intro to Web Design


Module 02 | Personas & Vision

Individual Assignment | 15% of Course Grade

Once we’ve collected the insights from our user research, we’ll use that information in two ways. First, we’ll use our insights from our User Research Study to create personas. Second, we’ll compose a vision statement that outlines the overarching goal that aligns your team to the importance of your initiative.

This assignment is graded using the creative grading rubric.

Go to assignment 02

Optional: WebLab 02 | CSS and Responsive Design with Bootstrap


Module 03 | Sprint Zero

Team Assignment | Not Graded

Hold a sprint zero with your team to get your environment set up and determine which concept you want to move forward with.

Go to pre-work 03


Module 03 | Product Backlog & Release Plan

Team Assignment | 10% of Course Grade

In this team assignment, you’ll be identifying user flows for your primary persona, setting up an initial backlog for your site design, and creating a content map to outline the assets you will want to gather in support of your design.

This assignment is graded using the creative grading rubric.

Go to assignment 03

Optional: WebLab 03 | Interactive Design with Javascript


Module 04 | Wireframe

Individual Assignment | 15% of Course Grade

Once the team has selected a project to collectively work on and defined the backlog, team members will individually create wireframes that represents their view of the overall site design that supports the MVP.

This assignment is graded using the creative grading rubric.

Go to assignment 04

Optional: WebLab 04 | Wireframing


Module 05 | Sprint 01

Team Assignment | 10% of Course Grade

From the individual wireframes, the team selects a design to move forward with. Using the backlog established by the team in Assignment 03 create a sprint goal, define stories, tasks, and tests, and start your sprint execution.

Make sure your deliverable meets the course Definition of Done.

This assignment is graded using the web grading rubric.

Go to assignment 05

Optional: WebLab 05 | Version Control with Git


Module 06 | Sprint 02 & Release

Team Assignment | 15% of Course Grade

Having completed the first sprint, the team will now complete their MVP in a second sprint. At the end of the sprint, you will schedule a release demo with your facilitator to walk through the website deliverable.

Make sure your deliverable meets the course Definition of Done.

This assignment is graded using the web grading rubric.

Go to assignment 06