Skip to main content

Project, Milestone 1: User Research & Design

Credit: ~60 points. Graded for correctness against the requirements provided in the document.

For this project, you will design and code an original, ambitious, usable, and accessible responsive static 3–5 page interactive website from scratch designed for a cohesive audience with substantial content (primarily text).

This is an opportunity for you to demonstrate your front-end web design and development knowledge and showcase your creativity in a portfolio-worthy website.

Your website may be about anything. It's your choice. It might be a personal/professional website; it might be a site that emphasizes some aspect of your interests or activities (i.e. a hobby or an interest of yours, etc.)

Throughout this project, you will employ the user-centered design process to design and code your website for a cohesive audience with clear goals. You are required to design and plan your site first, and then code it.

As a general rule, use the methods and strategies we've learned and practiced in class. In web programming, there are many ways to solve a coding problem. For credit, you should only use the approaches presented in this class.

Learning Objectives​

  • Employ the user-centered design process by planning a website before implementing it.
  • Design website for a specific audience's needs/goals.
  • Conduct interviews to identify a cohesive audience and their goals.
  • Apply visual design principles to communicate effectively with the users.
  • Design a responsive website: one that works well on wide screens and narrow screens.
  • Evaluate your own work against a set of requirements.

Help & Support Resources​

We want you to get the help and support you need. Use the course's support resources for help with this assignment.

Git Repository & Codespace​

  1. Create your assignment repository.

    Visit https://landrace.infosci.cornell.edu/courses/info1300-2026fa/repos/project in your browser to create your assignment repository.

  2. Open your assignment repository in GitHub.

    After creating your repository, visit https://landrace.infosci.cornell.edu/courses/info1300-2026fa/repos/project in your browser and follow the link to open the repository on github.com

  3. Open your assignment repository as a codespace.

Submission Requirements​

Professionalism

Professionalism means meeting the client's requirements. Not doing less and not doing more.

Your submission should meet the requirements specified for this assignment and no more (or less). If you do more than the requirements, you will receive a 0 for the assignment. If you do less than the requirements, you won't receive full credit.

Your assignment should meet the following requirements for credit:

  • Submit your own original work (design and code) for this assignment.

    No credit is provided for submitting design and/or code that is taken from the course-provided examples or other assignments.

  • Your code should be original. However, the structure of the code will mirror the class examples.

    The structure of your code will align with the class examples. This is to be expected. We are learning web programming and there's only so many ways to structure code to solve its problems.

  • You are required to use the methods and techniques covered in class.

    No credit is provided for using methods that are not covered in this class.

    You may not use any methods that have not been covered in class prior to the release of this assignment.

  • Your assignment's website should be visible in the browser and functional upon launching the development web server using Go Live.

    If your assignment's website does not launch using this method or is not visible in the browser after launching the development web server, we are unable to provide any credit.

  • All files should be in the location specified in this document for credit.

    Professionalism is important. Incorrectly placed files will not be graded; no partial credit is provided either.

  • All textual content and images should be visible in the design journal when using "Markdown: Open Preview" for credit.

    If it's not visible in the Markdown preview, then we can't grade it. We also can't provide partial credit either.

    All images in Markdown must be web-safe formats: .jpg, .jpeg, .png, or .gif. No credit is provided for images in other formats.

  • Follow the submission instructions below.

    Submit all materials to your GitHub repository's main branch for this assignment. When you're finished stage, commit, and push your submission to GitHub. Then fill-out the submission form to complete your submission.

    Failure to complete the submission form will result in 0 credit; no submission form = no submission. No leniency. No exceptions.

Milestone Requirements​

Your milestone and final submission should adhere to these requirements.

