Design for Dimensions

Overview

Before you begin: Read this entire document and consider how you might want to split up work.

Purpose: The goal of this design sprint is to practice responsive and contextual UI/UX design as a collaborative team. Rather than simply shrinking or stretching a layout to fit different screens, you will redesign an existing website (Carburritos) tailored specifically to the unique physical, interaction, and context-of-use constraints of three distinct device dimensions for a targeted user demographic.

In this assignment, as a team, you will learn and practice:

Why this matters (this week and beyond): This is your first opportunity in this class to work on a creative project as a group. You’ll grow skills in communication, leadership, professionalism, and teamwork (in addition to the technical skill of using Figma). Beyond this class, your careers will almost certainly involve some type of end-user, and learning how to effectively cater your product/software/words to different audiences and different screen sizes demonstrates that you know how to be flexible and account for a variety of possibilities.

Task

Redesign at least two pages of the Carburritos website:

  1. The Homepage.
  2. A second page directly accessible from the homepage (e.g., “Catering”, “Employment”).

Example of a webpage that has three webpages linked to it. The student has selected the homepage as one of their pages to revise, and selected "shop" as the second page to revise. An example webpage, with additional pages linked to the homepage. The additional pages are “About Us”, “Shop” and “Login”. The students selected the homepage as one of their pages and “Shop” as their second page to revise.

You will create 3 distinct interactive prototypes (one for each screen size below), with each prototype showcasing both pages (6 total views):

Here’s the catch: you can’t just shrink or expand content to fit a different screen size, just like you can’t expect all users to benefit from the same user experience. You must consider the holistic user experience of the device, while balancing creating the best experience for a specific user group. The input modalities are different for a smart watch than a laptop. For instance, an Apple Watch has a digital crown, while a laptop does not. A large wall-sized multi-touch display is often used in collaborative settings, sometimes with pen and touch, while a laptop is usually for an individual. Likewise, designing for diners who are in their 60s has a different set of design requirements than designing for Davidson College students.

AI Policy 🤖: You are encouraged to use AI tools (e.g., ChatGPT, Claude, Midjourney, Figma AI) as a thought partner to assist with research, ideation, and asset generation. I’ll explain specifics below.

This assignment will be published on Medium so that all group members can link to the work and so future employers can read about your project. We will discuss publishing in class – if you are not comfortable publishing the work, then your group will keep the write up as an unpublished, unviewable Medium draft.

Step-by-Step Instructions

Collect evidence along the way! Don’t make writing your design doc more difficult than it needs to be!

Step 1: Define Target Demographic & Information Design

  1. Select a specific user demographic (who are they, what do they need, and when/why are they visiting Carburritos?). This decision will influence your design choices, so be sure to fully flesh out all the details of your user demographic.
    • AI Policy 🤖: You may choose to prompt AI to explore potential goals, pain points, or mental models of your chosen user group (e.g., “What are key accessibility and visual hierarchy considerations for adults 60+ using a restaurant website on a smartwatch?”). If you choose to use AI in this way, I would use it to help mitigate biases and to look for cases you hadn’t considered.

  2. Audit the current website content and re-prioritize information across both selected pages specifically for your user group. Don’t just rearrange the homepage – that was constructed for a general audience. Instead, think about the goals of your users and adjust the information/layout accordingly.

  3. Establish a clear visual hierarchy for the information on the webpage. Refer to course notes, 9 Information Design Tips to Make You a Better Web Designer, and Top 10 Enduring Web-Design Mistakes posted by the Nielsen Norman Group.

Step 2: Ideate and Paper Prototype (30 Sketches + 3 Paper Prototypes)

With your target demographic and information hierarchy in mind, let’s ideate what we want the website to look like.

You will need to come up with 30 different ideas/sketches. This breaks down to 3 screen dimensions * 2 pages per screen * 5 ideas per page. You will need to come up with 30 different ideas/sketches. This breaks down to 3 screen dimensions * 2 pages per screen * 5 ideas per page.

Step 3: Visual Design & Mood Board

Construct a Mood Board (using tools like Niice.co or something as flexible as Canva) collecting visual references (color palettes, typography, UI components, tone) that appeal directly to your chosen demographic.

Define a clean style guide (colors, typography, component styles) anchoring your visual choices. You can choose to make this a separate document for your team to reference, or simply note your style guide contents in your writeup (e.g., “From our moodboard, we decided on a range of blues for our color palette with Arial font for clarity and accents of yellow for emphasis.”).

Step 4: High-Fidelity Figma Prototypes

Build 3 interactive high-fidelity prototypes in Figma (one per device size). Each prototype must show the user flow between the homepage and your chosen second page (so 6 screens should be present in total).

A representation of the materials needed for the demo. Your high-quality prototypes for each screen size should include a view of the homepage and a view of the other page you redesigned.

Step 5: In-Class Presentation & Demo DUE BY 8:05 IN CLASS

Step 6: Write & Submit Design Document DUE BY 11:59 PM TO MOODLE Write a collaborative team Design Document (one per group). An example Medium post from an Emory student is here – it’s a solid enough example but I would not give it a 100%.

Submission Process:

  1. Post the Medium post link + all team member names to Slack #design-sprints. This shows your team members that you have turned in the assignment.

  2. Submit the Medium post link to Moodle (one submission per group).

  3. Complete the required Peer Feedback Form.

As with all design documents, it should include evidence of your design process. You do NOT need to create a demo video for this design sprint.

Criteria for Success

Grading is based on this variation of the HCI design rubric and individual peer evaluations via the Peer Feedback Form.

What High-Quality Work Looks Like:

Rigorous Evidence of Process:

Mandatory transparency & citation requirement: If your team uses AI in any part of your design sprint, you must include an “AI Usage Statement” section in your Medium Design Document detailing:
   Which tools were used (e.g., ChatGPT-4o, Midjourney v6).
   What tasks they assisted with (e.g., copy editing, mood board image generation, demographic research).
   Reflective Critique: Briefly comment on whether the AI output was useful or if it produced design assumptions that your team had to correct.

30 Initial Sketches: Clear photo evidence of 5 distinct ideation sketches per page per screen size.

3 Paper Prototypes: Documented paper prototypes with insights from peer testing.

1 Mood Board: Visual mood board explicitly linking colors, typography, and styling to target demographic psychology.

3 Figma Prototypes: Screenshots of your final Figma designs and the links to the interactive Figma designs. The prototypes should cover both the homepage and the secondary page across all 3 screen sizes.

Comprehensive Design Document: Clear narrative outlining design evolution, user testing takeaways, and explicit design decisions.