• Group size: Teams of 3 (1-2 teams of 4)
  • Demo Day: 3/23 in class
  • Design Doc Due: 3/26, 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. This first design sprint will force you to engage with three aspects of the design process:

  1. Visual Design
  2. Sketching for Ideation (using paper)
  3. Prototyping Tools (using invision or Adobe XD)

Typically, a critical portion of the user-centered design process is getting feedback from real users. In the interest of time, we won’t be doing that in this (short) design sprint. However, it doesn’t mean that you are ignoring their needs…

Designing for Others

In this design sprint, you will take one of the following existing websites by a local organization and redesign it for mobile phones:

  1. WCTI
  2. Technocopia
  3. Worcester Public Library

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

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.

Helpful Advice:

Output: Use sketching as a tool for explore your designs. Similar to our airport exercise, 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 10 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 in 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 targets 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 using invision - a prototyping, collaboration, & workflow platform. I have worked with the company to secure free accounts for you that will remain active until 6 months after you graduate. Please refer to our Slack group where I post the code you need to activate your free account. It might be a good idea to start with a tutorial.

Invision 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. Try to use whatever tools in which you can be most effective.

Output: The redesigned homepage of your website on invision. There should be 3-4 other web pages that are linked on off the homepage that you have also redesigned.

Deliverables

  • Demo Day: You should have an invision link handy and ready for you to present in class on the day of your demo. Your classmate 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: The output from this assignment should be the design document. Post the link to your post on the assignment turnin Google Sheet on our homepage. 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 module. 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)