Scope Requirements​

  • Your website may be about anything of your choosing.

    It's your choice. It might be a personal/professional website; a portfolio website; it might be a site that emphasizes some aspect of your interests or activities (i.e. a hobby or an interest of yours, etc.)

  • Your website should be original, ambitious, usable, and accessible.

    The website you design and code should be 3–5 pages, each with substantial content.

    Your website should demonstrate your creativity and mastery of front-end web design and development. A website that is "minimalist" or "plays it safe" will not receive full credit.

  • Your website should be impressive.

    This project should demonstrate your mastery of the course learning objectives and that you can apply them in a professional context.

    You need to go beyond the basic examples provided in lecture and homeworks.

  • Design and code your website from scratch.

    You may not use any pre-existing website templates, web builders, themes, or frameworks (e.g. Wix, TailwindCSS, etc.)

    You may not copy an existing website and modify it; you may not redesign an existing website.

    You must design and code your website from the ground up.

  • Your website should have substantial content.

    Each page should be content-rich with substantial content. Nothing should be minimal.

    The majority of the content, should be written text. However, you are also required to include images as decoration and content.

    Your website's content should not be primarily images. (You are not designing an image gallery; you are designing a content-rich website.)

  • Your website should be static.

    The website will be coded using HTML and CSS only in a future milestone.

  • Your website should be responsive.

    Your website should work well on both wide and narrow screens of all sizes, not just your laptop and your phone.

    Your website should work well on touchscreens and with mouse input.

    (Ignore dark mode for now. We'll cover that in a later milestone.)

  • The website should be in English.

    We cannot grade websites in other languages; no credit is provided for non-English websites.

Design Process Requirements​

  • Plan before you code.

    Plan your website in the design journal before coding.

    The design journal is used to document your entire design process from start to finish.

  • Thoroughly document your design process and provide a rationale for your design choices.

    We want to see the ideas that you considered, but didn't make the final cut. We want to see the evolution of your design and your reasons for changing it.

    We want to understand the design decisions you made.

  • Conduct user research to identify a cohesive audience and their goals.

    You are required to conduct at least 3 user interviews to identify a cohesive audience and their goals.

    Document your user research in your design journal.

  • Identify content for your website that addresses the goals of your audience.

    You are required to create a content inventory for your website. Document your content inventory in your design journal.

  • Plan your website's pages through at least two iterations of card sorting.

    Physically sort your content cards into pages and document (i.e. photograph) your card sorting process in your design journal.

  • Study the design of at least two existing websites that are similar in purpose to your own website.

    Document the existing website's theme, layout, and common design patterns in your design journal.

    Use these existing websites as inspiration for your own design.

  • Plan your site's responsive design and layout through hand-drawn sketching.

    These are design sketches. (They should have no annotations.)

    These sketches should be complete (the entirety of each web page is planned from top to bottom) for every page in your website. (Do not just sketch the homepage or the top portion of each page.)

    Do not create planning sketches with HTML and CSS annotations like we learned for planning flexboxes. There should be no HTML or CSS annotations labeled on design sketches.

  • Your design sketches should clearly communicate your design.

    Another 1300 student should be able to take your sketches and implement your design. Including implementation on narrow and wide screens.

  • Sketches should be legible for credit.

    If we are unable to understand or read your handwriting, we are unable to provide any credit. No partial credit is provided for illegible sketches/handwriting.

  • All design/planning content, including images, should be legible and visible in your design journal when using "Markdown: Open Preview".

    We are unable to provide credit for design content, including images, not visible in the Markdown preview.

User Interview Requirements​

  • Prepare at least 7 effective interview questions.

    Your questions should follow the guidelines for effective interview questions as discussed and practiced in class: they should ask interviewees to recall specific events/memories, follow-up to learn more about interesting responses, and be neutral (i.e. avoid leading or speculative questions).

  • Conduct user research through at least 3 user interviews with at least 3 different people.

    You must have an actual conversation talking to another person for the user interviews. The interviews may be in-person or virtual (e.g. telephone, Zoom, etc.)

    When conducting the interviews, ask all the questions you prepared.

    Ask follow-up questions to clarify answers when necessary.

    All interviews should be conducted in English. (We cannot grade interviews conducted in other languages.)

  • Take thorough notes for each user interview.

    Include the notes for each interviewee in the design journal.

    Do not record user interviews. Recording user research typically requires informed consent from participants (and other legal considerations). That's not something we're able to cover in an introductory-level course.

  • Analyze the user interviews to identify a common set of goals for your website's audience.

Audience Requirements​

  • Your audience should represent a cohesive group with relatively uniform goals.

    Describe your audience using their goals, not their identity or the identity of the interviewees.

  • Identify at least 3 goals for your audience from your user interview data.

    The goals should be common across interviewees.

  • You may only have a primary audience for this project

    This is an introductory course. We are unable to cover designing for multiple audiences.

  • You may not be the audience for your website. You may not design the website for yourself.

Website Content Requirements​

  • You should assemble sufficient content for 3-5 web pages.

    You must submit the actual content you plan to use on your website in the design-plan/content/ directory. Do not structure your content as HTML!

    Simply place plain text or markdown files (e.g. .txt or .md of your website's content) and image (or media) files (e.g. .jpg, .png, or .pdf of your website's media) in the design-plan/content/ directory. Your content files need not be organized in any particular way (i.e. not by page, etc.) (You will move this content into HTML files in the next milestone.) No credit for HTML structured content.

    No credit is provided for placeholder content.

  • All content should address the goals of your site's audience.

  • Your website should include substantial content; each page should be content rich.

    This includes substantial text content. You are also required to include image content.

  • You may use any content you find or create.

    • You may create your own content. You are not required to do so.
    • You may find content from other sources, including social media. You are not required to do so.
    • You may share content with your peers in this class. You are not required to do so.
    • You may use generative AI to create content. You are not required to do so.

    Remember that you will need to cite all content in next milestone. Keep track of each content's source for citation purposes.

  • The content you use need not be real nor accurate. However, it must be realistic and believable for your site's audience.

    You may "invent" content. You are free to use your artistic license for your content.

  • All content must reside in your project's repository as static content.

    You may not include any embedded content from other websites, like YouTube videos, etc.

Design Requirements​

  • Design a 3-5 page responsive website that is usable and addresses the goals of your audience.

    The content should be organized and structured to meet the goals of your audience. Card sort your content into pages.

    Sketch both narrow and wide screen designs.

  • Your design should be reasonably complex and ambitious.

    Your design should have many flexboxes. Some flexboxes should be nested inside other flexboxes.

    Your design should require media queries to implement the responsive design for both narrow and wide screens.

    Your design should have responsive images.

    Your design should be interesting. It should probably use colored boxes, decorative images, and interesting decorative elements. If your design is "minimal", you should expect a lower design grade. Your website's design should impress.

  • Design the entirety of each page from top to bottom for every page in your website.

    Do not just sketch the homepage or the top portion of each page.

  • Your design should employ the principles discussed and practiced in class.

    Prioritize content over decoration. (But don't forget decoration entirely! Decoration is important for a professional quality design.)

    Your design should employ common web and responsive design patterns for fully static websites. For example, navigation menus on narrow screens and navigation bars on wide screens. You are required to frame your content when viewed on "laptop" devices.

    Your design should employ visual design principles to communicate effectively with your audience.

    The main body should have a maximum width to ensure readability. It should not fill 100% of the screen if the browser is unreasonably wide.

  • Your design should employ familiar web design patterns.

    At minimum, this includes the following for every page:

    • A header with a logo and page title
    • A navigation bar that is the same for all pages
    • A footer

Prohibited​

danger

If any of the following prohibited items are included in your milestone, you will receive no credit for the entire milestone. No exceptions.

  • You will not code your website in this milestone.

    Do not code your website. You will only plan and design it in this milestone.

  • Do not design any interactive website elements in this milestone.

    Interactive elements are those elements that cause a change on the website when a user interacts with them. For example, a hamburger menu shows and hides the navigation when clicked.

    Your design for this milestone should be entirely static. Assume that nothing can change on the website when a user interacts with it. (No JavaScript is allowed for this milestone.)

  • You may not use HTML forms on your website.

    Forms require server-side code. We can only program client-side (front-end) code in this course.

    You may not use the <button>, <input>, <textarea>, <select>, <option>, <form> HTML elements.

Milestone Instructions​

Identify a topic for your website, conduct user interviews to identify an audience and their goals, identify content for your website that addresses those goals, plan your website's pages through card sorting, sketch your website's responsive design/layout for both narrow and wide screens, and document your entire design process in your design journal.

Milestone Tips

  • The design journal documents your workflow and design process as you develop your website. It should be a valuable use of your time, articulating things we cannot see directly in your final website: the alternatives, the justifications, the processes.

    Articulating reasons is important for convincing us, future teammates, clients, bosses, and yourself that you're making good choices, and you know what you're talking about. If your design journal simply says what you actually did, it is not useful for us and will be a waste of time for you.

  • You may stage, commit, and push as many times as you want to back up your work. Responsible UX engineers back up their work frequently.

  • Please don't wait until the last minute; technologies don't always cooperate and require some fiddling, especially the first time you use them.

Review the Project Requirements​

When working for a client, you'll need to check their requirements frequently to ensure you're meeting their expectations. You don't want to spend weeks working on something only to discover at the last minute that what you've been working on doesn't meet their requirements.

Carefully read the milestone requirements.

The Design Journal​

The Design Journal (design-plan/journal.md) is where you will plan your website. You will document your design process, including your research, sketches, and design decisions. This process helps you think through your design decisions and reflect on whether your choices are appropriate for your audience. This is common practice in industry.

Document all your design, planning, and reasons for your decisions for this milestone in the design-plan/milestone-1.md file.

You will need to write your design journal in Markdown.

Review the Milestone 1 design journal before moving on to the next step.

Identify a Topic for Your Website​

You are creating a website about a topic of your choice.

Open the Design Journal and complete the "Website Topic" section in the design journal. Briefly explain what your website will be about, and share your vision of your website.

Your website will be implemented from scratch. You may not redesign an existing website.

Website Design Exploration (Example Sites)​

You're about ready to design your website. However, before you begin this journal, it's a good idea to take a moment and review other website designs. Why? Design inspiration. Design doesn't exist in a vacuum and studying existing designs can improve the usability of our own site's design.

Identify two websites (preferably static websites) that exist today on the web that are similar to the type of website you wish to create. You will be drawing inspiration from these sites for your own site. You may not use the instructor's website or template websites for this part; the example websites should be real websites that exist on the web.

Include a mobile screenshot of the home page for each site.

Complete the Website Design Exploration section in the design journal.

Plan Your User Interviews​

(To be completed during section on 10/23)

Review the user interview requirements and plan your user interviews in the design journal.

Conduct User Interviews​

(Pilot to be completed during section on 10/23)

Review the user interview requirements and conduct your user interviews.

Identify Audience Goals​

Review the audience requirements and identify the goals of your website's audience in the design journal.

Plan and Organize Your Website's Content​

Review the website content requirements and plan and organize your website's content in the design journal.

info

Avoid videos for your content. Videos are complicated on the web, and we don't know enough yet to properly use them. However, if you wish to include videos, they must be hosted locally in your project's repository and be less than 10MB in size.

You may not embed videos from other websites (e.g. YouTube, TikTok, etc.) in your website.

Create/Assemble Your Site's Content​

You will author, create, or assemble all the content for your website. This includes substantial text content and media. You need enough content, especially text content, for 3-5 web pages. (You may use generative AI for content creation. If you do, cite the AI tool you used.)

Next, Assemble and/or create all the content (text, images, PDFs, etc.) you will need for your website in the design-plan/content folder. Place all text content in plain text or markdown files (i.e. .txt, .md). Upload all media content (i.e. images) to the design-plan/content folder.

Don't use content placeholders (e.g. "My resume goes here."); include your actual resume. We should see the actual content you will eventually include in your website when you code the HTML in the next milestone.

Uploading images to codespace: To upload image files from your local computer, you can drag-and-drop the files into your design-plan/content folder. Alternatively, right-click (ctrl+click on Windows or cmd+click on macOS) on the folder where you want to upload the images and select the "Upload" option.

warning

All content files should be less than 10MB. (Files larger than 100MB are rejected by GitHub. Before you commit, check to make sure none of your files are larger than 100MB.)

Design Brainstorm​

Sketch 2 separate design ideas for the homepage of your website. Provide a narrow and wide screen sketch for each design. (total 4 sketches)

You need not include all the homepage content in these sketches. You need not design the entire page from top to bottom for these sketches. These are brainstorm sketches. They should be rough sketches of different design ideas for your homepage, but they don't need to be a complete design. (You'll do a complete design sketch in the next step.)

Design a Responsive Website​

Review the design requirements and design each page of your website through sketching. Include your sketches in the design journal.

Do not design any interactive website elements, like hamburger menus that show/hide navigation or carousels that let users swipe through images, etc. Design a completely static website with usable content that can be implemented with only HTML and CSS.

List Reference Resources​

Complete the "References" section in the design journal.

Only provide references to the materials you used to help you learn and complete the assignment. You need not provide a reference for the course material or the mozilla reference documentation. You do need to reference ChatGPT or online tutorials.

Check your Work​

Review the milestone requirements and check that your milestone submission adheres to these requirements.

Everything in your design journal must be visible in the Markdown preview when using "Markdown: Open Preview" for credit. Not visible = no credit.

Remember that part of developing your professional skills is learning to check your work against requirements. You will not be provided a rubric in industry and I want you to be prepared.

Submission​

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Complete the submission form for project-m1 to submit the assignment.

note

The submission form asks you to check your submission. Checking your work will ensure you receive credit for this assignment. We ask you to check your submission because this is where some students lose points. It's easy to forget something and checking your work prevents the heartache of getting a 0 because your submission wasn't submitted in a way that we can access and grade it.

Contributors​

Copyright © 2017 - 2026:

  • Kyle Harms
Last updated on