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 (Knotty and Board) 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 Knotty and Board website:

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

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 empty-nesters who are in their 60s has a different set of design requirements than designing for Davidson College students.

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 Knotty and Board?). This decision will influence your design choices, so be sure to fully flesh out all the details of your user demographic.

  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) collecting visual references (color palettes, typography, UI components, tone) that appeal directly to your chosen demographic. Collecting examples will help you pick up on design patterns, color schemes, fonts, etc. that your chosen demographic prefers. Style preferences differ across groups: consider how the websites that are targeted towards college students differ in their fonts, colors, emoji use, and visual organization in comparison to websites that specifically target elderly users. * As you search for websites or environments that are commonly visited by people in your target demographic, take pictures and then put them together in one space. I like using a website like niice.co. * Check our design resources for other tools to help.

Define a clean style guide (colors, typography, component styles) anchoring your visual choices in course design resources. 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, although depending on the complexity of your interaction design, it may still be a good idea to communicate your design.

Criteria for Success

Grading is based on a 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:

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.