Design for Others

  • Group size: Teams of 4
  • Demo Day: Tuesday, February 8 in class.
  • Design Doc Due: Thursday, February 10. 11:59 PM.

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 Others

In this design sprint, you will take an existing website by a local organization and redesign it for mobile phones:

  1. Fox Theatre
  2. MARTA
  3. Atlanta History Center

Here’s the catch: you aren’t just translating the existing design to a mobile context for the general public. Instead, imagine that your users’ mobile phones redesigned the website on the fly to specifically cater to their needs and preferences.

You will be designing for a specific user group that only your team knows. On our demo day, the rest of the class will be making their best guess as to which demographic you are catering to. For example, you could be asked to design for one of the following groups (I am going to intentionally NOT use either of these groups):

  • College students
  • People who live in Decatur in their 50s

While you will not redesign the entire website, you should redesign 4-5 pages on the website. One of those pages must be the homepage. The others must be accessible from the homepage. Try not to look at or rely on the existing site from your mobile device. Imagine you are tasked with creating the mobile site given only the desktop-friendly version.

REMEMBER: Do not share who you are designing for with any other students in the class.

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 don’t 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. Again, don’t reveal who you designed this for!

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… create your mobile website. 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 of your website on Figma. There should be 3-4 other web pages that are linked from the homepage that you have also redesigned.

Deliverables

  • Demo Day (2/8): You should have a Figma link handy and ready for you to present in class on the day of your demo. Plan to spend approximately 6 minutes presenting (~4 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.
  • Delivery Day (2/10): The output from this assignment should be the design document. Post the link of your Medium post along with your name on our Slack channel for Group Assignment 1 and submit the link on Canvas. 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. For this assignment, I would expect a minimum of the following:
    • pictures of your various sketches
    • a picture of your moodboard
    • pictures of your final product (more broadly, the evolution of your design should be clear)
  • Grading: Grading will be based on the design rubric.