Design for Dimensions

  • Group size: Teams of 3-4
  • Design Sprint Starts: Thursday, February 1, in class.
  • Design Sprint Ends (+): Thursday, February 15: in class; design document end of day.

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:

  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: content can't just be shrunken or expanded 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 Decatur in their 50s v. Spelman College students.

The website: you will be re-designing something near and dear to all our hearts. In the past, I have assigned websites for Atlanta-based businesses and organizations, including Emory Computer Science department website, Dave's Cosmic Subs in Emory Village, or Atlanta's Fox Theatre. This semester, you will choose the website of a local Atlanta business. Pick an organization or business that you and your groupmates care about, but don't spend too long deciding!

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.

Information Design

Collect evidence along the way! Don’t shoot yourselves in the foot for your design reflection!

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 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.

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 nailed down + a style guide, 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.

Deliverables

  • Demo (In-Class): You should have Figma links handy and ready to present in class on the day of your demo. Plan to spend approximately 8 minutes presenting (~6 minutes talking through your design + ~2 minutes for questions). Your classmates will critique your work (using the I like, I wish, What if framework) and also try to guess your target demographic… despite having no previous knowledge.

  • Final Deliverable (End-of-Day): The output from this assignment should be the design document (one per group). Post the link of your Medium post along with your group members' names on our Slack channel for #group_design_projects and submit the link on Canvas (only one group member needs to submit). 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. For this assignment, I would expect a minimum of the following:
    • pictures of your various sketches for all three devices
    • a picture of your moodboard
    • pictures of your final product for all three devices (more broadly, the evolution of your design should be clear)
    • links to your Figma prototypes
  • Grading:
    • Grading will be based on the design rubric.
    • Be sure to complete the peer feedback forms linked at the end of the design document guide, which will be a large part of your grade.