Design for Dimensions

Overview

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

It’s time to begin the design process as a team. This first design sprint will build on the skills you developed during the Health Design assignment and force you to engage with three aspects of the design process. In particular, you and your group will demonstrate understanding of:

  1. Visual design
  2. Sketching for ideation (using paper)
  3. Prototyping tools (using Figma)

Designing for Dimensions

In this design sprint, you will take an existing website and redesign it for three different devices. Dimensions, in this case, refers to different screen sizes:

  1. a smart watch,
  2. a laptop, and
  3. a large multi-touch display (think Microsoft Surface Hub)

Here’s the catch: you can’t just shrink or expand content to fit a different screen size. You must consider the holistic user experience of the device. 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.

Furthermore, you shouldn’t just translate the existing design for these devices. Instead, imagine that you want to create the best experience for a specific user group. Your group should define who that user group is. Who are they? What do they need (differently from other users), and how can you cater your design to that group? For instance, the informational needs, the designs you’d choose, and the interactions you might support would likely be very different if you were designing for people who live in Cornelius in their 50s v. Davidson College students.

The website: you will be re-designing the Knotty and Board website, a local home furnishings company.

While you will not redesign the entire website, you should redesign at least two pages on the website. One of those pages must be the homepage. The other[s] must be accessible from the homepage. This means your prototypes should showcase both pages. Since there are 3 screen sizes, you will have 3 different prototypes that have 2 pages per prototype (e.g., for the watch you’ll show the landing page + another page, for the desktop you’ll show the landing page + another page, and for the large display you’ll show the landing page + another page).

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.

Information Design

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

The first thing that you should do is establish which information should be emphasized to your specific user group. Don’t just rearrange the homepage - that was constructed for a general audience. Instead, consider which information across the entire website should be emphasized for your group. What do you think the goals of your users would be?

The information that is most important may differ by group. Make sure that this is reflected visually in the organization of your information. Wherever possible, try to check your assumptions. You don’t have time to interview your target group, but you can (and should!) explore other websites to get a very rough sense of their priorities.

Within each page: You should similarly prioritize information within each page. Consider your information hierarcy and make sure that the most important information is visually prioritized within each page. Your decisions should be anchored in your reading and lecture notes.

Helpful advice:

Output: Use sketching as a tool to explore your designs. The goal here is to rapidly explore many different solutions with messy sketches. After you have thoroughly explored the design space (you should have at least 5 ideas for each screen), use paper to construct a cleaner paper prototype for that screen. You should have 3 paper prototypes (one for each screen: watch, desktop, and display) that are the cleaned, culmination of your ideas for the two webpages (knottyandboard.com homepage + another page linked to that homepage).

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.

You should test this paper prototype with other people in the class. While they likely may not represent your users (so this is typically bad practice), I want you to get in the habit of getting feedback on whatever you create. We’ll discuss user testing more in a week or two. Until then, do your best to get worthwhile feedback and change your prototype accordingly. Don’t reveal who you designed this for! Ask your users afterwards what user group they think you designed it for… Were the right? Incorporate your findings into the next iteration of your design.

Visual Design

Just as the important information may differ between groups, so might the styles that they prefer. Consider how the websites that are targeted towards college students differ in their fonts, colors, and visual organization in comparison to websites that specifically target elderly users.

Being able to articulate the correct mood and/or tone for your demographic is critical. How can you do that if you’re not a professional designer? We’ll use one strategy here.

Create a Mood Board: You may not be able to design well for a particular group of people off the top of your head… but if you had enough good examples, you’d probably be able to pick up on a few ideas - design patterns, color schemes, fonts. This is exactly what a mood board is for. 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.

Consider the design resources we have posted on our website. For example, if you can extract a color or two from your design board, there are tools that you can use to uncover complementary colors.

Output: a set of colors, fonts, and general styles that you feel are appropriate for your user group. Consider explicitly putting these into your design doc to show the provenance of your stylistic decisions.

Building your Website Prototype

Now that you have your UI organization and style guide nailed down, it’s time to create your website for the three different devices. To create an interactive prototype, we’re going to use Figma - a prototyping, collaboration, & workflow platform. It might be a good idea to start with a tutorial.

Figma is fantastic, but it isn’t magic. You’re still going to need to create the visuals yourself. While applications like Adobe Photoshop are likely among the most powerful tools you can use to generate screen mock-ups, I’ve even used tools as simple as PowerPoint before. Don’t let the technology get in the way of your design.

Output: The redesigned homepage + one or more other screens of your chosen website on Figma for each of the three devices.

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.

Deliverables

Grading: Grading will be based on the design rubric. Be sure to complete the peer feedback forms linked at the enf of the design document guide, which will be a large part of your grade.